bbs项目

数据库表设计：models.py

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

# Create your models here.
'''
先写普通字段
之后在写外键字段
'''

class UserInfo(AbstractUser):
    phone = models.BigIntegerField(null=True,verbose_name="手机号")
    # 头像
    avatar = models.FileField(upload_to="avatar/",default='avatar/default.png')
    """
    给avatar字段传文件对象 该文件会自动存储到avatar文件夹 然后avatar字段只保存文件路径avatar/default.png
    """
    create_time = models.DateTimeField(auto_now_add=True)

    blog = models.OneToOneField(to='Blog',null=True)


class Blog(models.Model):
    site_name = models.CharField(max_length=32,verbose_name='站点名称')
    site_title = models.CharField(max_length=32,verbose_name='站点标题')
    # 简单模拟 认识样式内部原理的操作
    site_theme = models.CharField(max_length=64,verbose_name='站点样式')  # 存css/js的文件路径


class Category(models.Model):
    name = models.CharField(max_length=32,verbose_name='文章分类')
    blog = models.ForeignKey(to='Blog',null=True)


class Tag(models.Model):
    name = models.CharField(max_length=32,verbose_name='文章标签')
    blog = models.ForeignKey(to='Blog',null=True)
    tags = models.ManyToManyField(to='Article',
                                  through='Article2Tag',
                                  through_fields=('tag','article')
                                  )


class Article(models.Model):
    title = models.CharField(max_length=64,verbose_name='文章标题')
    desc = models.CharField(max_length=255,verbose_name='文章简介')
    # 文章内容有很多 一般情况下都是使用TextField
    content = models.TextField(verbose_name='文章内容')
    create_time = models.DateTimeField(auto_now_add=True)

    # 数据库字段设计优化
    up_num = models.BigIntegerField(default=0,verbose_name='点赞数')
    down_num = models.BigIntegerField(default=0,verbose_name='点踩数')
    comment_num = models.BigIntegerField(default=0,verbose_name='评论数')

    # 外键字段
    blog = models.ForeignKey(to='Blog',null=True)
    category = models.ForeignKey(to='Category',null=True)
    tags = models.ManyToManyField(to='Tag',
                                  through='Article2Tag',
                                  through_fields=('article','tag')
                                  )


class Article2Tag(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() # 传布尔值存0/1


class Comment(models.Model):
    user = models.ForeignKey(to='UserInfo')
    article = models.ForeignKey(to='Article')
    content = models.CharField(max_length=255,verbose_name="评论内容")
    create_time = models.DateTimeField(auto_now_add=True,verbose_name='评论时间')
    # 自关联
    parent = models.ForeignKey(to='self',null=True)  # 一定要加null=True,因为有些评论就是根评论

注册功能

myforms.py

from django import forms  # forms组件所需模块
from app01 import models


class MyRegForm(forms.Form):
    username = forms.CharField(label="用户名", max_length=8, min_length=3,
                               error_messages={
                                   'required': '用户名不能为空',
                                   'max_length': '用户名最多8位',
                                   'min_length': '用户名最少3位',
                               },
                               widget=forms.widgets.TextInput(attrs={'class': 'form-control'})
                               )

    password = forms.CharField(label="密码", max_length=8, min_length=3,
                               error_messages={
                                   'required': '密码不能为空',
                                   'max_length': '密码最多8位',
                                   'min_length': '密码最少3位',
                               },
                               widget=forms.widgets.PasswordInput(attrs={'class': 'form-control'})
                               )

    confirm_password = forms.CharField(label="确认密码", max_length=8, min_length=3,
                                       error_messages={
                                           'required': '确认密码不能为空',
                                           'max_length': '确认密码最多8位',
                                           'min_length': '确认密码最少3位',
                                       },
                                       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')
        # 数据库中校验
        is_exists = models.UserInfo.objects.filter(username=username)
        if is_exists:
            # 提示信息
            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

views.py

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


# Create your views here.
def register(request):
    form_obj = MyRegForm()
    if request.method == "POST":
        back_dic = {"code": 1000, "msg": ""}
        # 校验数据是否合法
        form_obj = MyRegForm(request.POST)
        if form_obj.is_valid():
            # print(form_obj.cleaned_data)     # {'username': 'alias', 'password': '123', 'confirm_password': '123', 'email': '123@qq.com'}
            clean_data = form_obj.cleaned_data  # 将校验通过的数据字典赋值给一个变量
            clean_data.pop("confirm_password")  # {'username': 'alias', 'password': '123', 'email': '123@qq.com'}
            # 用户头像
            file_obj = request.FILES.get("avatar")
            """针对用户头像一定要判断是否传值 不能直接添加到字典中"""
            if file_obj:
                clean_data['avatar'] = file_obj
            # 操作数据库保存数据
            models.UserInfo.objects.create_user(**clean_data)
            back_dic["url"] = "/login/"
        else:
            back_dic["code"] = 2000
            back_dic["msg"] = form_obj.errors
        return JsonResponse(back_dic)

    return render(request, "register.html", locals())

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap3 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- Bootstrap3 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- font-awesome.min.css图标库4.7版本 -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="text-center">注册</h1>
            <form id="myform">    <!--我们不用form表单提交数据 只是单纯用一下form标签而已-->
                {% for form in form_obj %}
                    <div class="from-group">
                        <!--form.auto_id获取forms渲染的input框的id-->
                        <label for="{{ form.auto_id }}">{{ form.label }}</label>
                        {{ form }}
                        <span style="color: red" class="pull-right"></span>
                    </div>
                {% endfor %}
                <div class="form-group" style="margin-top: 10px">
                    <label for="myfile">头像
                        {% load static %}
                        <img src="{% static "img/default.png" %}" alt="" id="myimg" width="100px" style="margin-left: 10px">
                    </label>
                    <input type="file" id="myfile" name="avatar" style="display: none">
                </div>

                <input type="button" class="btn btn-primary pull-right" value="注册" id="id_commit">
            </form>
        </div>
    </div>
</div>
<script src="{% static "js/mysteup.js" %}/"></script>
<script>
    // 选择头像实时显示
    $("#myfile").change(function () {
        // 文件阅读器对象
        // 1、先生成一个文件阅读器对象
        let myFileReaderObj = new FileReader();
        // 2、获取用户上传的头像文件
        let fileObj = $(this)[0].files[0];
        // 3、将文件对象交给阅读器对象读取
        myFileReaderObj.readAsDataURL(fileObj);     // 这步操作是异步
        // 4、利用文件阅读器将文件展示到前端页面   修改img的src属性
        // 等待myFileReaderObj文件阅读器加载完毕之后再执行
        myFileReaderObj.onload = function(){
            $("#myimg").attr("src",myFileReaderObj.result)
        }
    });
    $("#id_commit").click(function () {
        // 发送ajax请求  我们发送的数据中即包含普通键值也包含文件
        let formDataObj = new FormData();
        // 添加普通键值对
        // console.log($("#myform").serializeArray())  // [{},{},{},...] 只包含普通键值对
        $.each($("#myform").serializeArray(),function (index,obj) {
            // console.log(index,obj)   // obj = {}
            formDataObj.append(obj.name,obj.value)
        });
        // 添加文件
        formDataObj.append('avatar',$("#myfile")[0].files[0]);
        // 发送ajax请求
        $.ajax({
            url: '',
            type: 'post',
            dataType: 'json',
            data: formDataObj,

            contentType: false,
            processData: false,
            success: function (args) {
                if (args.code == 1000){
                    // 跳转到登录页面
                    window.location.href = args.url
                }else{
                    // 如何将对应的错误信息提示展示到对应的input框下面,因为用的ajax所以无法像之前在span标签里面写form.errors.0
                    // forms组件渲染的标签的id值都是 id_字段名
                    $.each(args.msg,function (index,obj) {
                        {#console.log(index,obj)  //  username        ["用户名不能为空"]#}
                        let targetId = '#id_' + index;      // input标签
                        {#$(targetId).next().text(obj[0]).parent().addClass('has-error')#}
                        $(targetId).next().text(obj[0]).prev().css("border","solid red")
                    })
                }
            }
        })
    })
    // 给所有的input框绑定获取焦点事件
    $('input').focus(function () {
        // 将input下面的span标签和input外面的div标签修改内容及属性
        $(this).next().text('').prev().removeAttr("style","");
    })
</script>
</body>
</html>

登录功能

views.py

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


# Create your views here.
def register(request):
    form_obj = MyRegForm()
    if request.method == "POST":
        back_dic = {"code": 1000, "msg": ""}
        # 校验数据是否合法
        form_obj = MyRegForm(request.POST)
        if form_obj.is_valid():
            # print(form_obj.cleaned_data)     # {'username': 'alias', 'password': '123', 'confirm_password': '123', 'email': '123@qq.com'}
            clean_data = form_obj.cleaned_data  # 将校验通过的数据字典赋值给一个变量
            clean_data.pop("confirm_password")  # {'username': 'alias', 'password': '123', 'email': '123@qq.com'}
            # 用户头像
            file_obj = request.FILES.get("avatar")
            """针对用户头像一定要判断是否传值 不能直接添加到字典中"""
            if file_obj:
                clean_data['avatar'] = file_obj
            # 操作数据库保存数据
            models.UserInfo.objects.create_user(**clean_data)
            back_dic["url"] = "/login/"
        else:
            back_dic["code"] = 2000
            back_dic["msg"] = form_obj.errors
        return JsonResponse(back_dic)

    return render(request, "register.html", locals())


def login(request):
    return render(request, 'login.html')

"""
图片相关的模块
    # pip3 install pillow
"""
from PIL import Image,ImageDraw,ImageFont,ImageFilter
"""
Image:生成图片
ImageDraw:能够在图片上乱涂乱画
ImageFont:控制字体样式
ImageFilter:控制图片模糊度
"""
from io import BytesIO,StringIO
"""
内存管理器模块
BytesIO：临时的帮你存储数据 返回的时候数据就是二进制格式
StringIO：临时的帮你存储数据 返回的时候数据就是字符串格式
"""

import random

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

def get_code(request):
    # 推导步骤1：直接获取后端现成的图片二进制数据发送给前端
    # with open(r"static/img/111.jpg", "rb") as f:
    #     data = f.read()
    # return HttpResponse(data)
    #
    # 推导步骤2：利用pillow模块动态产生图片（文件存储繁琐IO操作效率低）
    # img_obj = Image.new('RGB', (430, 35), "red")   # 第二个参数图片尺寸(要和前端划定的尺寸一致),第三个参数还可以放三基色参数
    # img_obj = Image.new('RGB', (430, 35), get_random())
    # 先将图片对象保存起来
    # with open("xxx.png",'wb') as f:
    #     img_obj.save(f,"png")   # 文件句柄，图片格式
    # # 再将图片对象读取出来
    # with open('xxx.png','rb') as f:
    #     data = f.read()
    # return HttpResponse(data)

    # 推导步骤3：借助于内存管理模块
    # img_obj = Image.new('RGB', (430, 35), get_random())
    # io_obj = BytesIO()  # 生成一个内存管理器对象，可以看成是文件句柄
    # img_obj.save(io_obj,'png')     # 要指定图片的格式
    # return HttpResponse(io_obj.getvalue())    # io_obj.getvalue()读取出文件，返回的是二进制格式

    # 最终步骤：绘制图片验证码
    img_obj = Image.new('RGB', (430, 35), get_random())
    img_draw = ImageDraw.Draw(img_obj)   # 产生一个画笔对象
    img_font = ImageFont.truetype("static/font/222.TTF",30)    # 字体样式,以及字体大小

    # 随机验证码  五位数的随机验证码 数字 小写字母 大写字母
    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(0,9))
        # 从上面三个里面随机选一个
        tmp = random.choice([random_upper,random_lower,random_int])
        # 将产生的随机字符串写入图片
        """
        为什么一个个写而不是生成好了之后再写
        因为一个个写能够控制每个字体的间隙 而生成好之后再写的话
        间隙就没法控制了
        """
        img_draw.text((i*45+100,-3),tmp,get_random(),img_font)
        # 拼接随机字符串
        code += tmp
    # print(code)
    # 随机验证码在登录的视图函数中需要用到 要比对，所以要找地方存起来且其他视图函数也能拿到（可以放在auth_session表中）
    request.session['code'] = code
    io_obj = BytesIO()
    # img_obj = img_obj.filter(ImageFilter.GaussianBlur)
    img_obj.save(io_obj,"png")

    return HttpResponse(io_obj.getvalue())

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap3 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- Bootstrap3 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- font-awesome.min.css图标库4.7版本 -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    {% load static %}

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="text-center">登录</h1>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" name="username" id="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" name="password" id="password" class="form-control">
            </div>
            <div class="form-group">
                <label for="">验证码</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">
                        <!--这个页面只要一加载出来，就会朝这个/get_code/路径发get请求-->
                        <img src="/get_code/" alt="" width="430px" height="35px" id="id_img">
                    </div>
                </div>
            </div>
            <input type="button" class="btn btn-success btn-block" value="登陆">
        </div>
    </div>
</div>
<script>
    $("#id_img").click(function () {
        // 1 先获取标签之前的src
        let oldVal = $(this).attr('src');
        $(this).attr('src',oldVal += '?')
    })
</script>
</body>
</html>