BBS登录与注册功能的总结

一、表设计:表名外键字段

表名 models.py

from django.db import models from django.contrib.auth.models import AbstractUser

class UserInfo(AbstractUser):
"""用户表"""
phone = models.BigIntegerField(verbose_name='手机号',null=True)
avatar = models.FileField(upload_to='avatar/',default='avatar/default.jpg',verbose_name='用户头像')
register_time = models.DateTimeField(verbose_name='注册时间',auto_now_add=True)

site = models.OneToOneField(to='Site',on_delete=models.CASCADE,null=True)

class Site(models.Model):
"""个人站点表"""
site_name = models.CharField(verbose_name='站点名称',max_length=32)
site_title = models.CharField(verbose_name='站点标题',max_length=32)
site_theme = models.CharField(verbose_name='站点样式',max_length=32,null=True)

class Article(models.Model):
"""文章表"""
title = models.CharField(verbose_name='文章标题',max_length=32)
desc = models.CharField(verbose_name='文章简介',max_length=255)
content = models.TextField(verbose_name='文章内容')
create_time = models.DateTimeField(verbose_name='创建时间',auto_now_add=True)
# 三个优化字段
comment_num = models.IntegerField(verbose_name='评论数',default=0)
up_num = models.IntegerField(verbose_name='点赞数',default=0)
down_num = models.IntegerField(verbose_name='点踩数',default=0)
# 外键表
site = models.ForeignKey(to='Site',on_delete=models.CASCADE,null=True)
category = models.ForeignKey(to='Category',on_delete=models.CASCADE,null=True)
tags = models.ManyToManyField(to='Tag',through='Article2Tag',through_fields=('article', 'tag'),
null=True)

class Category(models.Model):
"""文章分类表"""
name = models.CharField(verbose_name='分类名称',max_length=32)
site = models.ForeignKey(to='Site', on_delete=models.CASCADE, null=True)

class Tag(models.Model):
"""文章标签表"""
name = models.CharField(verbose_name='标签名称',max_length=32)
site = models.ForeignKey(to='Site', on_delete=models.CASCADE, null=True)

class Article2Tag(models.Model):
"""多对多外键表"""
article = models.ForeignKey(to='Article',on_delete=models.CASCADE,null=True)
tag = models.ForeignKey(to='Tag',on_delete=models.CASCADE,null=True)

class UpAndDown(models.Model):
"""文章点赞点踩表"""
user = models.ForeignKey(to='UserInfo',on_delete=models.CASCADE,null=True)
article = models.ForeignKey(to='Article',on_delete=models.CASCADE,null=True)
is_up = models.BooleanField(verbose_name='点赞点踩数')

class Comment(models.Model):
"""文章评论表"""
user = models.ForeignKey(to='UserInfo',on_delete=models.CASCADE,null=True)
article = models.ForeignKey(to='Article',on_delete=models.CASCADE,null=True)
content = models.TextField(verbose_name='评论内容')
comment_time = models.DateTimeField(auto_now_add=True,verbose_name='评论时间')
parent = models.ForeignKey(to='self',on_delete=models.CASCADE,null=True) # 自关联字段

url.py

from django.contrib import admin from django.urls import path from app import views

urlpatterns = [
path('admin/', admin.site.urls),
path('register/',views.register_func,name='register_view'),
# 用户登录功能
path('login/',views.login_func,name='login_view'),
# 图片验证码
path('get_code/',views.get_code_func)
]

views.py

from django.shortcuts import render,HttpResponse,redirect from app import myforms from app import models from django.http import JsonResponse from django.contrib import auth

def register_func(request):
# 前后端ajax交互，通常采用字段作为交互对象
back_dict = {'code':10000,'msg':''}
# 1.先产生一个空的form_obj
form_obj = myforms.RegisterForm()
if request.method == 'POST':
form_obj = myforms.RegisterForm(request.POST)
if form_obj.is_valid():
clean_data = form_obj.cleaned_data # 存储符合校验的数据
# 将confirm_password键值对移除
clean_data.pop('confirm_password')
# 获取用户上传的头像文件
avatar_obj = request.FILES.get('avatar') # 用户有可能没有上传
if avatar_obj:
clean_data['avatar'] = avatar_obj
# 创建用户数据
models.UserInfo.objects.create_user(**clean_data)
back_dict['msg'] = '注册成功'
back_dict['url'] = '/login/'
else:
back_dict['code'] = 10001
back_dict['msg'] = form_obj.errors
return JsonResponse(back_dict)
return render(request,'registerPage.html',locals())

def login_func(request):
back_dict = {'code': 10000, 'msg': ''}
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
code = request.POST.get('code')
if code.upper() == request.session.get('code').upper():
user_obj = auth.authenticate(request, username=username, password=password)
if user_obj:
# 保存用户登录状态
auth.login(request, user_obj) # 执行之后就可以使用request.user获取登录用户对象
back_dict['msg'] = '登录成功'
back_dict['url'] = '/home/'
else:
back_dict['code'] = 10001
back_dict['msg'] = '用户名或密码'
else:
back_dict['code'] = 10002
back_dict['msg'] = '验证码错误'
return JsonResponse(back_dict)
return render(request, 'loginPage.html')

from PIL import Image,ImageFont,ImageDraw
from io import BytesIO,StringIO
"""
BytesIO 在内存中临时存储读取的时候以bytes格式为准
StringIO 在内存中临时存储读取的时候以字符串格式为准
"""

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

def get_code_func(request):
# 产生图片对象
img_obj = Image.new('RGB',(350,35),get_random())
# 将图片交给画笔对象
draw_obj = ImageDraw.Draw(img_obj)
# 确定字体的样式
font_obj = ImageFont.truetype('static/font/111.ttf',35)
# 产生随机验证码
code = ''
for i in range(5):
random_upper = chr(random.randint(65,90))
random_lower = chr(random.randint(97,122))
random_int = str(random.randint(1,9))
# 三选一
temp_choice = random.choice([random_upper,random_lower,random_int])
# 写到图片上
draw_obj.text((i * 60 + 45,0),temp_choice,font=font_obj)
code += temp_choice
# 后端保存验证码
request.session['code'] = code
io_obj = BytesIO()
img_obj.save(io_obj,'png')
return HttpResponse(io_obj.getvalue())

loginPage.html

Title {% load static %}

用户登录

{% csrf_token %}

用户名

密码

验证码

{% load static %}

用户注册

{% csrf_token %} {% for form in form_obj %}

{% endfor %}

头像

            </div>
            <input type="button" id="subBtn" class="btn btn-primary btn-block" value="注册">
        </form>
    </div>
</div>

myforms.py

from django import forms from app import models

class RegisterForm(forms.Form):
"""用户注册form类"""
username = forms.CharField(min_length=3,max_length=8,label='用户名',
error_messages={
'min_length':'用户名最短三位',
'max_length':'用户名最长八位',
'required':'用户名不能为空',
},
widget=forms.widgets.TextInput(attrs={'class':'form-control'})
)
password = forms.CharField(min_length=3, max_length=8, label='密码',
error_messages={
'min_length': '密码最短三位',
'max_length': '密码最长八位',
'required': '密码不能为空',
},
widget=forms.widgets.PasswordInput(attrs={'class': 'form-control'})
)
confirm_password = forms.CharField(min_length=3, max_length=8, label='确认密码',
error_messages={
'min_length': '密码最短三位',
'max_length': '密码最长八位',
'required': '密码不能为空',
},
widget=forms.widgets.PasswordInput(attrs={'class': 'form-control'})
)
email = forms.EmailField(label='邮箱',
error_messages={
'required': '邮箱不能为空',
'invalid': '邮箱格式不正确'
},
widget=forms.widgets.EmailInput(attrs={'class': 'form-control'})
)

# 局部钩子校验用户名是否已经存在
def clean_username(self):
    username = self.cleaned_data.get('username')
    res = models.UserInfo.objects.filter(username=username)
    if res:
        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

重点代码的记忆

 # 局部钩子校验用户名是否已经存在
    def clean_username(self):
        username = self.cleaned_data.get('username')
        res = models.UserInfo.objects.filter(username=username)
        if res:
            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

def register_func(request):
    # 前后端ajax交互 通常采用字段作为交互对象
    back_dict = {'code': 10000, 'msg': ''}
    # 1.先产生一个空的form_obj
    form_obj = myforms.RegisterForm()
    if request.method == "POST":
        form_obj = myforms.RegisterForm(request.POST)  # username password confirm_password email csrfmiddlewaretoken
        if form_obj.is_valid():
            clean_data = form_obj.cleaned_data  # 存储符合校验的数据 {username password confirm_password email}
            # 将confirm_password键值对移除
            clean_data.pop('confirm_password')  # {username password  email}
            # 获取用户上传的头像文件
            avatar_obj = request.FILES.get('avatar')  # 用户有可能没有上传
            if avatar_obj:
                clean_data['avatar'] = avatar_obj  # {username password  email avatar }
            # 创建用户数据
            models.UserInfo.objects.create_user(**clean_data)  # 上述处理字典的目的就是为了创建数据省事
            back_dict['msg'] = '注册成功'
            back_dict['url'] = '/login/'
        else:
            back_dict['code'] = 10001
            back_dict['msg'] = form_obj.errors
        return JsonResponse(back_dict)
    return render(request, 'registerPage.html', locals())

登录注册关键代码比较

# 登录框的编写
<div class="container">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">用户登录</h2>
            {% csrf_token %}
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="text" id="name" class="form-control" name="username">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" class="form-control" name="password">
            </div>
            <div class="form-group">
                <label for="code">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" id="code" class="form-control" name="code">
                    </div>
                    <div class="col-md-6">
                        <img src="/get_code/" alt="" width="350" height="35" id="d1">
                    </div>
                </div>
            </div>
            <input type="button" class="btn btn-success btn-block" value="登录" id="loginBtn">
        </div>
    </div>

# 登录按钮发送ajax请求
        $('#loginBtn').click(function () {
            // 可以再次使用form标签序列化功能 也可以自己挨个获取
            $.ajax({
                url:'',
                type:'post',
                data:{'username':$('#name').val(),'password':$('#password').val(), 'code':$('#code').val(),'csrfmiddlewaretoken':'{{ csrf_token }}'},
                success:function (args) {
                    if (args.code === 10000){
                        window.location.href = args.url
                    }else {
                        swal(args.msg,'Here have a error')
                    }

                }
            })
        })

# 注册框的编写
<div class="container">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">用户注册</h2>
            <form id="form">
                {% csrf_token %}
                {% for form in form_obj %}
                    <div class="form-group">
                        <label for="{{ form.auto_id }}">{{ form.label }}</label>   <!--form.auto_id自动获取渲染的标签id值-->
                        {{ form }}
                        <span style="color: darkred" class="pull-right"></span>
                    </div>
                {% endfor %}
                <!--用户头像相关-->
                <div class="form-group">
                    <label for="myfile">头像
                        <img src="/static/img/default.jpg" alt="" width="120" id="myimg">
                    </label>
                    <input type="file" id="myfile" style="display: none">


                </div>
                <input type="button" id="subBtn" class="btn btn-primary btn-block" value="注册">
            </form>
        </div>
    </div>

# 1.用户头像的实时展示
    $('#myfile').change(function () {
        //1.产生一个文件阅读器
        let myFileReaderObj = new FileReader();
        //2.获取用户上传的头像文件
        let fileObj = this.files[0];
        // 3.将文件对象交给阅读器对象读取
        myFileReaderObj.readAsDataURL(fileObj);
        // 等待文件阅读器对象加载完毕之后再修改src
        myFileReaderObj.onload = function () {
            // 4.修改img标签的src属性展示图片
            $('#myimg').attr('src', myFileReaderObj.result)
        }
    })

#  2.给注册的按钮绑定点击事件
    $('#subBtn').click(function () {
        //1.先产生一个内置对象
        let myFormDataObj = new FormData();
        //2.添加普通数据
        $.each($('#form').serializeArray(),function (index,dataObj) {   // 对结果for循环 然后交给后面的函数处理
            myFormDataObj.append(dataObj.name,dataObj.value)
        })
        //3.添加文件数据
        myFormDataObj.append('avatar',$('#myfile')[0].files[0])
        //4.发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:myFormDataObj,
            contentType:false,
            processData: false,
            success:function (args) {
                if (args.code === 10000){
                    window.location.href = args.url
                }else {
                    let dataObj = args.msg;
                    // 针对性的渲染提示
                    $.each(dataObj,function (k,msgArray) {
                        //拼接标签的id值
                        let eleId = '#id_' + k
                        // 根据id查找标签 修改下面span标签的内容 并给父标签添加错误样式
                        $(eleId).next().text(msgArray[0]).parent().addClass('has-error')
                    })
                }
            }
        })
    })

# 3.给所有的input标签绑定获取焦点事件 移除错误样式
    $('input').focus(function () {
        $(this).next().text('').parent().removeClass('has-error')

    })

效果图

posted @ 2023-01-06 16:41 小王应该在学习！阅读(201) 评论(0) 编辑收藏举报

刷新页面返回顶部

zx0524

BBS登录与注册功能的总结