bbs论坛注册功能（1）

分析项目需求创建表：

STATICFILE_DIR = [
    os.path.join(BASE_DIR,'static')        #设置目录，bootstrip添加到目录中去，直接本地调用
]
# auth默认表
AUTH_USER_MODEL='app01.UserInfo'    # 医用应用app01的userinfo表，不在使用默认的user表

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 = 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=32)
    # 个人站点样式文件，存该样式文件的路径
    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=256)
    # 文章详情,TextField存储大量文本
    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'))
# 创建article与tags的关系表第三张表
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')
    # 存点赞数
    is_up = models.BooleanField()

# 文章评论表
class Commnet(models.Model):
    # 用户字段
    user=models.ForeignKey(to='UserInfo')
    # 文章字段
    article = models.ForeignKey(to='Article')
    # 评论内容
    content = models.CharField(max_length=256)
    # 评论时间
    create_time = models.DateField(auto_now_add=True)
    # 父评论
    parent = models.ForeignKey(to='self',null=True)

设置后台views.py

from django.shortcuts import render,HttpResponse
from app01 import myforms

def register(reques):

    form_obj = myforms.MyForm()
    return render(reques,'register.html',locals())

前端设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册账号</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>注册页面</h1>
            <form id="myform">
                {% csrf_token %}
                {% for foo in form_obj %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }}
{#                        加载对应输入框的提示信息#}
                        <span class="errors"></span>
                    </div>
                {% endfor %}
            </form>
            <div class="form-group">
{#                点击图片也可以删除文件#}
                <label for="id_myfile">头像
                    <img src="/static/img/default.png" alt="" width="60" style="margin-left: 10px">
                </label>
                <input type="file" name="myfile" id="id_myfile" style="display: none">
            </div>
            <button class="btn btn-primary pull-right">注册</button>
        </div>
    </div>
</div>
</body>
</html>

实现点击头像上传图片后在头像上显示上传的头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册账号</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>注册页面</h1>
            <form id="myform">
                {% csrf_token %}
                {% for foo in form_obj %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }}
{#                        加载对应输入框的提示信息#}
                        <span class="errors"></span>
                    </div>
                {% endfor %}
            </form>
            <div class="form-group">
{#                点击图片也可以删除文件#}
                <label for="id_myfile">头像
                    <img src="/static/img/default.png" alt="" width="80" style="margin-left: 10px" id="id_img">
                </label>
                <input type="file" name="myfile" id="id_myfile" style="display: none">
            </div>
            <button class="btn btn-primary pull-right">注册</button>
        </div>
    </div>
</div>
<script>
    $('#id_myfile').change(function () {
        //获取上传的文件对象
        let fileobj=this.files[0];
        //生成一个文件阅读器对象
        let fileReader = new FileReader();
        //将文件独放入文件阅读器中
        fileReader.readAsDataURL(fileobj);
        {#fileReader文件读取图片完成后再进行渲染#}
        ///动态显示头像
        //等待文件加载完毕后在展示
        fileReader.onload = function(){
        //将读取出文件对象替换到img标签
        $('#id_img').attr('src',fileReader.result)
        }
    })

</script>
</body>
</html>

往后端传送数据使用ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册账号</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>注册页面</h1>
            <form id="myform">
                {% csrf_token %}
                {% for foo in form_obj %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }}
{#                        加载对应输入框的提示信息#}
                        <span class="errors pull-right" style="color: red"></span>
                    </div>
                {% endfor %}
            </form>
            <div class="form-group">
{#                点击图片也可以删除文件#}
                <label for="id_myfile">头像
                    <img src="/static/img/default.png" alt="" width="80" style="margin-left: 10px" 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">注册</button>
        </div>
    </div>
</div>
<script>
    $('#id_myfile').change(function () {
        //获取上传的文件对象
        let fileobj=this.files[0];
        //生成一个文件阅读器对象
        let fileReader = new FileReader();
        //将文件独放入文件阅读器中
        fileReader.readAsDataURL(fileobj);
        {#fileReader文件读取图片完成后再进行渲染#}
        ///动态显示头像
        //等待文件加载完毕后在展示
        fileReader.onload = function(){
        //将读取出文件对象替换到img标签
            $('#id_img').attr('src',fileReader.result)
        }
    });
    //ajax提交数据
    $('#id_submit').click(function () {
        //生成一个formdata对象
        let formData = new FormData();
        //往formData中添加键值
        $.each($('#myform').serializeArray(), function (index, obj) {
            {#console.log(index,obj)#}
            formData.append(obj.name,obj.value)
        });
        //手动添加文件数据
        formData.append('myfile',$('#id_myfile')[0].files[0]);
        $.ajax({
            url:'',
            type:'post',
            //发送formData需要制定参数，数据不做处理
            data:formData,
            processData:false,
            contentType:false,
            success:function (data) {
                console.log(data)
                if (data.code == 100){
                    //跳转页面
                    location.href = data.url
                } else{
                    $.each(data.msg,function (index,obj) {
                        console.log(index,obj)
                        let targetID = '#id_'+ index; //id_username,id_password
                        $(targetID).next().html(obj[0])
                    })
                }
            }
        })
        $('input').focus(function () {
            $(this).next().html('')
        })
    })
</script>
</body>
</html>

from django.shortcuts import render
from app01 import myforms
from app01 import models
from django.http import JsonResponse

# 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)
        print(request.POST)
        # 判断数据是否存在，存在返回true，不存在返回false
        print(form_obj.errors)

        print(form_obj.is_valid())
        if form_obj.is_valid():
            data = form_obj.cleaned_data
            # 将coonfirm_password去除掉
            data.pop('confirm_password')
            # 获取用户上传头像文件
            file_obj = request.FILES.get('myfile')
            # 判断用户是否上传了自己的头像
            if file_obj:
                # 数据库中头像路径字段是avator
                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())

实现效果：前台输入信息完成注册，输入错误提示红色信息，再次点击窗扣错误信息消失