首页 > 其他分享 >BBS项目(四):临时评论渲染 文章子评论功能 后台管理页面搭建 添加文章页面搭建

BBS项目(四):临时评论渲染 文章子评论功能 后台管理页面搭建 添加文章页面搭建

时间:2023-01-05 16:45:22浏览次数:61  
标签:标签 按钮 添加 评论 文章 页面 搭建

目录

临时评论样式渲染

提交评论
	评论框里面的内容会清空 然后页面会有一个临时评论样式出现 页面刷新才会出现评论楼样式

研究子评论特性
	每个评论右侧都应该有回复按钮 点击就可以填写子评论
	点击回复按钮具体动作:评论框中自动添加@+评论的人名并换行 聚焦
		如何区分不同的回复按钮所对应的用户名
  			利用标签可以自定义属性直接携带对应的评论用户名即可
 
提交根评论和子评论点击的是同一个按钮 两者的区别与联系是什么
	其实根评论和子评论的唯一区别就是是否有父评论的主键值
		如何区分不同的回复按钮所对应的评论主键值
   			利用标签可以自定义属性直接携带对应的评论主键值即可
        
点击回复按钮发送子评论 页面不刷新的情况下 后续的评论全部成了子评论
	原因是全局变量parentId没有清空导致的 每次提交评论都应该清空一下
 
针对子评论内中的@用户名换行 理论上不属于用户评论的内容 不应该记录到数据库
	前端可以剔除 也可以在后端剔除
  
针对子评论的渲染 应该动态判断是否是子评论 如果是应该加上评论的目标用户名
	
ps:针对评论的渲染也可以分页 也可以做根评论与子评论的集合操作(分类)

提交评论之后,动态渲染:
1.评论框内容清空。
2.页面没有刷新,出现临时评论样式。
3.页面刷新之后,才会出现评论楼样式。

获取用户评论:
image-20230105090930410

清空textarea:
image-20230105090959757
临时渲染评论楼:
提前获取用户名以及该用户的评论。(使用模板语法)
image-20230105091320719

使用js模板字符串。

查找ul标签,将html代码(评论楼)添加到指定的位置:
image-20230105091402153

优化,span标签添加评论图标:
image-20230105091558822

文章子评论业务逻辑

研究子评论特性:
每个评论右侧都应该有回复按钮 点击之后可以填写子评论
点击回复按钮具体动作:
1.评论框内自动添加@符号
2.自动出现根评论用户名字
3.自动换行
4.自动聚焦

评论删除,仅仅文章作者可以删除评论,删除接口。(加分点)

添加回复、引用按钮:

image-20230105092329504

回复按钮不能加Id要加class:
image-20230105092727231

回复按钮绑定点击事件:
image-20230105092852142

点击不同回复按钮渲染的人名不一样,一个回复按钮都对应一个用户:
如何区分不同的回复按钮所对应的用户名?

标签除了可以有默认属性,还可以有自定义属性,给标签添加自定义属性:
image-20230105092822725

查看f12:
image-20230105092838569

由于每个按钮的属性中,就包含用户名信息,所以直接获取即可:
image-20230105092937107

添加@和换行符:
image-20230105092957317

自动聚焦:
image-20230105093049884

支持一次性回复多个:
在拿到评论框原内容的基础上追加。

根评论的按钮和子评论使用的是一个按钮。
这个按钮的点击事件如何补充?如何区分?

根评论与子评论的唯一区别:是否有父评论主键值。
需要修改ajax提交的数据,添加新的数据:父评论主键值。
给回复按钮添加属性:父评论主键值
image-20230105095309998

获取回复按钮所在的评论主键值:

回复按钮点击事件的获取的某个数据
需要在提交按钮点击事件中使用
不同的函数需要用到相同的东西----> 全局变量

提前创建全局变量:

image-20230105095603347

修改全局变量:
在点击回复按钮时,修改全局变量的值。

image-20230105095724462

后端:
image-20230105095836663

parent_id是null也没有关系。

问题:

点击回复按钮发送子评论 页面不刷新的情况下 后续的评论全部成了子评论
先发送一条子评论之后,再发送根评论,结果发现还是子评论。因为在页面没有刷新的情况下,全局变量还是子评论的。
所以需要提交评论之后,清空全局变量。

点击提交按钮后,清空全局变量:
image-20230105100505326

针对子评论中@:
在发送评论之前,对子评论内容进行筛选,需要处理掉@前缀,不要让数据库存放这个额外的内容:(前端后端都可以做这个筛选操作):
前端:
slice方法:

image-20230105101036285

前端具体操作:不建议在前端做这个操作。
image-20230105101206547

后端具体操作:
这里推荐在后端进行切割字符串。

针对子评论的渲染 应该动态判断是否为子评论 子评论应该动态加上@符号和根评论用户名。

模板语法:

image-20230105101457243

现在根据子评论我们只能获取父评论的主键,而我们需要的是父评论的用户名:需要使用跨表查询。
image-20230105101621986

现在由于我们在前端切割了,所有前端动态渲染时会把@给省略。
image-20230105102004620

让子评论展示在根评论的下面:(优化加分项)
需要在后端构建json格式大字典。

后台管理页面搭建

1.模仿博客园后台访问直接展示所有文章
2.后台管理页面需要多次被当做模板页面使用 如果该页面也是继承其他页面那么无法二次被继承使用 所以我们单独编写一个后台管理的模板页面

后台管理接口:
image-20230105102356448

记得加登录装饰器:
image-20230105103203957

小技巧:templates html文件越来越多。
对html文件进行分类:

image-20230105102637744

开设后台管理html文件目录。

研究博客园后台管理:
image-20230105102810715

后台管理前端页面:
继承homePage.html:
image-20230105103014254

需要从后端获取site_obj。

重写母板content部分:
image-20230105103253623

复制bootstrap侧边栏样式:
image-20230105103140995

修改样式:
image-20230105103429937

效果:
image-20230105103500951

标签页:
image-20230105103530849

标签页对应关系:

image-20230105103700672

四个div对应四个页面。
注意id的对应关系:
image-20230105103811276

后端获取当前站点下所有的文章。

前端文章展示:

image-20230105104137151

模板语法渲染数据:image-20230105104232818

文章添加链接:image-20230105104347688
添加分页器:

后端传入page_queryset:image-20230105104430663

前端代码:image-20230105104520025

后台管理页面模板创建

自己写后台管理的页面,然后进行继承。(不继承home_page)

后台管理页面母板:
内容区域与home_page有所不同。

image-20230105110527511

申明block区域:

image-20230105110700486

image-20230105110830815

模板:
image-20230105110946324

子板更换标签页的数据。

添加文章页面搭建

1.页面简易搭建
2.文章内容区富文本编辑器的使用
	课下可以自行查找更多的富文本编辑器使用
3.添加文章需要注意的问题
	文章简介不应该有标签存在
	文章内容不允许编辑script脚本(XSS攻击)

涉及到html相关内容的处理 可以借助于爬虫相关模块
	bs4

添加文章接口,点击左边侧边栏,右边主体部分(标签页部分)修改:

image-20230105111524355

后端:
image-20230105111800348

添加文章页面前端:

image-20230105112014859存为草稿功能:给文章加一个字段 未发布0 已发布1

需要文章分类、文章标签,后端获取:

image-20230105112156600

form表单:

image-20230105112318764

完整代码:

image-20230105112413239

效果:
image-20230105112431013

富文本编辑器

前端使用别人写好的组件:kindeditor(最友好)

官网:http://kindeditor.net/docs/usage.html
研究kindeditor官方文档:
image-20230105113115477

拷贝kindeditor到静态文件。
引入文件:
image-20230105113546076

研究官方代码:
image-20230105113633271

这个红色框是textarea的Id值。

将我们的textarea的id值给这个create,查看效果:
image-20230105113811588

编辑器初始化参数:
image-20230105113844122

在create括号里面添加字典,字典里面添加额外的参数:
image-20230105113951886

添加items:
给文本框添加小功能。image-20230105114215628resizetype:

image-20230105114256508
禁止拖动修改,文本框大小:

themetype:
image-20230105114335326

修改富文本框的样式。
前端代码:
image-20230105114600763

切换编辑器:
editor编辑器

添加文章初步实现

后端处理post请求:

image-20230105120323250
文章简介获取:

image-20230105120528418
局部截取文章内容。

文章表添加文章数据:
image-20230105120645672

操作第三张表(标签),注意我们使用的是半自动:
可能一次性将表中添加多个数据:
image-20230105120750970

从tag_list获取tag的id值:
image-20230105120911739

添加成功跳转到后台:
image-20230105120938114

添加文章:
image-20230105121019060

添加文章功能优化

添加文章需要注意的问题:

1.文章简介出现标签:

image-20230105121338907

文章简介不应该有标签出现。

由于我们这里截取是直接截取的:
image-20230105121359608

2.在添加文章时添加脚本
image-20230105121514444

这个现象称为xss攻击(跨站脚本攻击)。
所有应该把内容中的script标签全部删掉,或者不允许用户写script脚本。

方法一:写正则
1.筛选掉所有的标签
2.匹配到script标签将其删掉

beautifulsoup模块基本使用

方法二:使用beautifulsoup(推荐)
下载bs4模块 该模块作用是解析页面内容。
pip install bs4

基本使用:
传入html产生soup对象。

image-20230105122647210
需要下载lxml解析器:pip install lxml比较强大

获取标签内的属性:
image-20230105122743253

标签:标签,按钮,添加,评论,文章,页面,搭建
From: https://www.cnblogs.com/passion2021/p/17027987.html

相关文章