springBoot+vue实现类QQ评论功能

        本文将讲如何使用一个评论功能。本文的评论功能，是我自己写的一个网站的中的评论，所以大家可以先看看效果，地址：http://www.toheart.xin（已被注销）。好了废话不说直接开讲。

       使用技术介绍：后端使用了springBoot+mybatis。前端使用了vue.js+element框架。数据库使用的是mysql。

       关于后端：

      一：首先数据库的设计

      

     说明：commentId是该表的主键，fatherId是和commentId自关联的外键。子评论的fatherId就是父评论commentId。这样设计是为了方便递归查询。添加评论的功能就此省略，本文主要讲如何展示所有评论。

     二、mybatis设计

      1、mapper.java

    List getCommentList(@Param("articleId") int id,@Param("articleType") int articleType);

    List getCommentChild(int commentId);

说明： getCommentList方法是通过文章的id和文章的类型来查询所有评论，getCommentChild方法是查处该评论的所有子评论 

        2、mapper.xml 

        
        
    
    
        select * from comment c ,user u where c.userId=u.userId and c.articleId=#{articleId} and c.articleType=#{articleType} and c.fatherId=0 order by c.commentTime desc
    
    
        
        
    
    
        select * from comment  c ,user u where c.userId=u.userId and fatherId=#{commentId} order by c.commentTime desc
    

      说明：mapper.xml中使用了resultMap，目的是使用嵌套结果的方式实现一对多的查询（如若不了解请先了解resultMap的相关知识，提示很重要）。第一个resultMap的目的是查询出所有顶层评论及其顶层评论下的子评论，第二个resultMap的目的是递归查询（自循环）出所有的子评论。

  三、vue设计（使用的是element框架）

          我是将评论块设置成了一个组件，这个组件递归的将所有的评论都展示出来，详细代码如下：

          

 

  使用这个组件使用的方式如下：

 changeCommentList (data) {
      this.commentList = data
 },

展示效果：详情展示请看：http://www.toheart.xin（已被注销）

 

说明：这个评论做的比较简单，最重要的是要理清思路，多去参考其他网站的评论功能，这样自己也会做出这个功能的。

          这个项目由于工作原因（懒惰的借口）没有继续下去，加上当时能力有限，所以这个评论的功能可能也有很多bug，这个简单demo仅供借鉴。 附上GitHub地址，希望对你有所帮助。只要有心，一切皆有可能！

        http://www.toheart.xin  ---》这个网站已被注销。

github地址：Java： https://github.com/xsh520/toheartVueH.git

                     vue：https://github.com/xsh520/toheart-portal.git