博客项目目录： 请戳这里

准备

原来的文章评论：

需要覆盖原来的评论模板内容，如果评论达到一定数量，进行分页展示

思路：由于评论内容包括用户信息和评论信息，所以可以联合评论表和用户表进行查询

1.在control层定义查询方法

根据分页，文章id，用户id，展示顺序（按发表时间降序）等条件进行查询，并将查询结果存放到results，注入到前端，命名为commentPageData

public String detail(@PathVariable(name = "id") Long id) {
        //查询文章详情
        PostVo vo = postService.selectOnePost(new QueryWrapper<Post>().eq("p.id", id));
        Assert.notNull(vo, "文章已被删除");
        req.setAttribute("post", vo);
        req.setAttribute("currentCategoryId", vo.getCategoryId());

        //查询文章评论信息
        // 1分页，2文章id，3用户id，排序
        int pn = ServletRequestUtils.getIntParameter(req, "pn", 1);
        int size = ServletRequestUtils.getIntParameter(req, "size", 2);
        IPage<CommentVo> results=commentService.paing(new Page(pn, size),vo.getId(),null,"created");
        req.setAttribute("commentPageData", results);
        return "/post/detail";
    }

2.自定义CommentVo类

CommentVo包括评论信息和部分用户信息

@Data
public class CommentVo extends Comment {
    private Long authorId;
    private String authorName;
    private String authorAvatar;
}

3.在BaseController注入CommentService

public class BaseController {
    @Autowired
    HttpServletRequest req;

    @Autowired
    PostService postService;

    @Autowired
    CommentService commentService;
}

4.在CommentService定义查询接口

public interface CommentService extends IService<Comment> {

    IPage<CommentVo> paing(Page page, Long postId, Long userId, String order);
}

5.在service的impl层实现paing方法

在wrapper设置查询条件，按文章id，用户id和降序进行查询

@Service
public class CommentServiceImpl extends ServiceImpl<CommentMapper, Comment> implements CommentService {

    @Autowired
    CommentMapper commentMapper;

    @Override
    public IPage<CommentVo> paing(Page page, Long postId, Long userId, String order) {
        return commentMapper.selectComments(page,new QueryWrapper<Comment>()
                .eq(postId!=null,"post_Id",postId)
                .eq(userId!=null,"user_Id",userId)
                .orderByDesc(order!=null,order)
        );
    }
}

6.在CommentMapper定义查询接口

@Component
public interface CommentMapper extends BaseMapper<Comment> {

    IPage<CommentVo> selectComments(Page page,@Param(Constants.WRAPPER) QueryWrapper<Comment> wrapper);
}

7.在CommentMapper.xml进行sql设计

8.打断点进行测试

查看数据库，发现确实对id为1的文章进行了这样的评论

9.填充detail.ftl的内容

主要将后端查询到的commentPageData传到模板中，并且将之前定义的分页信息引过来，是否楼主的判断，通过评论用户id和文章发表者id进行对比。

<ul class="jieda" id="jieda">
    
   <#list commentPageData.records as comment>
        <li data-id="${comment.id}" class="jieda-daan">
          <a name="item-${comment.id}"></a>
            <div class="detail-about detail-about-reply">
          <a class="fly-avatar" href="/user/${post.authorId}">
          <img src="${post.authorAvatar}" alt="${post.authorName} ">
            </a>
            <div class="fly-detail-user">
          <a href="/user/${post.authorId}" class="fly-link">
            <cite>${post.authorName}</cite>
            </a>
        
            <#if comment.user_id = post.user_id><span>(楼主)</span></#if>
        
            </div>
        
            <div class="detail-hits">
            <span>${timeAgo(comment.created)}</span>
            </div>
        
            </div>
            <div class="detail-body jieda-body photos">
            <p>${comment.content}</p>
            </div>
            <div class="jieda-reply">
            <span class="jieda-zan zanok" type="zan">
          <i class="iconfont icon-zan"></i>
            <em>${comment.voteUp}</em>
            </span>
            <span type="reply">
                        <i class="iconfont icon-svgmoban53"></i>
                        回复
                      </span>
            <div class="jieda-admin">
              <span type="edit">编辑</span>
              <span type="del">删除</span>
            </div>
            </div>
        </li>
   </#list>
    
</ul>
<@paging commentPageData></@paging>

10.测试结果

id为1的文章评论：

id为5的文章评论：

参考资料：

https://github.com/MarkerHub/eblog