4
JackLin的博客
首页
分类
标签
生活
时间轴
关于我
友链
搜索
管理员
博客时间轴_按时间分类功能实现
MySQL
MyBatis
Thymeleaf
SpringBoot
发布日期:
2020-05-16 09:55:29
阅读量:
175
所属分类:
SpringBoot
今天记录一下博客按时间归档功能的思路以及具体的实现步骤。 先上效果图:  **主要的解决过程有 2 个:** - 第 1 个是通过 MySQL 的查询语句,统计不同时间段内的博客数量及内容,然后返回数据给前端。 - 第 2 个就是结合前端的 Thymeleaf 模版引擎提供的一些日期格式化工具,根据后端提供的数据,实现博客的按时间归档。 **这里仅仅提供我的一种思路。因为每个人的数据表的结构不太一样,这里只能提供一种思路供大家参考。** **只要思想不滑坡,办法总比困哪多!** ### 通过 MySQL 查询将数据归档 首先,我们存在数据库中的时间是精确到秒的,如下图所示:  #### (1)通过 year,month等函数将时间中的年,月分离出来 对应的 SQL 语句1: **注意:由于这里需要统计博客的数量,所以不能实现将每条博客记录的具体时间查询出来,这得借助第 2 个查询语句。** ``` select year(javaweb_myblog.blog.createtime) as 'year', month(javaweb_myblog.blog.createtime) as 'month', count(*) as 'count' from javaweb_myblog.blog group by year(javaweb_myblog.blog.createtime) desc, month(javaweb_myblog.blog.createtime) desc ``` 查询结果如下图所示:  这样,我们就能获得每个月份下的博客总数有多少,基本实现了按照月份归档。 #### (2)MySQL 查询每条具体的博客,将时间一并查询出来 对应的 SQL 语句2: **注意:这里实际只需要查询每条博客记录的具体时间即可,对应的年份和月份我们都可以在 Thymeleaf 模版中通过具体时间获得年份,月份。当然,我们也可以如下所示,在 SQL 层面查询出年份和月份。** ``` select year(javaweb_myblog.blog.createtime) as 'year', month(javaweb_myblog.blog.createtime) as 'month', javaweb_myblog.blog.createtime as 'time', javaweb_myblog.blog.btitle as 'title', javaweb_myblog.blog.bid as 'bid' from javaweb_myblog.blog order by javaweb_myblog.blog.createtime desc; ``` 查询结果如图所示:  到这里我们的思路就很明确了: **第1个查询可以将博客按照月份归档,那么第2个查询的结果可以和第1个查询的结果做比较,即在 Thymeleaf 中显示时,如果月份相同,即显示该条记录,表明该条记录属于当前月份下分布的博客。** 那么下面我们给出完整的代码 ### 完整代码展示 代码只给出了关键代码,service和dao层的代码没有贴出来(dao层代码可以参考前面给出的 SQL 语句执行编写);不关键的 html 代码也没有贴出来。 > Controller 层 ``` @GetMapping("/Timeline") public String toTimeline(Model model) { List<Map<String, Object>> listWithCount = blogService.queryTimeLingWithCount(); System.out.println("listWithCount size = " + listWithCount.size()); // 对应着第1个查询语句 List<Map<String, Object>> listWithOutCount = blogService.queryTimeLingWithOutCount(); System.out.println("listWithOutCount size = " + listWithOutCount.size()); // 对应着第2个查询语句 model.addAttribute("listWithCount", listWithCount); model.addAttribute("listWithOutCount", listWithOutCount); return "timeline"; } ``` > 前端HTML页面 ``` <div class="history-date" th:each="itemWithCount:${listWithCount}"> <ul> <h2 class="first"> <a href="#" th:text="${itemWithCount.get('year')} + '年' + ${itemWithCount.get('month')} + '月' + '(' + ${itemWithCount.get('count')} + ')'"></a> </h2> <!-- 关键代码(这个 if 判断是关键):查询1和查询2比较,要求月份和年份相同,这将这条记录展示出来 --> <li class="green" th:each="itemWithOutCount:${listWithOutCount}" th:if="${itemWithOutCount.get('year')} == ${itemWithCount.get('year')} and ${itemWithOutCount.get('month')} == ${itemWithCount.get('month')}"> <h3> [[ ${itemWithOutCount.get('month')} + '月' + ${#dates.day(itemWithOutCount.get('time')) + '日'} ]] <span th:text="${#dates.hour(itemWithOutCount.get('time'))} + '时' + ${#dates.minute(itemWithOutCount.get('time')) + '分'}"></span> </h3> <dl> <dt> <a th:href="@{/article/} + ${itemWithOutCount.get('bid')}" th:text="${itemWithOutCount.get('title')}" target="_blank"></a> </dt> </dl> </li> </ul> </div> ```