springboot+vue前后分离实现仿qq空间评论功能

            <dependency>            <groupId>mysqlgroupId>            <artifactId>mysql-connector-javaartifactId>            <scope>runtimescope>        dependency>
        <dependency>            <groupId>org.mybatis.spring.bootgroupId>            <artifactId>mybatis-spring-boot-starterartifactId>            <version>2.1.1version>        dependency>
        <dependency>            <groupId>ch.qos.logbackgroupId>            <artifactId>logback-coreartifactId>            <version>1.1.3version>        dependency>        <dependency>            <groupId>ch.qos.logbackgroupId>            <artifactId>logback-accessartifactId>            <version>1.1.3version>        dependency>        <dependency>            <groupId>ch.qos.logbackgroupId>            <artifactId>logback-classicartifactId>            <version>1.1.3version>        dependency>
                <dependency>            <groupId>org.slf4jgroupId>            <artifactId>slf4j-apiartifactId>            <version>1.7.25version>        dependency>        <dependency>            <groupId>org.slf4jgroupId>            <artifactId>slf4j-simpleartifactId>            <version>1.7.25version>            <scope>compilescope>        dependency>
                <dependency>            <groupId>io.springfoxgroupId>            <artifactId>springfox-swagger2artifactId>            <version>2.9.2version>        dependency>        <dependency>            <groupId>io.swaggergroupId>            <artifactId>swagger-modelsartifactId>            <version>1.5.21version>        dependency>        <dependency>            <groupId>com.github.xiaoymingroupId>            <artifactId>swagger-bootstrap-uiartifactId>            <version>1.9.3version>        dependency>
                <dependency>            <groupId>com.alibabagroupId>            <artifactId>fastjsonartifactId>            <version>1.2.62version>        dependency>
        <dependency>            <groupId>org.springframework.bootgroupId>            <artifactId>spring-boot-starter-testartifactId>            <scope>testscope>            <exclusions>                <exclusion>                    <groupId>org.junit.vintagegroupId>                    <artifactId>junit-vintage-engineartifactId>                exclusion>            exclusions>        dependency>    dependencies>
    <build>        <plugins>            <plugin>                <groupId>org.springframework.bootgroupId>                <artifactId>spring-boot-maven-pluginartifactId>            plugin>        plugins>    build>project>

server.port=8002spring.datasource.url=jdbc:mysql://xxx.xxx.xxx.xxx:3306/demo?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghaispring.datasource.username=xxxxxxspring.datasource.password=xxxxxxspring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

package com.example.demo.controller;import com.example.demo.service.CommonService;import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.*;import java.util.*;
@Api(description = "文章评论")@RequestMapping("/common")@RestControllerpublic class CommonController {    @Autowired    private CommonService commonService;    @ApiOperation(value = "获取文章评论列表", notes = "获取文章评论列表接口")    @GetMapping("/replyList/{comId}")    public Map getReplyList(@PathVariable("comId") int comId) {        List list = commonService.queryReplyList(comId);        Map resMap = new HashMap();        resMap.put("STATUS", "0000");        resMap.put("DATA", list);        return resMap;    }    @ApiOperation(value = "删除评论", notes = "删除评论接口")    @PostMapping("/removeReply/{id}")    public Map deleteReply(@PathVariable("id") int id) {        commonService.deleteReply(id);        Map map = new HashMap();        map.put("STATUS", "0000");        return map;    }}

<template>  <div class="comment-wrap">    <div v-if="myComment.length" class="comment-list">      <h4>热门评论h4>      <div>        <div v-for="(item, index) in myComment" :key="item.id" class="comment-item">          <div class="top-wrap">            <div class="top-left">              <el-image :src="checkImg(item.userId)" alt="" lazy class="top-left-avatar"> el-image>              <div class="top-left-con">                <div class="top-left-con-title">                  <h3>{{ item.userName }}h3>                div>                <div class="top-left-con-time">{{ item.updateTime | moment('YYYY-MM-DD HH:mm') }}div>              div>            div>            <div class="top-right" v-if="loginId === item.userId">              <div class="top-right-item" @click="handleDelete(index)">                <img src="@/assets/delete.png" alt="" />              div>            div>          div>          <div class="label">            {{ item.msg }}          div>
          <div v-if="item.newSub && item.newSub.length" class="reply-wrap">            <div v-for="(reply, i) in item.newSub" :key="reply.id" class="reply-item">              <div class="top-wrap">                <div class="top-left">                  <el-image :src="checkImg(reply.userId)" alt="" lazy class="top-left-avatar"> el-image>                  <div class="top-left-con">                    <div class="top-left-con-title">                      <h3>{{ reply.userName }}h3>                                          div>                    <div class="top-left-con-time">{{ reply.updateTime | moment('YYYY-MM-DD HH:mm') }}div>                  div>                div>                <div v-if="loginId === reply.userId" class="top-right">                  <div class="top-right-item" @click="handleDelete(index, i + 1)">                    <img src="@/assets/delete.png" alt="" />                  div>                div>              div>              <div class="label">                {{ reply.msg }}              div>            div>            <div v-if="item.subList.length > 1">              <div v-if="!item.isMoreReply" class="showMoreReply" @click="showMoreReply(true, index)">查看更多回复div>              <div v-else class="showMoreReply" @click="showMoreReply(false, index)">收起div>            div>          div>        div>      div>    div>    <el-pagination      background      :page-size="pageSize"      :page-count="pageNo"      layout="prev, pager, next"      :total="allComment.length"      @current-change="handleChangePage"      @pre-click="handlePrePage"      @next-click="handleNextPage"    >    el-pagination>  div>template>
<script>import { mapGetters } from 'vuex';import axios from 'axios';export default {  components: {},  props: {},  data() {    return {      textarea: '',      isMoreComment: false,      replyCon: '',      myComment: [],      allComment: [],      loading: false,      pageNo: 1,      pageSize: 5    };  },  computed: {    ...mapGetters(['loginId'])  },  watch: {},  created() {},  mounted() {    this.getData();  },  methods: {    checkImg(id) {      if (id === 1) {        return require('@/assets/face.png');      } else {        return require('@/assets/comment.png');      }    },    showMoreReply(type, index) {      this.myComment[index].isMoreReply = type;      if (type) {        this.myComment[index].newSub = this.myComment[index].subList;      } else {        this.myComment[index].newSub = this.myComment[index].subList.slice(0, 1);      }    },    handleDelete(index, i) {      console.log(index, i, this.myComment);      let id = 0;      if (i) {        id = this.myComment[index].newSub[i - 1].id;        this.myComment[index].newSub.splice(i - 1, 1);      } else {        id = this.myComment[index].id;        this.myComment.splice(index, 1);      }      axios({        method: 'post',        url: `http://xxx.xxx.xxx.xxx:8002/common/removeReply/${id}`      }).then(res => {        console.log(res, 'res');      });    },    handleChangePage(val) {      console.log(val, 'val');      this.pageNo = val;      let begin = (val - 1) * this.pageSize;
      this.myComment = this.allComment.slice(begin, begin + this.pageSize);    },    handlePrePage() {      if (this.pageNo > 1) {        this.pageNo--;      }      let begin = (this.pageNo - 1) * this.pageSize;      this.myComment = this.allComment.slice(begin, begin + this.pageSize);    },    handleNextPage() {      this.pageNo++;      let begin = (this.pageNo - 1) * this.pageSize;      this.myComment = this.allComment.slice(begin, this.pageSize);    },    getData() {      axios({        method: 'get',        url: `http://xxx.xxx.xxx.xxx:8002/common/replyList/1`      }).then(res => {        console.log(res, 'res');        let data = res.data.DATA;        const list = data.map(item => {          return {            ...item,            newSub: item.subList.slice(0, 1),            showReply: false,            isMoreReply: false,            isMoreComment: false          };        });
        console.log(list, 'list');        this.allComment = [].concat(list);        this.myComment = list.slice(this.pageNo - 1, this.pageSize);      });    }  }};