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

开发前言

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

前端

我们首先来设计前端

评论一般包含：

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

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

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

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

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

具体引用方法为： 在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只贴出了关键代码，其他比如表单验证自己补上就可以了，明天说后端的设计

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

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