Vue.js实现文章评论和回复评论功能


Posted in Javascript onMay 30, 2020

本来想把这个页面用jade渲染出来、评论部分用vue,但是想了想觉得麻烦,最后还是整个用vue的组件搞定他吧。
先上在线demo:http://jsbin.com/ceqifo/1/edit?js,output

再上效果图

Vue.js实现文章评论和回复评论功能

可直接评论,点击别人的评论能回复别人的评论。

html

<div id="comment">
 <article-content v-bind:article="article"></article-content>
 <commemt-content v-bind:comment="comment" v-on:change="changCommmer"></commemt-content>
 <comment-textarea v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment" v-on:canel="canelCommit"></comment-textarea>
</div>

数据全都由根组件绑定下去的。这里还监听了几个事件。

<article-content是文章内容的组件,没啥好讲的,直接把数据绑定进去子组件就行了。这里我是直接绑定一个obj而不是把标题、时间等等详细的信息分别绑定进去。因为直接绑定一个对象,子组件可以用.的方式很好的调用,比分开写好多了。

<article-content组件?文本

然后先说个简单点的,<comment-textarea>,文本框的那个组件。

Vue.component('commentTextarea',{
 template:'\
 <div class="commentBox">\
 <h3>发表评论</h3>\
 <b v-if="type">你回复 {{name}}</b>\
 <textarea name="" value="请填写评论内容" v-model="commentText"></textarea>\
 <button class="btn" @click="addComment">发表</button>\
 <button class="btn" @click="canelComment">取消</button>\
 </div>',
 props: ['type','name'],
 data: function(){
 return {commentText:""}
 },
 methods: {
 addComment: function() {
 this.$emit("submit",this.commentText);
 this.commentText = "";
 },
 canelComment: function() {
 this.$emit("canel");
 this.commentText = "";
 }
 }
});

type是如果点击了别人的评论,会显示 ”你回复xxx “ 的提示框,这个因为跨了组件通信而且两组件不是父子组件但是是兄弟组件,我把他们的通信挂在了父组件的一个属性上,实现通信。

文本框内的内容用一个v-model双向绑定,如果点击了确定,就触发一个 addComment事件并把文本内容传给父组件,父组件会监听事件。

commemt-content组件?评论内容

先来确定json格式

comment: [
 {
 name: "有毒的黄同学", //评论人名字
 time: "2016-08-17", 
 content: "好,讲得非常好,good",
 reply: [ //回复评论的信息,是一个数组,如果没内容就是一个空数组
 {
 responder: "傲娇的", //评论者
 reviewers: "有毒的黄同学", //被评论者
 time: "2016-09-05",
 content: "你说得对"
 }
 }
 ]

再来看commemt-content组件

Vue.component('commemt-content',{
 template:'\
 <div class="commentBox">\
 <h3>评论</h3>\
 <p v-if="comment.length==0">暂无评论,我来发表第一篇评论!</p>\
 <div v-else>\
 <div class="comment" v-for="(item,index) in comment" v-bind:index="index" >\
 <b>{{item.name}}<span>{{item.time}}</span></b>\
 <p @click="changeCommenter(item.name,index)">{{item.content}}</p>\
 <div v-if="item.reply.length > 0">\
  <div class="reply" v-for="reply in item.reply">\
  <b>{{reply.responder}}  回复  {{reply.reviewers}}<span>{{reply.time}}</span></b>\
  <p @click="changeCommenter(reply.responder,index)"">{{reply.content}}</p>\
  </div>\
 </div>\
 </div>\
 </div>\
 </div>',
 props: ['comment'],
 methods: {
 changeCommenter: function(name,index) {
 this.$emit("change",name,index);
 }
 }
});

如果没有内容,则显示 “暂无评论,我来发表第一篇评论!”。如果有内容就开始遍历。因为点击评论要知道第几条,所以每条评论要绑一个v-bind:index="index"

到了二次评论那块,还是遍历reply数组,绑定该绑定的。因为就算点击内容,也是加到那条一级评论的最下面,所以两个点击事件我都是绑定了同一个事件。只是传进去的名字不一样而已,后面那个index都是一级评论的index。

changeCommenter事件触发了change,父组件监听,执行相应行为。

父组件

var comment = new Vue({
 el: "#comment",
 data: {
 commenter: "session", //评论人,这里会从session拿
 type: 0, //0为评论作者1为评论别人的评论
 oldComment: null, //久评论者的名字
 chosedIndex: -1, //被选中的评论的index
 article: {
 title: "当归泡水喝的九大功效",
 time: "2016-07-12",
 read:50,
 content: ""
 },
 comment: [] //评论内容
 },
 methods: {
 //添加评论
 addComment: function(data) {
 if(this.type == 0) {
 this.comment.push({
  name: 'session',
  time: getTime(),
  content: data,
  reply: []
 });
 //服务器端
 }else if(this.type == 1){
 this.comment[this.chosedIndex].reply.push({
  responder: 'session',
  reviewers:this.comment[this.chosedIndex].name,
  time: getTime(),
  content: data
 });
 this.type = 0;
 }
 },
 //监听到了点击了别人的评论
 changCommmer: function(name,index) {
 this.oldComment = name;
 this.chosedIndex = index;
 this.type = 1;
 },
 //监听到了取消评论
 canelCommit: function() {
 this.type = 0;
 }
 }
})

data那里。。。实在是取名困难症啊。。。commenter是当前登录名,这里到时候会session里拿;type就是看到底是评论作者的还是评论别人的评论的;oldComment就是就评论者的名字(实际储存的时候应该是id);chosedIndex是被点击的评论的index。

canelCommit是监听到取消评论事件,这里是为了如果了点击了别人的评论但是突然我就是想变评论作者用的。所以设type=0;

changCommmer是监听到点击了别人评论想回复评论的。即type=1.

addComment就是监听添加评论事件的。根据type的值,push相应的数组。这里还要记得跟数据库那个对接。传数据有两种方法,这里是根据type的不同分两个url传还是一个,取决于表的设计。待我明天好好设计表后,加入http请求,完成这个评论功能。

要期末了。真的怕挂科。

补充一下:

由于第一次自己设计数据库的表结构,所以很有问题。
更新一下,正确的表结构应该是每条评论都有自己的id,有一个parentId属性默认为null,如果是直接评论的话,parentId值为null,如果是回复别人的评论的话,parentId是那条评论的id。最后查出一条条数据后,再根据里面的是否有parentId等再组件这个obj,传到前端。如果直接组这个obj的话会for循环3次,所以。。。打算用一用数据结构里的散列,不用for循环这么多次。这周末搞定这个,下篇文章就是它了。

然而当我思考了下后。如果单单用散列的话,就不能根据时间来排序了。因为散列是根据id%length的值来插入的,所以没了时间排序。如果直接根据查数据库返回的数组组合这个obj的话,肯定是早插入的id靠前所以有时间顺序。这个数据结构的问题还真不简单啊。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
js数组实现权重概率分配
Sep 12 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 #Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 #jQuery
快速使用node.js进行web开发详解
Apr 26 #Javascript
js canvas实现擦除效果示例代码
Apr 26 #Javascript
vue-cli如何快速构建vue项目
Apr 26 #Javascript
Vue制作Todo List网页
Apr 26 #Javascript
bootstrap table表格使用方法详解
Apr 26 #Javascript
You might like
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
python排序方法实例分析
2015/04/30 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
python判断数字是否是超级素数幂
2018/09/27 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Django密码系统实现过程详解
2019/07/19 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python线程信号量semaphore使用解析
2019/11/30 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
2014全国两会心得体会
2014/03/17 职场文书
离职感谢信怎么写
2015/01/22 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
2016年主题党日活动总结
2016/04/05 职场文书