杂七杂八

昨日内容回顾
   BBS
   
   项目流程
      需求分析
      项目设计(架构设计，框架选择，数据库...报价)
      分任务开发(小组成员开发)
      测试(测试)
      交付上线(运行)
   
   
   用户表(AbstractUser)  settings文件一定要告诉django   AUTH_USER_MODEL = 'app01.UserInfo' 
      phone
      avatar
      create_time  
      
      blog         一对一个人站点
      
   
   个人站点(Blog)
      site_name
      site_title
      site_theme

   
   分类表
      name
      blog       一对多个人站点
   
   
   标签表
      name
      blog       一对多个人站点
   
   文章表
      title
      desc
      content
      create_time
      # 数据库优化
      comment_num
      up_num
      down_num
      
      blog         一对多个人站点
      category      一对多分类表
      tag             多对多标签表
      
      
   
   点赞点踩表
      user             一对多用户       
      article          一对多文章
      is_up             0/1
   
   
   评论表
      user             一对多用户       
      article          一对多文章
      comment
      parent           to='self',null=True
   
   
   1.写forms组件
      username
      password
      confirm_password
      email
      # 局部钩子 校验用户名是否存在
      # 全局钩子 校验密码是否一致
      
      
      
   2.搭建注册页面
      1.利用forms组件渲染前端页面，手动添加获取用户头像的input框
      2.将img标签放入label中，将input框隐藏
      3.利用文件阅读器动态展示用户上传的头像
         注意:需要等待文件阅读器读取完毕之后再赋值给src属性，利用onload
      4.ajax发送post请求
         利用内置对象FormData传递数据
         利用form标签序列化数组
         手动获取文件对象$('[input="file"]')[0].files[0]
         formdata发数据需要手动修改两个参数
            processData：false
            contentType：false
         
         
      后端
         利用cleaned_data是一个大字典特性,将confirm_password键值去掉
         手动获取用户头像，判断用户是否上传头像，再决定要不要放入cleaned_data字典中
         利用**{}将字典打散成关键字参数的形式
         
         
         
   ps:在用ajax做前后端交互的时候通常后端都会实现定义一个字典作为数据交互的媒介
         
         
   
   ps:img标签src属性可以放文件路径，也可以放文件二进制数据，还可以放url！
      


   今日内容
      登录
         图片验证码
      
      主页搭建
         

   图片相关功能模块
      pip3 install pillow
      
   
   django settings文件逻辑
      用户配置了就用用户的
      用户没有配置就用默认的
      
      
 博客园给用户用的，肯定要一张表是记录用户信息的，每一个用户都有属于自己的站点，所以有个人站点表，个人站点表有文章的标签和文章的分类，
 所以有文章标签表和文章分类表，你给多少篇文章添加了标签，一个分类下有多少篇文章，方便找寻，你创建一个标签就会有一个标签的名字在那，
那就相当于有个东西帮你记住了，那就是一张表  
每个人创建的标签的名字可以一样也可以不一样，分类和标签放着一篇篇文章，文章表里又有点赞点踩数，一个用户只能给一篇文章点赞点踩一次，
后端记录着数据来判断你是否点赞点踩过，所以要有张点赞点菜表来记录，记录哪个用户给哪篇文章点赞点菜过，评论：评论人，评论内容，
评论的文章，这个东西也是存在一张表里，那时候渲染文章的时候也是把你相关的评论渲染出来，
      
 用户表继承auth模块，登录注册，注销，修改密码等等都已经封装好了  
每一篇文章，你在渲染的时候，需要帮文章的点赞数点菜数，评论都拿出来，虽然再另一个表中，但是这么多篇文章，
每篇文章都要去跨表查询的话，增加数据库的压力，可以有一些普通的字段存着，
到时候这些字段只需要保证跟另一张表的数据同步删除和同步更新就好了，我就不需要跨表了，只需要查看我的字段，
到时候在面试的时候是可以说的，表设计的时候有那么几个字段，虽然再另外一张表存在但是查询频率比较高，
然后我在我这张表中单独开了三个字段跟它对应着，到时候在做数据库的时候呢，我需要保持这两张的数据同步更新和同步删除
文章表有没有什么外键关系，还是先想个人站点，首先侧屏栏有分类和标签，右边就是一篇篇的文章就是多个文章，多个文章
在个人站点下，一个站点下可以有多个文章，你写的文章只能在你的站点下，分类和标签括号的数字表示每一个分类的文章数和每个标签下的文章数
一个分类下可以有多篇文章，一篇文章只属于一个分类，一对多文章跟标签就是多对多，三种创建多对多的关系，
半自动创建，
点赞点菜：这篇文章有哪个用户点了赞点了踩，所以应该去拿个本子去找，哪篇文章，给哪些用户点了赞点了踩
确认字段，这些字段到底是普通字段还是外键字段，点赞点踩表就是所有的用户和所有的文章的点赞点菜的关系
说我用户1可以给文章1点赞点菜也可以给文章2点赞点菜 ，点赞点菜的一条数据能否对应用户多条数据呀 ，不可以 。
用户的数据可以对应点赞点踩多条数据，点赞点踩表的一条数据能否对应我文章的多条数据，
明显不可以，一篇文章能对应点赞点菜的多条数据
   
首先获取用户的输入，来注册说明是这个网站的新用户，注册就有自己的规则，说用户名不能超过多少位等待，
所以会有校验性的东西，限制用户输入 
froms组件（渲染前端页面，校验信息，返回错误信息）  
   

from django.shortcuts import render, HttpResponse,redirect
from app01 import myforms
from app01 import models
from django.http import JsonResponse

from PIL import Image,ImageFont,ImageDraw
import random
from io import BytesIO
from django.contrib import auth
# Create your views here.
def register(request):
    back_dic = {'code': 100, 'msg': ''}
    form_obj = myforms.MyForm()
    if request.method == 'POST':
        form_obj = myforms.MyForm(request.POST)
        if form_obj.is_valid():
            data = form_obj.cleaned_data
            # 将confirm_password去掉
            data.pop('confirm_password')
            # 获取用户上传的文件对象
            file_obj = request.FILES.get('myfile')
            # 判断用户是否上传了自己的头像
            if file_obj:
                # 往data添加一组键值
                data['avatar'] = file_obj
            models.UserInfo.objects.create_user(**data)
            back_dic['msg'] = '注册成功'
            back_dic['url'] = '/login/'
        else:
            back_dic['code'] = 101
            back_dic['msg'] = form_obj.errors
        return JsonResponse(back_dic)
    return render(request, 'register.html', locals())


def login(request):
    back_dic = {'code':100, 'msg':''}
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        code = request.POST.get('code')
        if request.session.get('code').upper() == code.upper():
            user_obj = auth.authenticate(username=username, password=password)
            if user_obj:
                auth.login(request,user_obj)
                back_dic['msg'] = '登录成功'
                back_dic['url'] = '/home/'
            else:
                back_dic['code'] = 102
                back_dic['msg'] ='用户名或密码错误'
        else:
            back_dic['code'] = 103
            back_dic['msg'] ='验证码错误'
        return JsonResponse(back_dic)
    return render(request, 'login.html')


def get_random():
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)


def get_code(request):
    img_obj = Image.new('RGB', (310, 35), get_random())
    img_draw = ImageDraw.Draw(img_obj)
    img_font = ImageFont.truetype('static/font/mo.ttf', 35)
    code = ''
    for i in range(5):
        random_int = str(random.randint(0, 9))
        random_lower = chr(random.randint(97, 122))
        random_upper = chr(random.randint(65, 90))
        temp_code = random.choice([random_int, random_lower, random_upper])
        img_draw.text((60 + i * 45, 0), temp_code, get_random(), img_font)
        code += temp_code
    print(code)
    request.session['code'] = code
    io_obj = BytesIO()
    img_obj.save(io_obj, 'png')
    return HttpResponse(io_obj.getvalue())


def home(request):
    return HttpResponse('home')

def logout(request):
    auth.logout(request)
    return redirect('/home/')

def set_password(request):
    old_password = request.POST.get('old_password')
    new_password = request.POST.get('new_password')
    confirm_password = request.POST.get('confirm_password')
    res = request.user.check_password(old_password)
    if res:
        if new_password == confirm_password:
            request.user.set_password(new_password)
            request.save()
            return redirect('/login/')
    return render(request,'set_password.html')

from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.
class UserInfo(AbstractUser):
    phone = models.BigIntegerField(null=True)
    create_time = models.DateField(auto_now_add=True)
    # 该字段会将接受到文件自动存放到avatar文件夹下，只存该文件的路径 比如:avatar/111.png
    avatar = models.FileField(upload_to='avatar/',default='avatar/default.png')
    blog = models.OneToOneField(to='Blog',null=True)



class Blog(models.Model):
    site_name = models.CharField(max_length=32)
    site_title = models.CharField(max_length=64)
    # 个人站点的样式文件 存该样式文件的路径
    theme = models.CharField(max_length=64)


class Category(models.Model):
    name = models.CharField(max_length=64)
    blog = models.ForeignKey(to='Blog',null=True)

class Tag(models.Model):
    name = models.CharField(max_length=32)
    blog = models.ForeignKey(to='Blog',null=True)


class Article(models.Model):
    title = models.CharField(max_length=64)
    desc = models.CharField(max_length=255)
    # 存大段文本
    content = models.TextField()
    create_time = models.DateField(auto_now_add=True)
    # 查询优化
    # 评论数
    comment_num = models.IntegerField()
    # 点赞数
    up_num = models.IntegerField()
    # 点踩数
    down_num = models.IntegerField()

    blog = models.ForeignKey(to='Blog',null=True)
    category = models.ForeignKey(to='Category',null=True)
    tags = models.ManyToManyField(to='Tag',through='Article2Tags',through_fields=('article','tag'))

class Article2Tags(models.Model):
    article = models.ForeignKey(to='Article')
    tag = models.ForeignKey(to='Tag')



class UpAndDown(models.Model):
    user = models.ForeignKey(to='UserInfo')
    article = models.ForeignKey(to='Article')
    # 存0/1
    is_up = models.BooleanField()


class Comment(models.Model):
    user = models.ForeignKey(to='UserInfo')
    article = models.ForeignKey(to='Article')
    content = models.CharField(max_length=255)
    create_time = models.DateField(auto_now_add=True)
    parent = models.ForeignKey(to='self',null=True)

from django import forms
from django.forms import widgets
from app01 import models
class MyForm(forms.Form):
    username = forms.CharField(max_length=8,min_length=3,label='用户名',error_messages={
                                                    'required':'用户名不能为空',
                                                    'max_length':'用户名最大8位',
                                                    'min_length':'用户名最小3位',
    },widget=widgets.TextInput(attrs={'class':'form-control'}))
    password = forms.CharField(max_length=8, min_length=3, label='密码',error_messages={
        'required': '密码不能为空',
        'max_length': '密码最大8位',
        'min_length': '密码最小3位',
    }, widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    confirm_password = forms.CharField(max_length=8, min_length=3, label='确认密码',error_messages={
        'required': '确认密码不能为空',
        'max_length': '确认密码最大8位',
        'min_length': '确认密码最小3位',
    }, widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    email = forms.EmailField(label='邮箱', error_messages={
        'required': '邮箱不能为空',
        'invalid': '邮箱格式错误',
    }, widget=widgets.EmailInput(attrs={'class': 'form-control'}))
    # 局部钩子校验用户名是否存在
    def clean_username(self):
        username = self.cleaned_data.get('username')
        user_obj = models.UserInfo.objects.filter(username=username).first()
        if user_obj:
            self.add_error('username','用户名已存在')
        return username


    # 全局钩子 校验密码是否一致
    def clean(self):
        password = self.cleaned_data.get('password')
        confirm_password = self.cleaned_data.get('confirm_password')
        if not password == confirm_password:
            self.add_error('confirm_password','两次密码不一致')
        return self.cleaned_data

"""
Django settings for BBS project.

Generated by 'django-admin startproject' using Django 1.11.11.

For more information on this file, see
https://docs.djangoproject.com/en/1.11/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.11/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'j#j2)@qwelexuq0two4vs3oc+2nulfvyj^y3f3rp#ob7whj@8_'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'BBS.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'BBS.wsgi.application'


# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'bbs',
        'HOST':'127.0.0.1',
        'PORT':3306,
        'USER':'root',
        'PASSWORD':'123',

    }
}


# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS= [
    os.path.join(BASE_DIR, 'static')

]

#指定自己的auth用户表
AUTH_USER_MODEL = 'app01.UserInfo'

"""BBS URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^register/', views.register),
    url(r'^login/',views.login),
    url(r'^get_code/',views.get_code),
    url(r'home/',views.home),
    url(r'logout/', views.logout),
    url(r'set_password',views.set_password)
]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/font-awesome/5.8.2/js/fontawesome.min.js"></script>

    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">BBS</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">文章<span class="sr-only">(current)</span></a></li>
        <li><a href="#">随笔</a></li>

      </ul>
        {% if request.user.is_authenticated %}
         <ul class="nav navbar-nav navbar-right">
        <li><a href="#">{{ request.user.username }}</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操作<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/set_password">修改密码</a></li>
            <li><a href="#">修改头像</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="/logout/">注销</a></li>
          </ul>
        </li>
            {% else %}
            <li><a href="/register/">注册</a></li>
            <li><a href="/login/">登录</a></li>
        {% endif %}

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/font-awesome/5.8.2/js/fontawesome.min.js"></script>

    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h2 class="text-center">登录</h2>
            {% csrf_token %}
             <div class="form-group">
                 <label for="id_username">用户名</label>
                 <input type="text" name="username" id="id_username" class="form-control">
         </div>
            <div class="form-group">
                <label for="id_password">密码</label>
                <input type="text" name="password" id="id_password" class="form-control">
            </div>
            <div class="form-group">
                <label for="id_code">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" name="code" id="id_code" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <img src="/get_code/" alt="" width="310" height="35" id="id_img">
                    </div>
                </div>
            </div>
            <button class="btn btn-success" id="id_button">登录</button>
            <span class="errors" style="color:red" id="id_error"></span>
        </div>
    </div>
</div>
<script>
    $('#id_img').click(function(){
        let oldPath = $(this).attr('src');
        $(this).attr('src',oldPath +='?')
    });
    $('#id_button').click(function () {
        $.ajax(
            {
                url:'',
                type:'post',
                data:{
                    'username':$('#id_username').val(),
                    'password':$('#id_password').val(),
                    'code':$('#id_code').val(),
                    'csrfmiddlewaretoken':'{{ csrf_token }}',
                },
                success:function (data) {
                    if (data.code == 100){
                        location.href = data.url
                    }else{
                        $('#id_error').html(data.msg)
                    }

                }
            }
        )
    })

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/font-awesome/5.8.2/js/fontawesome.min.js"></script>

    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h2 class="text-center">注册</h2>
            <hr>
            <form action="" id="myform">
                {% csrf_token %}
                {% for form in form_obj %}
                    <div class="form-group">
                    <span class="errors"></span>
                        <label for="{{ form.auto_id }}">{{ form.label }}</label>
                    {{ form }}
                    </div>
                {% endfor %}
            </form>
        <div class="form-group">
            <label for="id_myfile" >头像
                <img src="/static/img/default.jpg" alt="" width="80" style="margin-left: 20px" id="id_img"></label>
            <input type="file" name="myfile" id="id_myfile" style="display: none">
        </div>
        <button class="btn btn-primary pull-right" id="id_submit" value="提交">注册</button>
        </div>
    </div>
</div>
<script>
    $('#id_myfile').change(function(){
    var myfileObj = $(this)[0].files[0];
    var fileReader = new FileReader();
    fileReader.readAsDataURL(myfileObj);
    fileReader.onload = function(){
        $('#id_img').attr('src',fileReader.result);
    }
    });
    $('#id_submit').click(function () {
     var formData = new FormData();
     $.each($('#myform').serializeArray(),function(index,obj){
         formData.append(obj.name,obj.value)
     })
    });
    formData.append('myfile' ,$('#id_myfile')[0].files[0]);
    $.ajax({
        url:'',
        type:'post',
        data:formData,
        processData:false,
        contentType:false,
        success:function(data){
                console.log(data)
        }
    })
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/font-awesome/5.8.2/js/fontawesome.min.js"></script>

    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h2 class="text-center">修改密码</h2>
            <from action="" method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label for="id_username">用户名</label>
                    <input type="text" name="username" id="id_username" class="form-control" disabled value="'{{ request.user.username }}">

                </div>
                <div class="form-group">
                    <label for="id_old_password">旧密码</label>
                    <input type="password" name="new_password" id="id_old_password" class="form-control">

                </div>
                <div class="form-group">
                    <label for="id_new_password">新密码</label>
                    <input type="password" name="new_password" id="id_new_password" class="form-control">
                </div>
                <div class="form=group">
                    <label for="id_confirm_password">确认密码</label>
                    <input type="password" name="confirm_password" id="id_confirm_password" class="form-control">
                </div>
                <button class="btn btn-success" id="id_button">修改密码</button>
                <span class="errors" style="color:red" id="id_error"></span>
            </from>
        </div>
    </div>
</div>
</body>
</html>