BBS登录与注册功能的总结

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 %}

{{ form.label }}
{{ form }}

{% 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')

    })

效果图