首页手记 Vue.js实现文章评论和回复评论功能

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

标签：

Vue.js

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

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

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">你回复&nbsp;{{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}}&nbsp;&nbsp;回复&nbsp;&nbsp;{{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请求，完成这个评论功能。

要期末了。。。真的怕挂科。。。。

点击查看更多内容