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 相关文章推荐
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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 IPV6正则表达式验证代码
2010/02/16 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
CURL状态码列表(详细)
2013/06/27 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
js使用心得分享
2015/01/13 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
详细介绍Python的鸭子类型
2016/09/12 Python
Python排序算法实例代码
2017/08/10 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
python入门教程之基本算术运算符
2020/11/13 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
市场营销管理制度
2014/01/29 职场文书
节能环保演讲稿
2014/08/28 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
工作会议简报
2015/07/20 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书