Django博客开发拓展 | 给博客添加评论功能(前端部分)

2020年3月17日 23:57 阅读 2.44k 评论 0

开发前言

一个完整的博客,评论功能是不可或缺的,以前用的成熟的博客程序,所以不需要管评论这块,但是现在是从头开发博客,什么事都得自己来,所以记录下自己的开发思路

前端

我们首先来设计前端

评论一般包含:

  • 评论者 (姓名/昵称)
  • 评论者邮箱(用来接收回复提醒)
  • 评论者网站 (可以是博客什么的,此栏目可以为空)
  • 评论内容
  • 评论时间 (这个后台自己生成就ok)

经过分析,在前端我们需要一个textarea用来输入评论内容,三个input分别用来存放评论者昵称、邮箱和网站,然后一个按钮用来提交,如下图:

评论表单

这个我用Bootstrap的栅格系统做的,一行分三列,很简单,前端源码就不贴了

为了减轻服务器压力以及提升用户体验,我决定使用ajax技术来实现无刷新提交评论以及更新评论,毕竟没人愿意点一下提交又得等半天网页加载

ajax的post方法没什么说的,很简单,但是有一点需要注意,就是必须在form表单中添加{% csrf_token %}字段并在post中一并提交该字段,否则服务器会返回403错误,如下图:

csrf错误

具体引用方法为: 在form表单中增加{% csrf_token %}字段后,在ajax中获取该字段value值并提交

var csrf = $('input[name="csrfmiddlewaretoken"]').val(); 
$.post({ 
    url: '',// 对应URL 
    data: { 
        ... // 表单字段内容  
        'csrfmiddlewaretoken': csrf // 必须提交, 否则服务器返回403错误 
    }, 
    success: function(res) { 
        ... //提交成功对应操作, 我这里将后台渲染好的评论内容添加到对应div后 
        var res = JSON.parse(res); 
        $("#comments_list").append(res.data) 
    }, 
    error: function() { 
        ... //提交失败的操作 
    } 
}) 

前端这样就ok了,js只贴出了关键代码,其他比如表单验证自己补上就可以了,明天说后端的设计

最后修改于2020年3月17日 23:57
©允许规范转载

版权声明:如无特殊说明,文章均为本站原创,转载请注明出处

本文链接:https://www.yangyingqi.com/12.html

Django Python
微信
支付宝
登录后即可进行评论/回复