评论功能如何实现？

社会在发展，时代在进步

现在随随便便一个APP就用评论功能吧，那么如何实现评论功能哪？
第一步，写好样式 布局

 <van-tab title="评论" class="tab">  

        <p class="commentText">评论({{ commentTotal }})</p>
        <div class="commentsList">
          <div class="comments" v-for="item in commentsList">
            <div class="top">
              <img :src="item.headPortrait | getImgPath" alt="" :onerror="defaultAvatar">
              <div class="text">
                <div class="name">{{ item.realName }}</div>
                <div class="time">
                  <span>{{ item.crtTime }}</span>
                  <span v-if="item.isDel" class="delete" @click="deleteComment(item)">删除</span>
                </div>
                <div class="con">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </div>
       

    <div class="commentBtn">
      <van-cell-group>
        <van-field v-model="commentText" placeholder="发表您的精彩评论" >
          <template #button>
            <van-button size="small" type="primary" @click="submitComment">发送</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </div></van-tab>

然后我们需要调取接口来实现

// 新增评论
submitComment(){
 let ths = this//给this赋值给一个新变量
      ths.$openLoading();//加载动画
      //接口调用传参
      this.$axios.post(URL.hotWelfare.addComment, {
        dataId: this.id,//传id
        content: this.commentText//文本框里输入的内容
      }).then(res => {
        this.$closeLoading();
        if (res && res.code == 1) {//上传成功后
          this.commentText = ''//让这个输入框为空
          this.getCommentsList()//调用一下评论列表
        } else {
          ths.isLoadError = true;
        }
      }).catch(error => {
        this.$closeLoading();
      });
},

//评论列表
getCommentsList(){
let ths = this
      // ths.$openLoading();
      this.$axios.post(URL.hotWelfare.worksComment, {
        dataId: this.id,//id
        page: 1,//页数
        pageSize: 10//每页多少条
      }).then(res => {
        this.$closeLoading();
        if (res && res.code == 1) {
          this.commentsList = res.data.rows//评论详情数据
          this.commentTotal = res.data.total//评论条数
          console.log(this.commentsList,"getCommentsList");
        } else {
          ths.isLoadError = true;
        }
      }).catch(error => {
        // this.$closeLoading();
      });
},

// 删除自己的评论
deleteComment(item){
  let ths = this
      Dialog.confirm({
        title: '提示',
        message: '是否确认删除评论！',
      }).then(() => {
        ths.$openLoading();
        this.$axios.post(URL.hotWelfare.delMyComment, {
          id: item.id
        }).then(res => {
          this.getCommentsList()
          this.$closeLoading();
        }).catch(error => {
          this.$closeLoading();
        });
        })
},