BBS系统（四）——根评论完善、子评论功能、后台管理页面搭建、富文本编辑器、添加文本初步实现

根评论完善

提交评论特性：

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

 前端：

 

 效果展示：

 

 刷新之后：

 

子评论 

研究子评论特性：

1. 每个评论右侧部都应该有回复按钮，点击就可以填写子评论
2. 点击回复按钮具体动作：评论框中自动添加@+评论的人名并换行、聚集

如下图：

 

前端 

给评论楼的的渲染添加两个标签：

 

 给评论按钮绑定点击事件：

思考1：如何区分不同的回复按键所对应的用户。

• 给评论按键添加自定义属性：username

 

 

 

 思考2：提交根评论和子评论点击的是同一个按钮，两者的区别和联系是什么？

• 根评论和子评论的唯一区别就是是否有父评论的主键值

思考3：如何区分不同的回复按钮所对应的评论主键值？

• 利用标签可以自定义属性直接携带对应的评论主键值即可

 

 该评论主键值在评论提交点击事件和回复点击事件中都需要用到，可以定义全局变量，然后添加到两个点击事件中。

 

 

 后端：

接收一个parent_id:

 

 存在的问题：

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

 

 优化：

针对子评论内中的@用户名换行，理论上不属于用户评论的内容，不应该记录到数据库中

 

 剔除@+用户名：

 

 如果添加这行代码的话前后端同时被剔除掉了，但是我们要保留前端的，所以再把前端的加上。

 后台管理

路由：

path('backend/',views.backend_func),

 视图函数：

 前端：

继承homePage

样式和名称直接复制过去：

 

 内容区域：

侧边栏：js插件里拷贝一个Accordion example之后进行修改

 

 右侧：js插件里拷贝一个类似于下面的标签样式，并进行修改

    <div class="col-md-10">
        <div>
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">文章</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">随笔</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">日记</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">配置</a></li>
            <li role="presentation"><a href="#others" aria-controls="settings" role="tab" data-toggle="tab">其他</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
              <table class="table table-hover table-striped">
                  <thead>
                    <tr>
                        <th>标题</th>
                        <th>时间</th>
                        <th>评论数</th>
                        <th>点赞数</th>
                        <th>点踩数</th>
                        <th>操作</th>
                        <th>操作</th>
                    </tr>
                  </thead>

                  <tbody>
                    {% for article_obj in page_queryset %}
                        <tr>
                            <td><a href="/{{ site_obj.site_name }}/article/{{ article_obj.pk }}/">{{ article_obj.title }}</a></td>
                            <td>{{ article_obj.create_time|date:'Y-m-d H:i:s' }}</td>
                            <td>{{ article_obj.comment_num }}</td>
                            <td>{{ article_obj.up_num }}</td>
                            <td>{{ article_obj.down_num }}</td>
                            <td><a href="#">编辑</a></td>
                            <td><a href="#">删除</a></td>
                        </tr>
                    {% endfor %}

                  </tbody>
              </table>
                <div class="pull-right">{{ page_obj.page_html|safe }}</div>

            </div>
              
            <div role="tabpanel" class="tab-pane" id="profile">随笔列表</div>
            <div role="tabpanel" class="tab-pane" id="messages">日记列表</div>
            <div role="tabpanel" class="tab-pane" id="settings">配置列表</div>
            <div role="tabpanel" class="tab-pane" id="others">其他</div>
          </div>
        
        </div>
   
    </div>

效果展示：

 

 添加文章页面搭建

路由：

path('add_article/',views.add_article_func)

视图函数：

 

 前端：

后台管理页面需要多次被当做模板页面使用，如果该页面也是继承其他页面，那么无法二次被继承使用，所以我们单独编写一个后台管理的模板页面。

创建一个新的后台管理模板页面（backendBasePage.html）：

• 将homePage.html相同的部分全部拷贝过来，将不同的部分（即上面我们所写的内容右侧的部分全部拷贝过来），则后台管理相关的页面直接继承后台管理模板页面即可。

 

 效果展示：

 

 富文本编辑器

参考官网：http://kindeditor.net/demo.php

添加富文本编辑器 

按照官网提示进行操作：

 

 绑定textarea标签与添加的脚本中的标签：

 效果展示：

 

富文本编辑器参数设置：

参考：http://kindeditor.net/docs/option.html#items

 添加文本初步实现

视图函数

 

 添加文章需要注意的问题

1. 文章简介不对（如下图）

 

 2. 文章内容不允许编辑script脚本(XSS攻击)

解决方法——bs4模块：

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