Spring Boot入门（第三十一章）：博客首页

之前我们做了一个首页，那是面向管理员和博客作者的，是后台首页，我们还需要一个前台首页，即博客首页来给普通用户进行文章的浏览，或者文章评论，一般评论还需要用户进行登录。我们先来完成博客首页。

1、设计布局

博客首页布局有很多种，自己设计或者参考别的博客设计都行，这里我们采用一个常见的简单布局。

2、添加页面

测试

这里笔者就不再分组件了，因为现在这种前端代码编写方式，不好自定义Vue组件，做iframe又不友好，所以这里就将首页所有内容写到这一个页面里面。

3、添加文章分类导航

我们先添加一个后台请求，用来返回文章分类树

接下来我们写页面，理论上我们的分类是支持无限层级，前端我们应该使用递归的方式以支持任意层级，但必须用到vue组件封装，或者使用freemarker自定义递归函数，比较麻烦，我们的重点不在这，所以这里我们最多只显示3个层级，即写死层级。一般情况下，目录导航也不会太深。

另外博客上面的分类导航理论上其实也是属于菜单的一种，我们可以在菜单上加上一个类型属性，不同类型的菜单用在不同的地方。这样更加灵活，我想显示哪些分类，我配置相应的菜单项即可。这里我们暂时先不做修改，将所有分类进行显示。

页面效果

我们再添加一个select事件监听方法，到时选中一个目录的时候，跳到对应的文章分类页面

4、文章列表

页面效果

我们来添加分页

页面效果

然后我们再来完善文章列表内容。文章列表页面，一般都是显示摘要信息，摘要信息可以是作者自己写的，也可以是系统根据文章内容自动截取的。如果是自动截取，这里面有个地方要注意，一般我们的文章内容都是富文本，富文本里都是包含html标签的，截取的时候，一般我们先去掉html标记再处理。

文章列表页面一般还会显示文章的发布时间，文章的作者，文章的分类。

这里我们的作者显示的id，这显然是不合适的。我们可以在前端根据id去查询用户，但是这样性能较低，每篇文章都会发送一个请求，所以我们还是在后台先查出来。

一般来说我们要在实体里面增加一个user属性，设置成@Transient，但是我们Post里面之前有个author属性，author属性是已经废弃了的，所以我们可以直接使用这个属性。

文章应该点击标题能跳到文章详情页面，点击分类也可以跳到具体的分类页面，这里暂时先不处理。

5、热门文章

首先我们需要一个属性来记录每篇文章的浏览量，我们在Post里面新增一个Integer的views属性，给个默认值0。

然后按照views排序，取前面10篇文章。

页面效果

6、版权信息

版权信息，包括博客标题，一般都是后台可配置的，这里我们还没做，暂时占个位。

7、总结

这节主要讲了怎么做博客首页，因为我们很多功能都还没完成，如评论，所以这些就还没做。主要还是了解这么个开发流程吧。

代码：

https://github.com/www15119258/springboot-study/tree/branch31