BBS项目复习总结

目录

• BBS之用户注册
• BBS之用户登录
• BBS之用户首页导航条样式及修改密码与注销登录
• BBS之后台数据绑定
• BBS之首页样式搭建
• BBS之个人站点页面搭建
• BBS之个人站点侧边栏展示
• BBS之侧边栏筛选功能
• BBS之侧边栏封装
• BBS之点赞点踩功能
• BBS之文章根评论
• BBS之子评论
• BBS之后台管理页面
• BBS之后台文章添加

BBS之用户注册

思路梳理：
1.新建一个django项目，名称可以和bbs相关，准备好数据库、静态模板资源及配置好模板、数据库、用户表重命名配置。
2.先准备bbs项目8张表，并理清表之前关系，为后续项目准备。
3.使用form组件来验证注册用户信息，主要是利用钩子函数针对用户名是否存在及密码是否一致做校验。
4.添加路由，前端通过form表单序列化获取用户注册信息，利用ajax封装好数据和文件对象传送给后端，并获取后端传回的值在前端页面做展示。后端通过前端post请求发送的数据做进一步校验，数据没问题写入数据库并写到自定义字典，有问题通过字典的方式给前端返回数据。

难点：前端

注册之前端思路具体分析

1.通过form表单获取后端传送过来的form组件对象，循环打印form组件对象。

2.用户头像单独做处理，通过label标签包裹img对象，img标签都要有id值，src指定一个默认图片位置(/static/img/default.jpg)，input标签类型为file且需要隐藏起来（id值执行label标签的for值），最后再单独再form标签结尾设置一个注册按钮，设置一个id值用于ajax向后端发送数据使用。

3.js相关操作之头像实时展示
1）先产生一个文件阅读器对象
2）获取用户上传的头像文件
3）将文件对象交给阅读器对象读取
4）等待文件阅读器对象加载完毕之后在修改src
5）修改img标签的src属性展示图片

4.js相关操作之注册按钮绑定点击事件
1）先产生一个内置对象
2）添加普通数据（通过each方法获取from表单格式化数据）
3）添加文件数据
4）发送ajax请求
1>data指向内置对象
2>由于发送文件和普通数据，需要额外对两个参数contentType和processData设置为false。
3>判断后端发送过来的值，如果是10000则通过当前网页打开另一个窗口，如果失败需要做针对性的渲染错误提示。
4>先利用变量名接收错误信息，利用each获取接收变量名并打印索引和数据对象，针对索引拼接标签id值，根据id值查找标签，修改下面的span标签内容，并给父标签添加错误样式
5>给所有input标签绑定获取焦点事件，并移除错误样式

注册之后端思路具体分析

1.针对ajax交互，设置一个字典，里面包含code和msg两个键值对。后期用于发送给前端使用
2.产生一个空的from_obj对象
3.判断请求方法是否是post，如果是post则给form_obj对象传送request.POST。
4.判断form_obj对象接收的所有值是否正确，正确使用一个新变量接收form_obj对象的cleaned_data所有数据。
5.移除confirm_password键值对
6.获取用户上传头像文件，并判断头像文件是否有值，没有值忽略操作（头像文件是request.FILES）。
7.创建用户数据（create_user方法）
8.利用JsonResponse返回一个字典给前端

BBS之用户登录

思路梳理：
1.新建两个路由，分别是用户登录和图片验证码。
2.后端先新建登录函数，在创建获取三位随机数函数及和图片验证码函数，其中图片验证码要调用三位随机数函数，用户登录前端页面要调用图片验证码函数。
3.用户登录前端页面需要配置用户名、密码和验证码三个input标签，最后通过点击提交来和后端交互。

难点：后端随机验证码逻辑

用户登录前端

1.设置三个div组，每个div包含label标签和input标签，input标签的id值对应label标签的for名称，分别是用户名、密码和验证码，其中验证码又细分2个div，分别是input和img标签，img标签的src指向随机验证码url，id需要设置值，方便用于验证码动态刷新。
2.最后设置一个input登录按钮，并设置一个id值用于后续数据提交使用

js操作之验证动态码刷新
1.针对img标签的id值，获取该img的标签属性src并赋值给一个变量。
2.拷贝变量值，在加上变量名和'?'

js操作之登录按钮发送ajax请求
1.针对登录按钮标签id值设置点击事件，在点击事件里操作发送ajax请求。
2.ajax的data需要手动录入数据，数据值来源于input标签的id值，最后要补上csrf_token标签。
3.判断后端发送过来的数据值，如果是10000，则从当前页面打开一个新窗口跳转到另一个url，否则就通过alert弹出框弹出异常信息。

用户登录后端

登录函数：
1.设置一个和ajax交互的字典，设置两个code和msg字段。
2.判断请求方法是否是post，是的话获取用户名、密码和验证码三个值。
3.判断动态码和后端存储的动态码是否一致,比对以全部大写为准。
4.验证码一致则继续判断用户名和密码是否正确（通过auth方法实现）。
5.如果一致则通过auth方法保存用户登录并对字典添加对应值，如果不一致则在字典添加错误代码及描述。
6.如果验证码不一致在字典添加错误代码及描述
7.最后通过JsonResponse返回字典

三位随机数函数：
需要导入random模块，返回三个randint的0-0255的随机数

动态验证码刷新函数：
依赖PIL模块的Image,ImageFont,ImageDraw及IO模块的BytesIO
1.先产生图片对象
2.将图片对象交给画笔对象
3.确定字体样式（ttf文件）
4.产生随机验证码
1)先设置大写、小写和数字的三个随机数变量
2）在设置一个三选一变量接收上述的随机数变量
3）写到图片上，包含图片x和y轴大写，三选一变量及字体大写。
4）保存code代码变量
5.通过session保存code代码变量，用于后续比对
6.创建一个io对象，利用图片对象保存io对象
7.HttpResponse对象返回io对象的值

BBS之用户首页导航条样式及修改密码与注销登录

思路：
1.先到bootstrap首页的组件里导航条选择一个导航栏，修改里面相关数据值。
2.导航栏里面加一些校验，用户没有登录会显示注册和登录选项，如果登录会显示登录用户名及后台管理功能，后台管理包括修改密码、修改头像、后台管理及注销登录。
3.密码修改的弹框使用模态框来实现。

修改密码之前端

1.创建4对div，每队div里面包含label和input标签，input标签的id值对应label标签for值，分别是用户名、原密码、新密码和确认密码，其中用户名只做展示使用，因此加上默认值及禁止修改。
2.修改标签也要加上id值，用于后续点击事件使用
3.通过修改点击事件创建ajax，url指向修改密码路由，data的数据需要通过input标签的id值获取，加上csrf_token。
4.发送给后端并获取后端的数据值，如果是10000则从当前页面打开一个新的浏览器窗口，否则就在当前页面显示错误信息。

修改密码之后端

1.设置一个和ajax交互的字典，设置两个code和msg字段。
2.判断请求方法是否是post，是的话获取原密码、新密码和确认密码三个值。
3.通过request方法校验原密码是否正确
4.在校验两次密码是否一致且不能为空，是的话则通过request方法修改密码并保存，同时并记录到字典里。
5.否则两次密码不一致或者原密码错误，把相关信息添加到字典里。
6.最后返回JsonResponse的字典给前端。

注销登录后端
1.通过auth方法退出当前登录用户
2.跳转到登录页面

BBS之后台数据绑定

思路：
1.需要到admin.py文件里注册models里面定义的表名。
2.创建一个超级管理用户用于登录admin管理后台
3.登录admin管理后台，创建文章，通过文章页面创建个人站点和文章分类，最后完成文章创建
4.通过用户表完成用户站点绑定。
5.创建标签表创建标签，用于后续标签和文章绑定。
6.文章绑定标签

BBS之首页样式搭建

思路：
1.添加一个容器，分成三份，分别是左右两边侧边栏，中间是文章页面。
2.上述都是去bootstrap里面拷贝代码实现，其中侧边栏用面板，文章页面是用媒体对象的默认样式实现

BBS之个人站点页面搭建

思路：
1.添加一个动态转换器路由，匹配username。
2.后端设置一个个人站点对象，对站点对象做判断，如果不存在返回一个404页面。设置一个个人站点下的所有文章对象，并把对象及变量传递到前端。
3.由于个人站点前端页面要从home页面继承，因此需要先对home页面做模板，增加一些css、title、content及js设置，方便个人站点前端页面继承。
4.前端个人站点页面继承home页面，同时对content做一些变化，容器划分2份，分别是2和10组成。2这边主要有侧边栏，内容为文章分类、文章标签和日期归档组成。10这边主要是文章信息组成，文章底部由文章创建时间、文章作者、文章点赞、文章点踩及评论数量组成。
5.404错误页面可以参考博客园的404页面来设置，直接拷贝原网页内容即可，修改跳转地址为home URL地址。

BBS之个人站点侧边栏展示

后端：

1.查询个人站点下所有的分类名称及每个分类下的文章数，通过orm来实现，
 category_queryset = models.Category.objects.filter(site=site_obj).annotate(article_num=Count('article__pk')).values('name','article_num')
2.查询个人站点下所有的标签名称及每个名称下的文章数
tag_queryset = models.Tag.objects.filter(site=site_obj).annotate(article_num=Count('article__pk')).values('name','article_num')
3.年月分组统计文章个数
from django.db.models.functions import TruncMonth
date_queryset=models.Article.objects.filter(site=site_obj).annotate(month=TruncMonth('create_time')).values('month').annotate(article_num=Count('pk')).values('month','article_num')

前端：

把上面的orm查询语句的变量名传递给前端，前端基于for循环里面的query列表得到对象，添加对象的名称及文章数量

ps：最后注意修改settings里面的两个值，否则无法正常前端页面展示年月分组统计文章个数
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False

BBS之侧边栏筛选功能

思路：
1.路由层面三个路由合并成一个路由，通过正则实现。
2.后端还是使用个人站点的函数，额外添加了**kwargs，针对可变长关键字参数先获取条件和参数两个变量，通过条件判断是否分类或者是标签或者是年月，文章列表在进一步做过滤，分别针对上述条件实现反向查询。
3.前端增加一个a标签，跳转直接指向到/站点名称/条件/参数ID，其它不用额外操作

BBS之侧边栏封装

思路：
1.路由层添加一个文章详情页，使用两个转换器，/站点名称/article/文章id。
2.在应用下创建templatetags目录，在新创建的目录下再创建一个py文件，从django导入template，register=template.Library(),@register.inclusion_tag('leftmenu.html',name='mymenu')，并创建一个自定义函数，接收username，把个人站点下查询分类、标签及年月分组的文章个数三个orm查询剪切到这里。
3.在template新建一个前端页面，就是leftmenu.html，该页面内容就是完全从个人站点前端页面容器2份里剪切过来的。
4.文章详情和个人站点页面的容器2份直接导入templatetags目录下新建的py文件名，并手动传username。

BBS之点赞点踩功能

思路梳理：
1.参考博客园的点赞点踩，拷贝相关html代码及CSS代码。
2.添加一个点赞点踩的路由，后端对前端发送过来的点赞点踩做一些逻辑判断，验证没问题才会在数据库里添加点赞点踩相关功能。
3.前端通过给两个div的点赞和点踩设置一个id值来判断是否点赞还是点踩，然后通过ajax把文章id及点赞点踩值发送给后端。

重点：后端

点赞点踩之前端

1.拷贝博客园相关的html代码及css和点赞点踩图标到本地。
2.对点赞和点赞设置同一个id值，给点赞点赞图标绑定点击事件。
3.设置两个变量值，一个是点赞点踩标签，一个是点赞点踩布尔值。
4.通过ajax发送数据给后端，发送主要包含文章主键及点赞点踩布尔值。
5.通过后端返回的值使用一个args变量名接收，如果代码为10000，变更之前点赞点踩标签的儿子标签，使用Number来加1，否则就是直接展示一个错误的信息

点赞点踩之后端

1.使用一个字典来用于和ajax交互，默认设置code和msg两个字段值。
2.判断用户请求的方法是否是post，是的话先验证用户是否登录，用户登录使用变量名接收文章主键、点赞点踩布尔值，并通过文章主键来获取文章对象。
3.判断文章对象的跨表查询得到用户对象和登录用户对象做对比，检查当前文章是否当前用户自己的，如果不是在校验当前文章是否已经被当前用户点过。
4.以上都不是在对点赞点踩布尔值做jason反序列化，更新文章表的点赞或点踩数量以及更新点赞点踩表。
5.针对上述的判断做反向补充，使用自定义的字典添加不同的代码及错误信息

BBS之文章根评论

思路梳理：
1.添加一个评论路由，在后端增加一个评论函数，通过前端发送过来的数据值依次获取并增加到文章和评论两个表里。
2.前端使用之前的文章详情代码，主要有文章评论楼渲染及文章评论样式以及给提交评论的按钮绑定点击事件，最后通过ajax发送数据给评论函数。

难点：前端

文章根评论之前端分析

1.在点赞点踩样式下面创建文章评论楼渲染，主要是bootstrap里面的列表组里拷贝个情景类，里面包含当前文章的评论楼，评论时间、评论用户和评论内容。
2.在文章评论楼渲染下面在创建文章评论样式，先判断用户是否登录，如果没有登录展示2个a标签，分别是注册和登录，如果登录展示发表评论按钮，评论内容框（textarea）及提交评论按钮。
3.给提交评论的按钮绑定点击事件，先获取用户内容和当前用户名，发送ajax，url指向之前创建的评论路由，数据包含文章主键和评论内容。
4.最后发送给后端，如果成功则先清空评论框内容、动态创建标签并添加到评论楼中，最后查找ul标签然后添加上述的动态标签。
ps：动态标签内容主要包括当前用户和评论内容

文章评论之后端分析

1.先定义个和前端ajax交互的自定义字典。
2.判断请求方式是否是post。
3.请求是post的话则获取文章主键、文章评论内容，调用orm给文章表更新评论数量及评论表增加哪个用户给哪篇文章增加了什么评论内容，最后返回一个序列化的自定义字典

BBS之子评论

思路分析：基本逻辑全部在前端，后端只增加了parent_id相关，在给评论表增加内容的时候额外添加parent_id，前端代码还是之前的文章详情里。

难点：前端

子评论之前端分析

1.在文章评论楼的渲染里增加一个P标签，主要是回复，同时自定义个username 和comment_id 两个自定义id，用于后面提交事件的调用。
2.提前创建一个全局变量，用于存储评论主键值。
3.获取用户评论的内容里增加一个老评论变量名，值对应的生意评论内容。
4.对评论主键值做判断，如果值有内容，即发送的是子评论，则需要处理掉前缀内容。
5.ajax成功获取到后端发来的内容里（code=10000）需要额外增加情况评论框里面的内容，事件代码结尾最后还要添加一个清空全局变量。
6.给回复按钮绑定点击事件
1）先获取回复按钮所在的评论用户名
2）获取回复按钮所在的评论主键值，修改全局变量

BBS之后台管理页面

思路分析：
1.添加一个后台管理接口路由
2.后端配置后台管理函数，主要配置个人站点对象及个人站点下对应的所有文章对象，并把相关变量传递给前端页面。
3.前端需要配置两个页面，后台管理模板页面和后台管理页面，后台管理模板页面也分配导航条，修改密码模特框，这些从之前home站点前端页面拷贝，设置一个容器，分成2份和10份，2份包含博客后台（添加文章、添加分类、添加标签及更多操作）、私密后台及友情链接。10份包括文章、随便、日记、配置等。样式都是从bootstrap的javascript插件里collapse和Markup拷贝。
4.后台管理页面是从后台管理模板页面继承，内容区域（容器10份）添加一个列表，包含标题、时间、评论数、点赞数、点踩数、编辑和删除操作。

BBS之后台文章添加

思路分析：
1.添加一个后台管理的文章添加路由。
2.添加文章添加页面前端，包含添加文章h2样式、文章标题、文章内容、文章分类、文章标签和发布按钮。
3.添加后台管理之文章添加函数，把前端传递过来的文章详情内容添加到数据库中。

重点：后端

后台管理之文章添加后端：

1.先添加用户登录认证装饰器
2.获取当前用户站点对象
3.如果请求方法是post，则接收文章标题、内容、分类id、标签id列表，并创建文章对象，由于标签id列表无法直接在文章对象里直接创建，需要额外for循环标签id列表，操作第三张表Article2Tag添加文章对象和for循环对象的标签id值。
4.还会定义分类列表及标签列表变量，用于给前端传递方便前端页面展示。

后台管理之文章添加前端

1.继承后端管理模板页面。
2.添加一个form表单，里面使用p标签分类出文章标签、文章内容、文章分类及文章标签。
3.文章分类和文章标签的值是通过后端传递过来，需要for循环展示出来，其中文章分类是单选框（orm文章和分类是一对多关系，一篇文章只能属于一个分类）、文章标签是多选框（orm文章和标签是多对多关系）。