美食杰-------展示评论区内容

介绍：首先我们要拿到后台数据，来渲染视图，而后写点击事件来实现路由的跳转和数据的交互，拿到数据，渲染视图，让我们来看一看效果图：

 思路：

首先拿到数据，渲染视图，而后给输入框写上数据双向绑定，再给提交写上点击事件，使数据点击提交时展示在评论区

在data里面定义一个变量，让它为空，因为输入的是数字，可以写成字符串形式，写好之后，用v-model绑定这个变量在输入框，在下面的评论区写上v-for循环这个变量，再进行数据渲染。在数据挂载之前展示路由信息和视图的交互。

给提交写上一个点击事件，当事件触发时执行。

其中调用了封装好的两个方法getComments和postComment。

/**
 * 获取菜谱评论信息
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.menuId] - 指定菜谱的id
 * @returns
 */
export async function getComments(params){
  return await http.get('/menu/comment', {params});
}
/**
 * 提交菜谱评论信息
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.menuId] - 指定评论的菜谱id
 * @param {string} [params.commentText] - 评论内容
 * @returns
 */
export async function postComment(params){
  return await http.post('/menu/comment', params);
}

<template>
  <div class="comment-box">
    <h2>{{info.title}}的讨论</h2>
    <div class="comment-text">
      <a href="javascript:;" class="useravatar">
        <img :src="userInfo.avatar">
      </a>
      <div  >请先登录后，再评论<router-link to="">登录</router-link></div>
      
      <div class="comment-right">
        <el-input
          type="textarea"
          :rows="5"
          :cols="50"
          placeholder="请输入内容"
          v-model="commentText"
        >
        </el-input>
        <div class="comment-button" >
          <el-button 
            class="send-comment" 
            type="primary" 
            size="medium"
            @click="send"
          >提交</el-button>
        </div>
      </div>
    </div>
    <div class="comment-list-box">
      <ul class="comment-list">
        <li v-for="item in comments" :key="item.commentId">
          <a target="_blank" href="https://i.meishi.cc/cook.php?id=14026963" class="avatar">
           
          </a>
          <router-link :to="{name:'space',query:{userId:item.userInfo.userId}}" class="avatar">
            <img :src="item.userInfo.avatar">
            <h5>{{item.userInfo.name}}</h5>
          </router-link>
          <div class="comment-detail">
            <p class="p1">{{item.commentText}}</p>
            <div class="info clearfix">
              <span style="float: left;">{{item.createdAt}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {getComments,postComment} from '@/service/api';
export default {
  name: 'Comment',
  props:{
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data(){
    return {
      comments:[],
      commentText:''
    }
  },
  computed: {
    userInfo(){
      return this.$store.state.userInfo;
    }
  },
  async mounted(){
    let {menuId}=this.$route.query;
    // console.log("this.info.menuId",this.info.menuId)
    if(menuId){
     let data= await getComments({menuId:menuId});
     console.log(data)
     this.comments=data.data.comments;
    }

  },
  methods:{
    // 点击提交
      async send(){
        // console.log(111)
        let data=await postComment({menuId:this.info.menuId,commentText:this.commentText})
        console.log(data)
        this.comments.unshift(data.data.comments);
        this.commentText='';
      }
  }
}
</script>
<style lang="stylus">
.comment-box
  background-color #ffffff
  margin-top 20px
  padding 0 20px
  h2
    font-size 24px
    color #333
    height 66px
    line-height 66px
    border-bottom 1px solid #eee
  .comment-text
    margin-top 20px
    .useravatar
      margin-right 20px
      img 
        vertical-align top
        width 36px
        height 36px
    .comment-right 
      display inline-block
      width 80%
      .comment-button
        text-align right 
        margin-top 10px
        .send-comment
          background #ff3232
          border none
  .comment-list-box
    border-top 1px solid #eee
    margin-top 20px
    padding-top 30px

    ul li 
      border-bottom 1px solid #eee
      margin-bottom 20px
      .avatar
        height 82px
        width 50px
        overflow hidden
        display inline-block
        h5
          white-space nowrap
        img 
          height 50px
          width 50px
      .comment-detail
        display inline-block
        vertical-align top
        margin-left 20px
        width 80%
        p 
          margin 0
          font-size 14px
        .info
          margin-top 10px
          color #999
          .thumbs
            cursor pointer
            
            font-size 18px
          .thumbs-actve
            color red
      

</style>

注意：

send：是一个系统调用函数，用来发送消息到一个套接字中，和sendto，sendmsg功能相似。

send()函数只能在套接字处于连接状态的时候才能使用。（只有这样才知道接受者是谁）