BBS项目(四)：临时评论渲染 文章子评论功能 后台管理页面搭建 添加文章页面搭建
临时评论样式渲染
提交评论
评论框里面的内容会清空 然后页面会有一个临时评论样式出现 页面刷新才会出现评论楼样式
研究子评论特性
每个评论右侧都应该有回复按钮 点击就可以填写子评论
点击回复按钮具体动作:评论框中自动添加@+评论的人名并换行 聚焦
如何区分不同的回复按钮所对应的用户名
利用标签可以自定义属性直接携带对应的评论用户名即可
提交根评论和子评论点击的是同一个按钮 两者的区别与联系是什么
其实根评论和子评论的唯一区别就是是否有父评论的主键值
如何区分不同的回复按钮所对应的评论主键值
利用标签可以自定义属性直接携带对应的评论主键值即可
点击回复按钮发送子评论 页面不刷新的情况下 后续的评论全部成了子评论
原因是全局变量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比较强大
获取标签内的属性：
