BBS项目分布搭建五(评论相关)

1. 根评论逻辑实现

  1. # 在models.py文件中 修改：
  2. # 7. 评论表
  3.     parent = models.ForeignKey(to='self', null=True)
  5. # 添加路由(最好放在文章详情之上)：
  6.     # 评论功能
  7.     url(r'^comment/', views.comment),
  9. # 在views.py中 添加功能：
  10. # 10. 评论功能
  11. def comment(request):
  12.     if request.is_ajax() and request.method == 'POST':
  13.         back_dic = {'status': 200, 'msg': '评论成功'}
  15.         # 1. 接收参数
  16.         content = request.POST.get('content')
  17.         article_id = request.POST.get('article_id')
  19.         # 2. 验证参数
  20.         if not content:
  21.             back_dic['status'] = 1013
  22.             back_dic['msg'] = '评论内容不能为空哦~'
  23.             return JsonResponse(back_dic)
  25.         if not article_id:
  26.             back_dic['status'] = 1014
  27.             back_dic['msg'] = '评论的文章不存在'
  28.             return JsonResponse(back_dic)
  30.         # 3. 验证是否登录，验证尽量的完善
  31.         if not request.session.get('username'):
  32.             back_dic['status'] = 1015
  33.             back_dic['msg'] = '请先登录在评论'
  34.             return JsonResponse(back_dic)
  36.         # 4. 处理评论逻辑
  37.         # 4.1 操作评论表，文章表（评论数）
  38.         # 3.2 事务：保证数据安全，ACID四大特性，原子性，保证的是同一个事务中的SQL必须同时成功，同时失败
  39.         # 3.3 在企业中，遇到跟财务相关的需求，尽量都要使用事务
  40.         from django.db import transaction
  42.         with transaction.atomic():
  43.             models.Article.objects.filter(pk=article_id).update(comment_num=F('comment_num') + 1)
  44.             models.Comment.objects.create(
  45.                 content=content,
  46.                 article_id=article_id,
  47.                 user_id=request.session.get('id'),
  48.             )
  49.         return JsonResponse(back_dic)
  51.     return HttpResponse('ok')
  53. # 修改article_detail.html文件
  54. # 在 {% block content %} 标签中添加以下内容：
  55.     {#    评论样式开始#}
  56.     {% if request.session.username %}
  57.     <div >
  58.         <p>
  59.             <span class="glyphicon glyphicon-comment"></span>发表评论
  60.         </p>
  61.         <p>
  62.             <textarea name="" id="content" cols="30" rows="10"></textarea>
  63.         </p>
  64.         <p>
  65.             <input type="button" class="btn btn-success commit" value="提交">
  66.         </p>
  67.     </div>
  68.     {% endif %}
  69.     {#    评论样式结束#}
  71. # 在 {% block js %} </script> 标签中添加以下内容：
  72.         // 提交评论
  73.         $(".commit").click(function () {
  74.             // 先获取评论内容
  75.             var content = $('#content').val();
  76.             var article_id = '{{ article_id }}';  // 拿到文章id比对
  78.             // 提交ajax
  79.             $.ajax({
  80.                 url: '/comment/',
  81.                 type: 'post',
  82.                 data: {'content': content, article_id: article_id, },
  83.                 success: function (res) {
  84.                     console.log(res);
  85.                 }
  86.              })
  87.         })
  88.     </script>



2. 评论内容前端列表样式准备

  1. # 修改article_detail.html文件
  2. # 在 {% block content %}标签中添加：
  4.     {#    评论列表开始#}
  5.     <div class="comment">
  6.         <h1>评论列表</h1>
  7.         <ul class="list-group">
  8.                 <li class="list-group-item">
  9.                     <span style="margin-right: 10px;color: #399ab2"># 1楼</span> <span style="margin-right: 10px">2022-03-08</span> <span style="color: #399ab2">吾 荒天帝</span>
  10.                     <span style="margin-right: 10px">{{ comment.create_time|date:'Y-m-d H:i' }}</span>
  11.                     <span style="color: #399ab2">{{ comment.user.username }}</span>
  12.                     <span><a href="" class="pull-right reply" style="text-decoration: none;">回复</a></span>
  13.                     <p style="margin-top: 10px;margin-left: 15px;">
  14.                         一剑断万古！ 他化自在，他化万古！
  15.                     </p>
  16.                 </li>
  18.                 <li class="list-group-item">
  19.                     <span style="margin-right: 10px;color: #399ab2"># 1楼</span> <span style="margin-right: 10px">2022-03-08</span> <span style="color: #399ab2">吾 荒天帝</span>
  20.                     <span style="margin-right: 10px">{{ comment.create_time|date:'Y-m-d H:i' }}</span>
  21.                     <span style="color: #399ab2">{{ comment.user.username }}</span>
  22.                     <span><a href="" class="pull-right reply" style="text-decoration: none;">回复</a></span>
  23.                     <p style="margin-top: 10px;margin-left: 15px;">
  24.                         一剑断万古！ 他化自在，他化万古！
  25.                     </p>
  26.                 </li>    
  28.                 <li class="list-group-item">
  29.                     <span style="margin-right: 10px;color: #399ab2"># 1楼</span> <span style="margin-right: 10px">2022-03-08</span> <span style="color: #399ab2">吾 荒天帝</span>
  30.                     <span style="margin-right: 10px">{{ comment.create_time|date:'Y-m-d H:i' }}</span>
  31.                     <span style="color: #399ab2">{{ comment.user.username }}</span>
  32.                     <span><a href="" class="pull-right reply" style="text-decoration: none;">回复</a></span>
  33.                     <p style="margin-top: 10px;margin-left: 15px;">
  34.                         一剑断万古！ 他化自在，他化万古！
  35.                     </p>
  36.                 </li>
  38.                 <li class="list-group-item">
  39.                     <span style="margin-right: 10px;color: #399ab2"># 1楼</span> <span style="margin-right: 10px">2022-03-08</span> <span style="color: #399ab2">吾 荒天帝</span>
  40.                     <span style="margin-right: 10px">{{ comment.create_time|date:'Y-m-d H:i' }}</span>
  41.                     <span style="color: #399ab2">{{ comment.user.username }}</span>
  42.                     <span><a href="" class="pull-right reply" style="text-decoration: none;">回复</a></span>
  43.                     <p style="margin-top: 10px;margin-left: 15px;">
  44.                         一剑断万古！ 他化自在，他化万古！
  45.                     </p>
  46.                 </li>
  48.                 <li class="list-group-item">
  49.                     <span style="margin-right: 10px;color: #399ab2"># 1楼</span> <span style="margin-right: 10px">2022-03-08</span> <span style="color: #399ab2">吾 荒天帝</span>
  50.                     <span style="margin-right: 10px">{{ comment.create_time|date:'Y-m-d H:i' }}</span>
  51.                     <span style="color: #399ab2">{{ comment.user.username }}</span>
  52.                     <span><a href="" class="pull-right reply" style="text-decoration: none;">回复</a></span>
  53.                     <p style="margin-top: 10px;margin-left: 15px;">
  54.                         一剑断万古！ 他化自在，他化万古！
  55.                     </p>
  56.                 </li>
  57.         </ul>
  58.     </div>
  59.     {#    评论列表结束#}
  61. # 在 {% block css %} <style> 标签中添加：
  62.         .reply:hover {
  63.             color: #9cba39;
  64.         }

3. 评论后端逻辑实现

  1. # 在views.py中 文章详情页功能中添加查询评论内容：
  2. # 8. 文章详情页
  3.     # 查询当前文章的所有评论
  4.     comment_list = models.Comment.objects.filter(article_id=article_id).all()
  6.     return render(request, 'article_detail.html', locals())
  8. # 修改article_detail.html文件
  9. # 修改 {% block js %} </script> 标签内的 // 提交ajax：
  10.             // 提交ajax
  11.             $.ajax({
  12.                 url: '/comment/',
  13.                 type: 'post',
  14.                 data: {'content': content, article_id: article_id, },
  15.                 success: function (res) {
  16.                     console.log(res);
  17.                     var userName = '{{ request.session.username }}'
  19.                     if (res.status == 200) {
  20.                         // 1. 清空评论框
  21.                         $("#content").val('');
  23.                         // 2. 把评论成功的信息放到页面上
  24.                         $("#error_msg").text(res.msg);
  26.                         // 3. 评论之后，渲染临时评论  // ``反引号 引用模板语法
  27.                         var html = `
  28.                             <li class="list-group-item">
  29.                                 <span class="glyphicon glyphicon-comment"></span>
  30.                                 <span style="color: #399ab2">${userName}</span>
  31.                                 <p style="    margin-top: 10px;margin-left: 15px;">
  32.                                     ${content}
  33.                                 </p>
  34.                             </li>
  35.                         `;
  37.                         {#// 使用字符串引号也可以达到同样效果#}
  38.                         {#var html = ""#}
  39.                         {#html += '<li class="list-group-item">' +#}
  40.                         {#    '<span class="glyphicon glyphicon-comment"></span>'#}
  41.                         {#    + '<span style="color: #399ab2">' + userName + '</span>' +#}
  42.                         {#    '<p style="    margin-top: 10px;margin-left: 15px;">' + content + '</p>' +#}
  43.                         {#    '</li>';#}
  45.                         $('.list-group').append(html);
  46.                     }
  47.                 }
  48.              })
  49.         })
  50.     </script>

4. 子评论功能实现

  1. # 在views.py中修改 评论功能 两处：
  2. # 10. 评论功能
  3.         # 1. 接收参数
  4.         content = request.POST.get('content')
  5.         article_id = request.POST.get('article_id')
  6.         parent_id = request.POST.get('parent_id')  # 一处
  8.         with transaction.atomic():
  9.             models.Article.objects.filter(pk=article_id).update(comment_num=F('comment_num') + 1)
  10.             models.Comment.objects.create(
  11.                 content=content,
  12.                 article_id=article_id,
  13.                 user_id=request.session.get('id'),
  14.                 parent_id=parent_id  # 二处
  15.             )
  16.         return JsonResponse(back_dic)
  18. # 将 {#    评论列表开始#} 下面的 <span><a标签的 href="" 删除 达到阻止a标签默认提交问题
  19. 	此外 也可以在 // 子评论 下数据提交中进行阻止
  21. # 修改 article_detail.html文件：
  22. # 修改 评论列表 内容：
  23.     {#    评论列表开始#}
  24.     <div class="comment">
  25.         <h1>评论列表</h1>
  26.         <ul class="list-group">
  27.             {% for comment in comment_list %}
  28.                 <li class="list-group-item">
  29.                     <span style="margin-right: 10px;color: #399ab2"># {{ forloop.counter }}楼</span>
  30.                     <span style="margin-right: 10px">{{ comment.create_time|date:'Y-m-d H:i' }}</span>
  31.                     <span style="color: #399ab2">{{ comment.user.username }}</span>
  32.                     <span><a class="pull-right reply" style="text-decoration: none;" username="{{ comment.user.username }}" comment_id="{{ comment.pk }}">回复</a></span>
  34.                     <p style="margin-top: 10px;margin-left: 15px;">
  35.                         {% if comment.parent_id %}
  36.                             <span>@ {{ comment.parent.user.username }}</span>
  37.                             <p>
  38.                                 {{ comment.content }}
  39.                             </p>
  40.                         {% else %}
  41.                             {{ comment.content }}
  42.                         {% endif %}
  43.                     </p>
  44.                 </li>
  46.             {% endfor %}
  47.         </ul>
  48.     </div>
  49.     {#    评论列表结束#}
  51. # 修改 {% block js %} </script> 标签内容：
  52. {% block js %}
  53.     <script>
  54.         var parent_id = null;  // 定义全局变量，目的是，在提交评论的事件里使用子评论事件里的根评论id
  55.         $('.active').click(function () {
  56.             var is_up = $(this).hasClass('diggit');  // true false
  57.             var article_id = '{{ article_id }}';
  58.             var _this = $(this)
  60.             // 发送ajax请求
  61.              $.ajax({
  62.                 url: '/up_or_down/',
  63.                 type: 'post',
  64.                 data: {'is_up': is_up, article_id: article_id},
  65.                 success: function (res) {
  66.                     console.log(res);
  68.                     if (res.status == 200) {
  69.                         $('.error_msg').text(res.msg);
  70.                         var old_num = Number(_this.children().text());
  71.                         _this.children().text(old_num + 1)
  72.                     } else if (res.status == 1010) {
  73.                         $('.error_msg').append(res.msg)
  74.                     } else {
  75.                         layer.msg(res.msg)
  76.                     }
  77.                 }
  78.             })
  79.         })
  81.         // 提交评论
  82.         $(".commit").click(function () {
  83.             // 先获取评论内容
  84.             var content = $('#content').val();
  85.             var article_id = '{{ article_id }}';  // 拿到文章id比对
  87.             // 重点:如何区分是根评论还是子评论
  88.             if (parent_id) {
  89.                 // 子评论
  90.                 var num = content.indexOf('\n') + 1;
  91.                 content = content.slice(num)  // 把换行符之前的内容全部切掉
  92.             }
  94.             // 提交ajax
  95.             $.ajax({
  96.                 url: '/comment/',
  97.                 type: 'post',
  98.                 data: {'content': content, article_id: article_id, parent_id: parent_id},
  99.                 success: function (res) {
  100.                     console.log(res);
  101.                     var userName = '{{ request.session.username }}'
  103.                     if (res.status == 200) {
  104.                         // 1. 清空评论框
  105.                         $("#content").val('');
  107.                         // 2. 把评论成功的信息放到页面上
  108.                         $("#error_msg").text(res.msg);
  110.                         // 3. 评论之后，渲染临时评论  // ``反引号 引用模板语法
  111.                         var html = `
  112.                             <li class="list-group-item">
  113.                                 <span class="glyphicon glyphicon-comment"></span>
  114.                                 <span style="color: #399ab2">${userName}</span>
  115.                                 <p style="    margin-top: 10px;margin-left: 15px;">
  116.                                     ${content}
  117.                                 </p>
  118.                             </li>
  119.                         `;
  121.                         {#// 使用字符串引号也可以达到同样效果#}
  122.                         {#var html = ""#}
  123.                         {#html += '<li class="list-group-item">' +#}
  124.                         {#    '<span class="glyphicon glyphicon-comment"></span>'#}
  125.                         {#    + '<span style="color: #399ab2">' + userName + '</span>' +#}
  126.                         {#    '<p style="    margin-top: 10px;margin-left: 15px;">' + content + '</p>' +#}
  127.                         {#    '</li>';#}
  129.                         $('.list-group').append(html);
  131.                         // 根评论的id要清空
  132.                         parent_id = null;
  133.                     }
  134.                 }
  135.              })
  136.         })
  138.         // 子评论
  139.         $('.reply').click(function (event) {
  140.             {#alert(123)#}
  142.             {#阻止a标签默认提交问题其他方法#}
  143.             {#return false;  // 阻止默认提交, 不仅适用于a标签，还适用于form表单#}
  144.             {#event.preventDefault() // 阻止默认提交#}
  146.             // 子评论逻辑
  147.             var userName = $(this).attr('username');
  149.             // 获取根评论的id
  150.             parent_id = $(this).attr('comment_id');
  151.             var s = '@' + userName + '\n'
  152.             $('#content').val(s).focus();
  153.         })
  154.     </script>
  155. {% endblock %}

BBS项目分布搭建五(评论相关功能实现)的更多相关文章

  1. BBS项目分布搭建四(点赞点踩及评论功能准备)

    BBS项目分布搭建四(点赞点踩及评论功能) 1. 点赞点踩样式准备 # 在base.html文件中 head标签内 添加css模块: {% block css %} {% endblock %} # ...

  2. BBS项目分布搭建二(个人站点相关)

    BBS项目分布搭建二 1. 首页详情补充 # 在home.html文件中 body标签内补充: <div class="container-fluid"> <di ...

  3. BBS项目分布搭建三(个人站点时间归档补充，实现侧边栏跳转、无线级分类、实现文章详情页展示功能)

    BBS项目分布搭建三(个人站点时间归档补充,) 1. 个人站点时间归档 """ settings.py设置最好更改以下: LANGUAGE_CODE = 'zh-hans ...

  4. bbs项目实现点赞和评论的功能

    一.点赞功能 思路是这样的: 1.对点赞和踩都设置一个相同的class,然后对这个class绑定点击事件 2.点击触发ajax请求,我们对赞的标签设置了一个class属性,对踩的标签没有设置这个cla ...

  5. BBS项目补充知识(后台文章展示功能)

    BBS项目补充知识 1. 开放 media 文件路径 # 以用户注册页面为例 用户头像文件我们默认时保存在 根路径下的static下的img文件夹 但也可以单独放置在指定路径下 # 根路径下创建 me ...

  6. .Net Core3.0 WebApi 项目框架搭建 五: 轻量型ORM+异步泛型仓储

    .Net Core3.0 WebApi 项目框架搭建:目录 SqlSugar介绍 SqlSugar是国人开发者开发的一款基于.NET的ORM框架,是可以运行在.NET 4.+ & .NET C ...

  7. .Net Core3.0 WebApi 项目框架搭建 五:仓储模式

    .Net Core3.0 WebApi 项目框架搭建:目录 理论介绍 仓储(Respository)是存在于工作单元和数据库之间单独分离出来的一层,是对数据访问的封装.其优点: 1)业务层不需要知道它 ...

  8. 如何在项目中使用composer的相关功能

    最近要在公司的magento项目中引用第三方库,用了composer来进行管理,composer还是非常方便的: 1.在应用的根目录下添加文件:composer.json {    "nam ...

  9. 潭州课堂25班：Ph201805201 django 项目 第十五课 用户注册功能后台实现 (课堂笔记）

    前台:判断用户输入 ,确认密码,手机号, 一切通过后向后台发送请求, 请求方式:post 在 suers 应用下的视图中: 1,创建个类, 2,创建 GET 方法,宣言页面 3,创建  POST 方法 ...

随机推荐

  1. 学习JDBC遇到的一些问题

    1. 数据库版本与驱动对应问题 参考官方文档:https://dev.mysql.com/doc/connector-j/8.0/en/connector-j-versions.html 具体详情还需 ...

  2. 利用纯代码写出一个秒表表盘的方法 —— #DF

    @interface ViewController () @property (nonatomic, strong) CALayer *secLayer; // 秒针layer @property ( ...

  3. 【NetCore】依赖注入的一些理解与分享

    依赖注入 DI 前言 声明:我是一个菜鸟,此文是自己的理解,可能正确,可能有误.仅供学习参考帮助理解,如果直接拷贝代码使用造成损失概不负责. 相关的文章很多,我就仅在代码层面描述我所理解的依赖注入是个 ...

  4. 详解Java12新增语法switch表达式

    引言 在学习分支语句的时候,我们都学过 switch 语句,相比于 if-else 语句,他看起来更加整洁,逻辑更加清晰,Java中当然也给我们提了相关的 switch 方法.但是Java的强大之处在 ...

  5. CentOS虚拟机关闭防火墙

    关闭防火墙 systemctl stop firewalld 关闭防火墙开机自启动 systemctl disable firewalld 关闭安全机制,将selinux设置为disabled vi ...

  6. Linux基础：操作系统的启动

    Centos6: # 1.加电自检(BIOS)# 2.MBR引导(512k)dd </dev/zero >/dev/sda bs=1k count=400 # 3.GRUB菜单(选择系统) ...

  7. Solution -「ARC 126F」Affine Sort

    \(\mathcal{Description}\)   Link.   给定 \(\{x_n\}\),令 \[f(k)=\left|\{(a,b,c)\mid a,b\in[0,c),c\in[1,k ...

  8. Session是什么？它与Cookie有什么区别？

    你好,是我琉忆. 今天我们讲一讲Session与Cookie的区别 1.Session对象 上一节简单介绍了Cookie,接下来简单介绍Session.Session和Cookie都是会话管理技术的一 ...

  9. linux可以这样玩 之 杂乱无章的随笔（不定期更新）

    文章目录 快速重命名 vim的进化 vim高亮当前行 vim列编辑 vim块编辑 vim行编辑 vim 中替换内容 vim保留当前已经编辑的内容,切换到其他用户继续编辑 修改服务的进程限制 CentO ...

  10. Python中random模块的用法案例

    1 import random # 调用random模块 2 3 a = random.random() # 随机从0-1之间抽取一个小数 4 print(a) 5 6 a = random.rand ...