基于 Spring Boot 博客系统开发（四）

基于 Spring Boot 博客系统开发（四）

本系统是简易的个人博客系统开发，为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发（三）👈👈

阅读排行榜实现

阅读排行榜实现涉及到联表查询，主要有两种方式，一种自定义SQL查询，另一种循环查询。
两种方式可以参考这篇文章：springboot 联表查询。
这里主要以第一种查询来实现。
阅读排行榜主要涉及两个表分别article表和statistic表，两个表的关系图为一对一：

接下来使用自定义SQL方式来实现该功能。

1、创建VO包和热门文章类，VO表示视图对象

@Data
public class HotArticleVO {
    private Long id;
    private String title;
    private Integer hits;
}
1
2
3
4
5
6

2、编写mapper.xml文件，在ArticleMapper.xml 添加查询SQL

<mapper namespace="cn.qvtu.web.mapper.ArticleMapper">

    <resultMap id="HotArticleVOResult" type="HotArticleVO">
        <id property="id" column="id">id>
        <result property="title" column="title">result>
        <result property="hits" column="hits">result>
    resultMap>
    
    <select id="selectHotArticle" resultMap="HotArticleVOResult">
        SELECT a.id, a.title,s.hits FROM t_article a LEFT JOIN t_statistic s ON s.article_id = a.id order by s.hits desc
    select>
    
mapper>
1
2
3
4
5
6
7
8
9
10
11
12
13

这里type=“HotArticleVO” 没有写全包名路径，需要配置XML映射文件中指定的实体类别名路径

# 配置XML映射文件中指定的实体类别名路径
mybatis-plus.type-aliases-package=cn.qvtu.web.domain,cn.qvtu.web.vo
1
2

3、Mapper类添加执行方法，跟select id一致

@Mapper
public interface ArticleMapper extends BaseMapper<Article> {

    public List<HotArticleVO> selectHotArticle();
    
}
1
2
3
4
5
6

4、Service 接口也添加对应调用方法

IArticleService 接口

public interface IArticleService extends IService<Article> {

    public List<HotArticleVO> selectHotArticle();

}

1
2
3
4
5
6

ArticleServiceImpl 实现类

@Service
public class ArticleServiceImpl extends ServiceImpl<ArticleMapper, Article> implements IArticleService {

    @Autowired
    private ArticleMapper articleMapper;

    @Override
    public List<HotArticleVO> selectHotArticle() {
        return articleMapper.selectHotArticle();
    }
}
1
2
3
4
5
6
7
8
9
10
11

5、Controller 调用articleService.selectHotArticle获取热点文章集合

HomeController.java

 @RequestMapping("/")
    public String home(@RequestParam(defaultValue = "1") Integer pageNum, Model model){
        PageHelper.startPage(pageNum, 5);
        List<Article> articleList = articleService.list();
        PageInfo<Article> articlePage = new PageInfo<>(articleList);
        model.addAttribute("articlePage",articlePage);

        PageHelper.startPage(1, 10);
        List<HotArticleVO> hotArticleList = articleService.selectHotArticle();
        model.addAttribute("hotArticleList",hotArticleList);

        return "client/index";
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

6、前端使用thymeleaf渲染

    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>阅读排行榜span>h2>
            <div style="text-align: left">

                <th:block th:each="article,stat:${hotArticleList}" >
                    <a  style="font-size: 15px;" th:href="${'/article/'+article.id}">[[${stat.count}]]、[[${article.title}]]([[${article.hits}]])a>
                    <hr style="margin-top: 0.6rem;margin-bottom: 0.4rem" />
                th:block>

            div>
        div>
    div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

7、实现效果