BBS总结 --- django设计

1.调用模块使用

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

from django import forms

from django.shortcuts import render, HttpResponse, redirect, reverse
from django.http import JsonResponse
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO, StringIO
from django.contrib import auth
from django.contrib.auth.decorators import login_required
from django.db.models.functions import TruncMonth
from django.db.models import Count
from django.db.models import F
from django.utils.safestring import mark_safe
import json
import random

from django.db import transaction
from bs4 import BeautifulSoup
import os
from BBS import settings

2.BBS中urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
from django.views.static import serve
from BBS import settings
from django.conf import settings
from django.conf.urls import include

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    
    # 注册
    url(r'^register/', views.register, name='register'),
    # 登录
    url(r'^login/', views.login,name='login'),
    # 验证码
    url(r'^get_code/', views.get_code, name='get_code'),
    # 退出
    url(r'^logout/',views.logout,name='logout'),
    # 主页
    url(r'^home/', views.home, name='home'),
    # 修改密码
    url(r'set_password/',views.set_password,name='ser_password'),
    # 点赞点踩
    url(r'^up_down/', views.updown),
    # 评论业务逻辑
    url(r'^comment/',views.comment),
    # 后台管理页面
    url(r'^backend/',views.backend,name='backend'),
    # 新增文章
    url(r'^add_artilce',views.add_article,name='add_article'),
    # 上传图片
    url(r'^upload_img/',views.upload_img,name='upload_img'),
    # 更改头像
    url(r'^(?P<username>.*)/set_avatar/',views.set_avatar,name='set_avatar'),

    # 手动开设后端资源   将media中的资源全部开放给外界
    url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),

    # 个人站点
    url(r'^(?P<username>\w+)/$', views.site, name='username'),
    # 404页面
    url(r'^error/',views.site,name='error'),
    # 侧边栏功能
    url(r'^(?P<username>\w+)/(?P<condition>category|tag|archive)/(?P<param>.*)/', views.site),

    # 文章页面
    url(r'^(?P<username>\w+)/article/(?P<param>.*)/', views.article_detail, name='article_detail'),
]

3.django中配置

1.mysql数据库配置

settings中

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'bbs1',
        'HOST':'127.0.0.1',
        'POST':3306,
        'USER':'root',
        'PASSWORD':'123',
        'CHARSET':'utf8'
    }
}

init中

import pymysql
pymysql.install_as_MySQLdb()

2.app注册

INSTALLED_APPS = [
    'APP01.apps.App01Config',
]

3.template配置

TEMPLATES = [
    {'DIRS': [os.path.join(BASE_DIR, 'templates')]}

4.时间报错

USE_TZ = False

5.更改路由前缀

STATIC_URL = '/static/'

6.静态文件路径匹配

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

7.使用auth联合创建表

AUTH_USER_MODEL = 'APP01.Userinfo'

8.auth模块的登录装饰器

LOGIN_URL = '/login/'

9.开设后端资源

MEDIA_ROOT = os.path.join(BASE_DIR,'media')   # 开设后端资源

url(r'^media/(?P<path>.*)',serve,{'document_root':settings.MEDIA_ROOT}),

10.test.py文件使用配置

import os

if __name__ == "__main__":
    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "BBS1.settings")
    import django
    django.setup()

4.新学方法使用

1.数据库优化

将点赞点踩的数量随着数据的录入依次递加，不用之后再进行统计

2.子评论

自己跟自己进行一对多关联

parent = models.ForeignKey(to='self',null=True)

3.多对多创建第三章表

from django.db import models
from django.contrib.auth.models import AbstractUser
class Tag2Article(models.Model):
    article = models.ForeignKey(to='Article')
    tag = models.ForeignKey(to='Tag')

注意点：第三张表继承的是models，字段是进行一对多关联的

4.随机验证码

# 产生随机字符
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', (360, 35), get_random())  # 生成一张图片
    img_draw = ImageDraw.Draw(img_obj)  # 让这张图片可以进行编辑
    img_font = ImageFont.truetype('static/font/Wesley.ttf', 30)  # 生成字体
    print(get_random(), '我是get_random')
    # 随机验证码 大小写英文加数字，四位，每一位都可以是大写字母或是小写字母
    code = ''
    for i in range(4):
        upper_str = chr(random.randint(65, 90))
        lower_str = chr(random.randint(97, 122))
        random_int = str(random.randint(0, 9))
        tmp = random.choice([upper_str, lower_str, random_int])
        img_draw.text((i*60+60,0), tmp, get_random(), img_font)
        code += tmp
    print(code)
    # 将生成的随机字符串放在session中，方便之后调用
    request.session['code'] = code
    io_obj = BytesIO()
    img_obj.save(io_obj, 'png')
    return HttpResponse(io_obj.getvalue())

5.在form表单中

利用form标签内部的一个自动化序列产生键值对的方式来添加键值对
$('#myform').serializeArray()   # 可以拿到form表单中的所有键值对,不能拿到文件

$.each($('#myform').serializeArray(),function (index,obj) {
            MyFormData.append(obj.name,obj.value) });
    
# index 索引序号       obj  对象{'':''}
# 将form表单中的键值对循环添加进MyFormData中
# each相当于for循环，对键值对有效

{{forms.auto_id}}   # id_username

6.输入框错误

{{forms.errors}}    # 错误信息提示
class:"has_error"   # 有错的时候文本框变红

7.attr与val与text

8.更换头像

<div class="form-group">
     <p>上传头像</p>
     <label for="id_file">
           <img src="/static/img/default.jpg" alt="" width=150px id="img">
      </label>
      <input type="file" id="id_file" style="display: none" name="avatar">
</div>
              
                
$('#id_file').change(function () {
        // 使用内置对象对文件进行读取
        let MyFileReader = new FileReader();
        // 获取用户上传的文件对象
        let fileObj = $(this)[0].files[0];
        // 让文件阅读器读取文件
        MyFileReader.readAsDataURL(fileObj);
        // 将读取之后的内容换到img标签的src属性中
        MyFileReader.onload = function () {
            $('#img').attr('src',MyFileReader.result)
        }
    });

9.登录的时候错误提示

$.each(data.msg,function (index,obj) {
     let targetId = '#id_'+index;
     $(targetId).next().text(obj[0]).parent().addClass('has-error')

10.验证码实时刷新

<div>
     <p><label for="id_yanzheng">验证码</label></p>
     <div class="col-md-6"><input type="text" class="form-group form-control" id="id_yanzheng"></div>
     <div class="col-md-6 pull-right"><img src="/get_image/" alt="" width="360" height="35" id="id_img"></div>
</div>

let oldPath = $('#id_img').attr('src');
    $('#id_img').attr('src',oldPath+='?')

11.inclusion_tag的使用

1.创建一个新的文件夹templatetags，新建一个py文件

2.将需要产生数据的代码写在py文件中

from django.template import Library

register = Library()
@register.inclusion_tag('pag/left_page.html')    # 指向需要接收数据的html文件，将数据渲染
def my_menu(username):
    return locals()

3.调用的时候，在使用的地方写入下边代码

{% load mytag %}         # 文件名

{% my_menu username %}   # username是需要传入的参数

12.展示用户头像

1.先将后端的文件访问打开，进行配置

<div class="media-left media-middle">
     <a href="/{{ article.blog.userinfo.username }}/">
     <img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}" alt="..." width="60px">
     </a>
</div>

13.点赞点踩

注意点：将数据在前端也进行渲染

是那个用户点击了那篇文章，是点赞还是点踩

<!--点赞点踩开始-->
    <div class="clearfix">
     <!--点踩开始-->
        <div class="buryit action">
            <span class="burynum" id="bury_count">0</span>
        </div>
        <!--点踩结束-->
        <!--点赞开始-->
        <div class="diggit action">
            <span class="diggnum" id="digg_count">0</span>
        </div>
        <!--点赞结束-->
        <div class="clear"></div>
        <div class="diggword" id="digg_tips">
            <span class="info pull-right" style="color: red"></span>
        </div>
    </div>
    
    

// 点赞点踩
    $('.action').click(function () {
        let is_up = $(this).hasClass('diggit');    # 绑定一个，点击的时候的为true，其他为false
        let $target = $(this);
        $.ajax({
            url:'/{{ user_obj.username }}/article/{{ article_obj.pk }}/',   // 放需要连接的路径
            type:'post',
            data:{'is_up':is_up},   // 放需要发送到前端的数据
            success:function (data) {
                if(data.code == 1000){
                    $('.info').text(data.msg);
                    let $span = $target.children();
                    let oldNum = $span.text();
                    $span.text(Number(oldNum)+1);
                }else {
                    if(data.code==2000){
                        $('.info').text(data.msg);
                    let $span = $target.children();
                    let oldNum = $span.text();
                    $span.text(Number(oldNum)+1);
                    }else {
                        $('.info').text(data.msg);
                    }
                }
            }
        });
    });

14.评论

注意点：包括子评论

<!--评论内容显示开始-->
    <div>
        <p><h4>评论</h4></p>
        <hr>
    <ul class="list-group">
        {% for comment in comment_obj %}
        <p style="color: red;">#{{ forloop.counter }}楼&nbsp;&nbsp;<a href="/{{ request.user.username }}/">{{ comment.user.username }}</a>评论了你
            <a class="pull-right reply" username="{{ request.user.username }}" comment_id="{{ comment.pk }}">回复</a></p>
         <li class="">{{ comment.comment_text }}</li>
            <hr>
    {% endfor %}
    </ul>


    </div>
    <!--评论内容显示结束-->



    <!--评论内容显示开始-->
    <div>
        <hr>
        {% if request.user.is_authenticated %}
            <div>
                <p>发表评论</p>
                <p>
                    昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                              value="{{ request.user.username }}">
                </p>
                <p>评论内容:</p>
                <p>
                    <textarea name="comment" id="id_comment" cols="60" rows="10"></textarea>
                </p>
                <button class="btn btn-primary" id="id_submit">提交评论</button>
            </div>
    <!--评论结束-->

            {% else %}
                <p><a href="{% url 'login' %}">登录</a>
                    <a href="{% url 'register' %}">注册</a>
                </p>
        {% endif %}
        <br>
        <br>
    </div>
    <!--评论内容显示结束-->

// 评论表
    // 提前定义一个全局变量parentId
    let parentId = null;
    $('#id_submit').click(function () {
        $.ajax({
            url:'/comment/',
            type:'post',
            data:{
                article_id:{{ article_obj.pk }},
                comment:$('#id_comment').val(),
                parent_id:parentId
            },
            success:function (data) {
                if(data.code == 1000){
                    let userName = '{{ request.user.username}}';
                    let conntent = $('#id_comment').val();
                    let tmp = `
                    <li class="list-group-item">
                        <span><span class="glyphicon glyphicon-comment"></span><a href="/${ userName}/">${userName}:</a></span>
                        <p>
                            ${conntent}
                        </p>
                    </li>
                    `;
                    // 将生成好的内容添加到ul标签内部
                    $('.list-group').append(tmp);
                    // 将评论框清空
                    $('#id_comment').val('');
                    // 将全部的parent变成空
                    parentId = null;
                }
            }
        });
    });

    // 子评论，
        $('.reply').click(function () {
            // 哪个用户回复了哪一篇文章中的那一条评论
            let userName = $(this).attr('username');
            // 获取想要评论的呢条评论内容的主键值
            parentId = $(this).attr('comment_id');
            // 回复按钮做的三件事情
            let headerMsg = '@' + userName +'\n';
            $('#id_comment').val(headerMsg);
            $('#id_comment').focus();
        })

5.BBS用到的知识点

1.第三张表的创建

2.表之前的关系

3.forms组件

4.auth模块

5.点击事件 click

6.更改事件 change

7.jquery选择器

8.attr,val,text

9.随机验证码

10.小白三板斧

11.ajax

12.form表单

13.form表单循环添加功能

14.上传图片更换

15.后台文件开放

16.有名分组与无名分组

17.反向解析

18.模板语法

19.正则表达式

20.数据库优化原理