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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
来自qq的javascript面试题
Jul 24 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
js select option对象小结
Dec 20 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 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 expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
深入解答关于Python的11道基本面试题
2017/04/01 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python开发入门——set的使用
2020/09/03 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
业务经理的岗位职责
2013/11/16 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
材料化学专业求职信
2014/07/15 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
2019经典广告词集锦!
2019/07/02 职场文书