springboot个人博客的构建(9)首页前端展示

本文详细介绍了前端开发中如何优化博客展示,包括增加博客描述、前端页面设计、控制层业务需求编写、分页数据处理、分类与标签管理,以及前端数据渲染等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先看看前端首页:http://localhost:8080/

从代码开始:

这里先看看之前的,增加一个博客描述,这用来展示一部分内容:

看看前端:

 


下來,我們進入到前端頁面。

这里,我们先看看控制层,然后根据控制层来写需求的业务:

 

这样就拿到分页的数据,放到model里面。然后在前端循环出来。


接下来,我们要拿到分类的列表。

整型,是为拿到多少数据,根据值取到列表的大小 

首先构建一个排序的对象。倒叙,按照博客数目的多少。
然后构建一个分页对象,参数:先取第一页,大小,排序上面定义了。
然后返回给findTop(pageable),让他去查数据库中的分类,按照什么查呢,size一会在控制层中定义。其他的按照上面定义的查。
findTop(pageable)这个我们要自己写

按照分类,每个博客数目的多少,由大到小排列。取前六个。


接下来看标签,这和和分类一样:

看业务层:


最新推荐:


上面是后端编写完成,接下来是前端数据的渲染。

遍历输出每页的内容。

获取标题,当你点击的时候,会进入整条博客的链接。

渲染描述的内容。链接字符串的方法。

获取用户头像,昵称,日期,浏览次数。格式化日期。

博客类型名字

首图。可以点击进去。

分页。没啥说的。

接下俩,看分类。

拿到集合的长度。

标签类似:

 

最新推荐:‘ 一样:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值