详细页评论功能实现（个人博客）

详细页评论功能实现（个人博客）

一、编写dao层

@Mapper
public interface CommentMapper {
    int deleteByPrimaryKey(Long id);

    @Insert("insert into comment(user_id,article_id,content,created_at)" +
            " values(#{userId},#{articleId},#{content},#{createdAt})")
    int insert(Comment record);

    List<Comment> selectAll();

    List<Comment> queryComments(Long id);
}

二、绑定mapper配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.pang.dao.CommentMapper" >
  <resultMap id="BaseResultMap" type="comment" >
    <id column="id" property="id"/>
    <result column="user_id" property="userId" />
    <result column="article_id" property="articleId" />
    <result column="content" property="content" />
    <result column="created_at" property="createdAt" />
    <association property="user" resultMap="com.pang.dao.UserMapper.BaseResultMap">
      <id column="user_id" property="id"/>
    </association>
  </resultMap>
  <delete id="deleteByPrimaryKey" parameterType="java.lang.Long" >
    delete from comment
    where id = #{id}
  </delete>
  <update id="updateByPrimaryKey" parameterType="comment" >
    update comment
    set user_id = #{userId},
      article_id = #{articleId},
      content = #{content},
      created_at = #{createdAt}
    where id = #{id}
  </update>
  <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Long" >
    select id, user_id, article_id, content, created_at
    from comment
    where id = #{id}
  </select>
  <select id="selectAll" resultMap="BaseResultMap" >
    select id, user_id, article_id, content, created_at
    from comment
  </select>
  <select id="queryComments" resultMap="BaseResultMap" >
   select c.id,
       c.user_id,
       c.article_id,
       c.content,
       c.created_at,
       u.avatar,
       u.nickname
from comment c
         join user u on c.user_id = u.id
where c.article_id = #{id}
  </select>
</mapper>

三、编写service层

@Service
public class CommentService {

    @Autowired
    private CommentMapper commentMapper;

    public List<Comment> queryComments(Long id) {
        return commentMapper.queryComments(id);
    }

    public int insert(Comment comment) {
        return commentMapper.insert(comment);
    }

    public int delete(Long id) {
        return commentMapper.deleteByPrimaryKey(id);
    }
}

四、编写controller层

@RequestMapping("/")
public String index(@RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum, Model model) {
    PageHelper.startPage(pageNum,4);
    List<Article> articles = articleService.queryArticles();
    PageInfo<Article> pageInfo = new PageInfo<>(articles);
    model.addAttribute("pageInfo",pageInfo);
    List<Category> categories = categoryService.allCategories();
    model.addAttribute("types",categories);
    model.addAttribute("count",articleService.countArt());
    return "index";
}

五、绑定前端页面

  <div id="comment-container" class="ui bottom attached segment">
      <!--留言区域列表-->
      <div class="ui teal segment">
          <div class="ui comments">
              <h3 class="ui dividing header">Comments</h3>
              <div class="comment" th:each="comment:${article.commentList}">
                  <a class="avatar">
                      <img src="https://picsum.photos/100/100?image=1005">
                  </a>
                  <div class="content">
                      <a class="author" th:text="${comment.user.nickname}">Matt</a>
                      <div class="metadata">
                          <span class="date" th:text="${comment.createdAt}">今天下午 5:42</span>
                      </div>
                      <div class="text" th:text="${comment.content}">太赞了！ </div>
                      <div class="actions">
                          <a class="reply" th:href="@{/admin/delCom/{cid}/{aid}(cid=${comment.id},aid=${article.id})}">删除</a>
                      </div>
                  </div>
              </div>


          </div>
      </div>
      <form th:action="@{/admin/addCom/{id}(id=${article.id})}" method="post">
      <div class="ui form">
          <div class="field">
              <textarea name="content" placeholder="请输入评论信息....."></textarea>
          </div>
          <div class="fields">
              <div class="field  m-margin-bottom-small m-mobile-wide">
                  <button class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
              </div>
             
          </div>
      </div>
      </form>
  </div>