博客时间轴_按时间分类功能实现

MySQLMyBatisThymeleafSpringBoot

发布日期:2020-05-16 09:55:29

阅读量:175

所属分类: SpringBoot

今天记录一下博客按时间归档功能的思路以及具体的实现步骤。
先上效果图：

![](http://image.linkaiblog.top/时间轴_2020051610490649SS.png)

**主要的解决过程有 2 个：**

- 第 1 个是通过 MySQL 的查询语句，统计不同时间段内的博客数量及内容，然后返回数据给前端。

- 第 2 个就是结合前端的 Thymeleaf 模版引擎提供的一些日期格式化工具，根据后端提供的数据，实现博客的按时间归档。

**这里仅仅提供我的一种思路。因为每个人的数据表的结构不太一样，这里只能提供一种思路供大家参考。**

**只要思想不滑坡，办法总比困哪多！**

### 通过 MySQL 查询将数据归档
首先，我们存在数据库中的时间是精确到秒的，如下图所示：
![](http://image.linkaiblog.top/时间轴_2020051610431343SS.png)
#### （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
```
查询结果如下图所示：

![](http://image.linkaiblog.top/时间轴_2020050311253025SS.png)

这样，我们就能获得每个月份下的博客总数有多少，基本实现了按照月份归档。

#### （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;
```
查询结果如图所示：

![](http://image.linkaiblog.top/时间轴_202005031113001SS.png)

到这里我们的思路就很明确了：

**第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>

<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>
```

JackLin的博客

博客时间轴_按时间分类功能实现