node之blog实战25（实现文章评论效果）

本文介绍下评论功能的实现

（1）首先编写静态模板样式

　　如下所示

　　

 

 

 　　接下来添加判断，如果用户未登录则不显示评论表单，登录后不显示红框提示。分析可知，判断条件和右侧登录框显示一致，修改代码如下

　　

 

 

 　　最终效果如下：

　　1、登录后

　　　　

　　2、未登录

　　　　

 

 

 　接下来做下完善，提交表单时将评论信息添加到数据库，这里便需要用到ajax异步表单处理，防止页面刷新，影响客户体验。所以接下来封装“评论接口”

　接下来操作编写路由模块api.js开始相关操作

　　

（2）编写评论接口（api.js）

　　

 　　

（3）编写数据表结构

　　将评论的相关内容保存到文章的数据表里，所以接下来修改文章数据表原型

　　

 

 

 　　接下来定义下评论 包含的内容，即评论人和评论时间、评论内容

　　

 　　分析可以知道，需要从前端获取的数据有两个，即评论所属文章id和评论内容。所以接下来编写ajax（注意隐藏域）

　　

　　

 

 

 　　接下来做下测试，然后在服务端输出打印，结果如下

　　

　　

 

　　

 

 

 　　此时服务端已经可以获取提交数据，接下来要做的便是数据库存储

　　

（4）存储评论

　　因为要查询当前评论所属文章内容，所以需要先引入文章实例化模型

 　　

 

 

 

 　　注意：在测试前，首先要在数据库新加一篇博客，因为之前的博客里没有评论选项，所以如果用之前的文章测试评论，一定会报错

 　　直接操作数组进行持久化存储

 　　

 

　　评论时在服务端输出测试下

　　

 

 　　可以看到已经存储到数据库，此时客户端响应如下

　　

 

 　　然后在ajax做下响应

　　

 

 　　测试如下：

　　

 

 　　做下完善，即提交时数据简单验证

　　

 

 　　测试如下，如果内容为空

　　

 

 　　

 

（5）评论展示

　　这里注意，因为之前的博客没有评论实例，所以这里会报错，所以需要删除，再重新写文章，如下所示

　　

 

 　　然后重新添加多个

　　接下来结合ES6模板字符串语法，将新的评论内容添加到列表顶部，同时，将新的评论改为添加到数组头部

　　

 

 　　

 

 　　至此便实现了博客评论功能，但仍然存在小问题，即评论提交后，新生成的li下时间格式不对，所以这里我们引入时间格式化函数，然后在模板字符串里调用，如下所示

　　

 

 　　然后在模板字符串里调用

　　

 

 　　此时便完善完毕

　　

 

 　　

 

 

.