山东大学软件学院暑期项目实训记录（五）

本文记录了在山东大学软件学院暑期项目中，我完成了读评论接口的实现过程，包括接口设计、编码实现及测试，详细阐述了关键步骤和技术要点。

实现了读评论接口

<template>
  <div class="container">
<!--    <div v-for="item in comments" >hh{
  
  {item.content}}</div>-->
    <div style="height: 50px">
      <!--        v-if="item.reply.length > 0"
                   @click="showCommentInput(item)"-->
      <div class="write-reply" style="height: 100%;position:absolute;top: 10px; right: 15px"   @click="showCommentInput1()">
        <i class="el-icon-edit"></i>
        <span class="add-comment">添加新评论</span>
      </div>
    </div>

    <transition name="fade">
      <div class="input-wrapper" v-if="showItem == true"  >
        <el-input class="gray-bg-input"
                  v-model="content"
                  type="textarea"
                  :rows="3"
                  autofocus
                  placeholder="写下你的评论">
        </el-input>
        <div class="btn-control" style="padding:30px ">
          <el-button style="position:absolute;right: 170px;" class="cancel" type="primary" round
                     @click="cancel">取消</el-button>
          <el-button style="position:absolute;right: 70px" class="btn" type="success" round
                     @click="commitComment1">确定</el-button>
        </div>
      </div>
    </transition>


    <div class="comment" v-for="item in comments" :key="item">

  <div v-if="item.parentId == 0">
      <div class="info">
        <img class="avatar" :src="item.iconurl" width="36" height="36"/>
        <div class="right">
          <div class="name" :content="item.username">{
  
  {item.username}}</div>
          <div class="date" :content="item.publishDate">{
  
  {item.publishDate}}</div>
        </div>
      </div>
      <div class="content" :content="item.content">{
  
  {item.content}}</div>
     <!-- <div class="control">
<span class="like" :class="{active: item.isLike}" @click="likeClick(item)">
<i class="iconfont icon-like"></i>
<span class="like-num">{
  
  {item.lik