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

发布时间：2020-12-17 02:59:16 所属栏目：百科来源：网络整理

导读：本来想把这个页面用jade渲染出来、评论部分用vue，但是想了想觉得麻烦，最后还是整个用vue的组件搞定他吧。先上在线demo：再上效果图可直接评论，点击别人的评论能回复别人的评论。 html 数据全都由根组件绑定下去的。这里还监听了几个事件。然后先说个

本来想把这个页面用jade渲染出来、评论部分用vue，但是想了想觉得麻烦，最后还是整个用vue的组件搞定他吧。先上在线demo：

再上效果图

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

html

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

然后先说个简单点的，，文本框的那个组件。

发表评论

<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 = ""; } } });</pre> </div> <p>type是如果点击了别人的评论，会显示 ”你回复xxx “ 的提示框，这个因为跨了组件通信而且两组件不是父子组件但是是兄弟组件，我把他们的通信挂在了父组件的一个属性上，实现通信。 </p> <p>文本框内的内容用一个v-model双向绑定，如果点击了确定，就触发一个 addComment事件并把文本内容传给父组件，父组件会监听事件。 </p> <p><h3>commemt-content组件–评论内容</h3></p> <p>先来确定json格式</p> <div class="jb51code"> <pre class="brush:js;"> comment: [ { name: "有毒的黄同学",//评论人名字 time: "2016-08-17",content: "好,讲得非常好，good",reply: [ //回复评论的信息，是一个数组，如果没内容就是一个空数组 { responder: "傲娇的",//评论者 reviewers: "有毒的黄同学",//被评论者 time: "2016-09-05",content: "你说得对" } } ] </pre> </div> <p>再来看commemt-content组件</p> <div class="jb51code"> <pre class="brush:js;"> 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); } } });</pre> </div> <p>如果没有内容，则显示 “暂无评论，我来发表第一篇评论！”。如果有内容就开始遍历。因为点击评论要知道第几条，所以每条评论要绑一个v-bind:index="index" </p> <p>到了二次评论那块，还是遍历reply数组，绑定该绑定的。因为就算点击内容，也是加到那条一级评论的最下面，所以两个点击事件我都是绑定了同一个事件。只是传进去的名字不一样而已，后面那个index都是一级评论的index。 </p> <p>changeCommenter事件触发了change，父组件监听，执行相应行为。</p> <p><h3>父组件</h3></p> <div class="jb51code"> <pre class="brush:js;"> 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,content: data }); this.type = 0; } },//监听到了点击了别人的评论 changCommmer: function(name,index) { this.oldComment = name; this.chosedIndex = index; this.type = 1; },//监听到了取消评论 canelCommit: function() { this.type = 0; } } }) </pre> </div> <p>data那里。。。实在是取名困难症啊。。。commenter是当前登录名，这里到时候会session里拿；type就是看到底是评论作者的还是评论别人的评论的；oldComment就是就评论者的名字（实际储存的时候应该是id）；chosedIndex是被点击的评论的index。 </p> <p>canelCommit是监听到取消评论事件，这里是为了如果了点击了别人的评论但是突然我就是想变评论作者用的。所以设type=0； </p> <p>changCommmer是监听到点击了别人评论想回复评论的。即type=1. </p> <p>addComment就是监听添加评论事件的。根据type的值，push相应的数组。这里还要记得跟数据库那个对接。传数据有两种方法，这里是根据type的不同分两个url传还是一个，取决于表的设计。待我明天好好设计表后，加入http请求，完成这个评论功能。</p> <p>要期末了。真的怕挂科。</p> <p><h3>补充一下： </h3> 由于第一次自己设计数据库的表结构，所以很有问题。更新一下，正确的表结构应该是每条评论都有自己的id，有一个parentId属性默认为null，如果是直接评论的话，parentId值为null，如果是回复别人的评论的话，parentId是那条评论的id。最后查出一条条数据后，再根据里面的是否有parentId等再组件这个obj，传到前端。如果直接组这个obj的话会for循环3次，所以。。。打算用一用数据结构里的散列，不用for循环这么多次。这周末搞定这个，下篇文章就是它了。</p> <p>然而当我思考了下后。如果单单用散列的话，就不能根据时间来排序了。因为散列是根据id%length的值来插入的，所以没了时间排序。如果直接根据查数据库返回的数组组合这个obj的话，肯定是早插入的id靠前所以有时间顺序。这个数据结构的问题还真不简单啊。</p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 </p> <p style="text-align:right;">（编辑：李大同）</p> <p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p> </td> </tr> </table> </div> <div class="dede_pagess"><ul class="pagelist"></ul></div> <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div> <div class="g-box10"> <div class="t-2">相关内容</div> <ul class="b-box12"></ul> <ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/403015.html" target="_blank">使用 Ajax 验证表单</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/466148.html" target="_blank">使用 libssh2 连接到远程服务器</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/421718.html" target="_blank">dwr消息推送和tomcat集群</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/408941.html" target="_blank">XML文件解析（DOM方式）</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/322411.html" target="_blank">React中文教程翻译文档 - JSX Syntax（语法）</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/537762.html" target="_blank">ruby – Rspec检查是否在没有调用方法的情况下调用了方法</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/556287.html" target="_blank">vb.net – 如何在Visual Basic应用程序中打开“Windows搜索</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/541643.html" target="_blank">ruby-on-rails – 在delayed_job进程作业之后回调</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/160355.html" target="_blank">一个正则表达式测试（只可输入中文、字母和数字）</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/212888.html" target="_blank">在VCL应用中运用MVC模式</a></li><div class="cl"></div></ul> </div> </div> </div> <div class="right-1 fr"> <div class="g-box8"> <div class="t-2">推荐文章</div> <ul></ul> </div> <div class="g-box11"> <div class="t-2">站长推荐</div> <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/546710.html" target="_blank">详解Vue.js 2.0 如何使用axios</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/133618.html" target="_blank">正则表达式匹配(URL、电话、手机、邮箱)的实例代</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/215496.html" target="_blank">正则表达式 – 与grep和正则表达式匹配的部分字符</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/367596.html" target="_blank">视锥裁剪</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/307934.html" target="_blank">C#操作LINQ to SQL组件进行数据库建模的基本教程</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/355097.html" target="_blank">c# – 如何与SFTP服务器通信</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/45655.html" target="_blank">oracle 11g EXP导出报错 EXP-00106:数据库连接口</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/373754.html" target="_blank">学习FLASH之明天的学习计划</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/142877.html" target="_blank">解决RPM包依赖的几种方法</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/426646.html" target="_blank">flexslider+Ajax绑定加载</a></li></ul> </div> <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 }); </script> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div> <div class="g-box3 u-3"> <div class="t-1">热点阅读</div> <ul class="b-box2"></ul> </div> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div> </div> <div class="cl"></div> </div> <div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div> <div class="footer"> <p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p> <p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p> <p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p> <p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p> </div> </body> </html>

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

然后先说个简单点的，，文本框的那个组件。 发表评论

然后先说个简单点的，，文本框的那个组件。

发表评论