当我们点击一个文章分类时,应该进入到一个新页面,我们称为文章分类页面,文章分类页面跟首页类似,一般顶部导航是一致的,正文部分也是文章列表,但是所有文章都是属于该文章分类的(一般包括子类)。右边栏的热门文章也可以改为该分类下的热门文章,下面我们来实现。
1、添加页面
在CmsController中增加

将index复制一份改名为categoryIndex

我们修改一下首页


点击首页的导航,或者文章里面的分类,看能不能正常跳转

如果没有问题,将分类页面的导航也做相同的修改。
2、初始化分类信息
修改CmsController

修改分类页面,增加category属性,存储当前分类信息

页面载入的时候初始化分类信息

这里文章列表将会等分类信息初始化完成以后再查询,避免浏览器传的分类id是一个无效id。

3、查询分类下面的文章
现在我们需要增加一个后台方法,根据分类id,查询分类及其子类下面的所有文章。不过首先我们需要根据分类id获取下面所有分类,之前的方法只能获取直接子类,我们先写这个方法


这里使用了递归查询,效率是比较低的,需要执行多次sql,之前介绍过,使用路径枚举是比较好的方法。
我们再再service里面新增一个根据分类id查询文章的方法


CmsController

修改页面查询文章列表方法

4、分类热门文章


5、总结
这节介绍了怎么完成文章分类页面,以及怎么跟首页串起来,这里我们分类页面使用的地址是http://localhost:8080/category/6 这种形式,直接传分类的id,这种url对搜索引擎SEO是不太友好的,一般我们会对每个category定义一个url短地址,例如日记分类diary,编程program,java可以直接使用java,我们访问java分类页面的时候就可以使用http://localhost:8080/category/program/java这种形式,这方便SEO收录,所以我们需要根据program/java找到对应的分类id。
代码:
https://github.com/www15119258/springboot-study/tree/branch32
网友评论