使用nuxt,express,mysql,nginx创建个人博客系列-19

评论实现

评论实现我们得需要获取用户的名称和邮箱，所以我们使用一个弹框是实现，当用户没登录想要评论时，我们会弹出让用户添加用户名和邮箱的弹框。 如图：
上一章我们有引入了comment和commentList组件，我直接贴出代码让大家参考 目录：components/comment.vue

<template>
  <transition name="comment-fade">
  <div class="comment-box" @click.self="hideModel">
    <transition name="comment-slide">
      <div class="comment-center" v-show="show">
        <slot></slot>
      </div>
    </transition>  
  </div>
  </transition>
</template>
<script>
export default {
  data(){
    return {
      show:false
    }
  },
  methods:{
    hideModel(){
      this.$emit('hideCommentBox')
    }
  },
  mounted(){
    this.show=true;
  }
}
</script>

目录：components/commentlist.vue

<template>
    <ul>
      <li v-for="(item,index) in list" :class="['uu'+index]" :key="item+index" v-if="list.length" >
          <div class="comment-list-box-main">
            <div class="comment-list-box-main-content">{{item.content}}</div>
            <div class="clearfix comment-list-box-main-name">
              <div>{{item.username}}</div>
              <div>{{moment(item.created_at).format('YYYY-MM-DD HH:mm')}}</div>
              <div class="comment-reply-btn" v-if="childIndex+1<reply_num" @click="setPid({ev:$event,id:item.id,replyIndex:childIndex+1,orginDataIndex:index})">回复</div>
            </div>
          </div>
          <commentlist :childIndex="childIndex+1" v-if="item.commentList && item.commentList.length && childIndex+1<reply_num" @setpid="setPid" :list="item.commentList" ></commentlist>  
      </li>
    </ul>
</template>

<script>
export default {
  name: 'commentlist',
  data(){
    return {
      reply_num:5 //控制评论层级，理论可以无限级，我把他限制到5级评论
    }
  },
  props: {
    list: {
      type:Array,
      default(){
        return [];
      }
    },
    childIndex:{
      type:Number,
      defualt:0
    }
  },
  methods:{
    setPid(obj){
      // if(obj && obj.ev && obj.ev.target){
       let arr = [];
       var ali = ($(obj.ev.target).parents('li'))
       ali.each((index,item)=>{
         arr.push($(item).attr('class').replace('uu',''))
       })

       this.$emit('setpid',{
        ev:obj.ev,
        id:obj.id,
        orginDataIndex:arr.reverse()
        });
      // }
    },
    getParentNode(tar){
      let domNode = [];

      function getParent(tar){
        if(tar.parentNode){
          domNode.push(tar.parentNode);
          getParent(tar.parentNode)
        }
      }
      getParent(tar);
      return domNode;
    }
  }
}
</script>

评论接口
目录：server/api/articles.js

router.post('/article/addComment',async(req,res,next)=>{
  let {articles_id,p_id,content,username,email} = req.body;
  let sql = `insert into comments set ?`
  let params = {
    articles_id,
    p_id,
    content,
    username,
    email,
  }
  let myConnect = await mysql.getConnect();
  let comment = await mysql.query(myConnect, sql,params);
  await mysql.release(myConnect);

  res.send(util.resSuccess({
    data:comment
  }))
})

上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-18
下一篇-使用nuxt,express,mysql,nginx创建个人博客系列-20