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

目录

• 临时评论样式渲染
• 文章子评论业务逻辑
• 后台管理页面搭建
  • 后台管理页面模板创建
• 添加文章页面搭建
  • 富文本编辑器
  • 添加文章初步实现
  • 添加文章功能优化
  • beautifulsoup模块基本使用

临时评论样式渲染

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

研究子评论特性
	每个评论右侧都应该有回复按钮 点击就可以填写子评论
	点击回复按钮具体动作:评论框中自动添加@+评论的人名并换行 聚焦
		如何区分不同的回复按钮所对应的用户名
  			利用标签可以自定义属性直接携带对应的评论用户名即可

提交根评论和子评论点击的是同一个按钮 两者的区别与联系是什么
	其实根评论和子评论的唯一区别就是是否有父评论的主键值
		如何区分不同的回复按钮所对应的评论主键值
   			利用标签可以自定义属性直接携带对应的评论主键值即可

点击回复按钮发送子评论 页面不刷新的情况下 后续的评论全部成了子评论
	原因是全局变量parentId没有清空导致的 每次提交评论都应该清空一下

针对子评论内中的@用户名换行 理论上不属于用户评论的内容 不应该记录到数据库
	前端可以剔除 也可以在后端剔除

针对子评论的渲染 应该动态判断是否是子评论 如果是应该加上评论的目标用户名

ps:针对评论的渲染也可以分页 也可以做根评论与子评论的集合操作(分类)

提交评论之后，动态渲染：

1.评论框内容清空。

2.页面没有刷新，出现临时评论样式。

3.页面刷新之后，才会出现评论楼样式。

获取用户评论：

清空textarea:



临时渲染评论楼：

提前获取用户名以及该用户的评论。(使用模板语法)

使用js模板字符串。

查找ul标签，将html代码（评论楼）添加到指定的位置：

优化，span标签添加评论图标：

文章子评论业务逻辑

研究子评论特性：

每个评论右侧都应该有回复按钮 点击之后可以填写子评论

点击回复按钮具体动作：

1.评论框内自动添加@符号

2.自动出现根评论用户名字

3.自动换行

4.自动聚焦

评论删除，仅仅文章作者可以删除评论，删除接口。（加分点）

添加回复、引用按钮：

回复按钮不能加Id要加class:

回复按钮绑定点击事件：

点击不同回复按钮渲染的人名不一样，一个回复按钮都对应一个用户：

如何区分不同的回复按钮所对应的用户名？

标签除了可以有默认属性，还可以有自定义属性，给标签添加自定义属性：

查看f12:

由于每个按钮的属性中，就包含用户名信息，所以直接获取即可：

添加@和换行符：

自动聚焦：

支持一次性回复多个：

在拿到评论框原内容的基础上追加。

根评论的按钮和子评论使用的是一个按钮。

这个按钮的点击事件如何补充？如何区分？

根评论与子评论的唯一区别：是否有父评论主键值。

需要修改ajax提交的数据，添加新的数据：父评论主键值。

给回复按钮添加属性：父评论主键值

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

回复按钮点击事件的获取的某个数据

需要在提交按钮点击事件中使用

不同的函数需要用到相同的东西----> 全局变量

提前创建全局变量：

修改全局变量：

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

后端:

parent_id是null也没有关系。

问题：

点击回复按钮发送子评论 页面不刷新的情况下 后续的评论全部成了子评论

先发送一条子评论之后，再发送根评论，结果发现还是子评论。因为在页面没有刷新的情况下，全局变量还是子评论的。

所以需要提交评论之后，清空全局变量。

点击提交按钮后，清空全局变量：

针对子评论中@：

在发送评论之前，对子评论内容进行筛选，需要处理掉@前缀，不要让数据库存放这个额外的内容：（前端后端都可以做这个筛选操作）：

前端：

slice方法：

前端具体操作：不建议在前端做这个操作。

后端具体操作：

这里推荐在后端进行切割字符串。

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

模板语法：

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

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

让子评论展示在根评论的下面：（优化加分项）

需要在后端构建json格式大字典。

后台管理页面搭建

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

后台管理接口：

记得加登录装饰器:

小技巧：templates html文件越来越多。

对html文件进行分类：

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

研究博客园后台管理：

后台管理前端页面：

继承homePage.html：

需要从后端获取site_obj。

重写母板content部分：

复制bootstrap侧边栏样式：

修改样式：

效果：

标签页：

标签页对应关系：

四个div对应四个页面。

注意id的对应关系：

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

前端文章展示：

模板语法渲染数据：

文章添加链接：

添加分页器：

后端传入page_queryset:

前端代码：

后台管理页面模板创建

自己写后台管理的页面，然后进行继承。（不继承home_page）

后台管理页面母板：

内容区域与home_page有所不同。

申明block区域：

模板：

子板更换标签页的数据。

添加文章页面搭建

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

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

添加文章接口，点击左边侧边栏，右边主体部分（标签页部分）修改：

后端：

添加文章页面前端：

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

需要文章分类、文章标签，后端获取：

form表单：

完整代码：

效果：

富文本编辑器

前端使用别人写好的组件：kindeditor（最友好）

官网：http://kindeditor.net/docs/usage.html

研究kindeditor官方文档：

拷贝kindeditor到静态文件。

引入文件：

研究官方代码：

这个红色框是textarea的Id值。

将我们的textarea的id值给这个create，查看效果:

编辑器初始化参数：

在create括号里面添加字典，字典里面添加额外的参数：

添加items:

给文本框添加小功能。resizetype:

禁止拖动修改，文本框大小：

themetype:

修改富文本框的样式。

前端代码：

切换编辑器：

editor编辑器

添加文章初步实现

后端处理post请求：

文章简介获取：

局部截取文章内容。

文章表添加文章数据：

操作第三张表（标签），注意我们使用的是半自动：

可能一次性将表中添加多个数据：

从tag_list获取tag的id值:

添加成功跳转到后台:

添加文章：

添加文章功能优化

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

1.文章简介出现标签：

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

由于我们这里截取是直接截取的：

2.在添加文章时添加脚本

这个现象称为xss攻击(跨站脚本攻击)。

所有应该把内容中的script标签全部删掉，或者不允许用户写script脚本。

方法一：写正则

1.筛选掉所有的标签

2.匹配到script标签将其删掉

beautifulsoup模块基本使用

方法二：使用beautifulsoup（推荐）

下载bs4模块 该模块作用是解析页面内容。

pip install bs4

基本使用：

传入html产生soup对象。

需要下载lxml解析器：pip install lxml比较强大

获取标签内的属性：