Springboot简单的crud(增删改查)+thymeleaf(html页面)+ pagehelper插件的使用进行分页。
欢迎来到半夏威风博客(第二篇)
你们喜欢的威威又回来了,最近没有更新博客,因为本小白也是工作了嘛
很多小白们不知道怎么分页,用传统的方法太复杂,那我今天就介绍一个插件pagehelper进行帮助我们完成分页,不难的,坑我都踩过了,放心!稳住不慌,吃口药!;
友情提示:→_→请盆友们,认认真真看完,!因为有很多盆友都没看完,就开始运行,或者不认真看,导致出现了许多问题!
首先第一步:pom 导入所需依赖,(你们是不是又心里嘀咕着说:又导入依赖。别~ 就导入一个好吧!)
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>
第二步:页面的东西(主页users.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style type="text/css">
table {border-collapse: collapse; font-size: 14px;
width: 80%; margin: auto}
table, th, td {border: 0px solid darkslategray;padding: 10px}
.btgn{
font-family: "Microsoft YaHei UI";
font-size: 16px;
color: #255e95;
background-color: #99CCFF;
text-align: center;
}
tr:nth-child(2n){
background-color:#FFCC99;
}
tr:nth-child(2n+1) {
background-color: #99CC99;
}
</style>
</head>
<body>
<div style="text-align: center">
<span class="span" style="color: darkslategray; font-size: 30px" >欢迎光临!</span>
<hr/>
<table class="list">
<tr>
<th class="btgn">id</th>
<th class="btgn">姓名</th>
<th class="btgn">班级</th>
<th class="btgn">年龄</th>
<th class="btgn">性别</th>
<th class="btgn">图片</th>
<th class="btgn">操作</th>
<th class="btgn">操作</th>
</tr>
<!-- <tr th:each="user : ${users}">-->
<tr th:each="user:${pageInfo.list}">
<td th:text="${user.id}">1</td>
<td th:text="${user.name}">张三</td>
<td th:text="${user.classes}">zhangsan</td>
<td th:text="${user.age}">20</td>
<td th:text="${user.sex} == 1 ? '男': '女'">男</td>
<td><a class="s"><img th:src="@{${user.img}}"/></a></td>
<!--<td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd')}">1980-02-30</td>-->
<!--<td th:text="${user.phone}">1</td>-->
<td><a th:href="@{'/delete/'+${user.id}}"><input type="submit" value="删除用户"></a></td>
<td><a th:href="@{'/update/'+${user.id}}"><input type="submit" value="修改用户"></a></td>
</tr>
<a href="Add1"><input type="submit" value="新增用户"></a>
<a href="Echse"><input type="submit" value="查看可视化数据"></a>
</table>
<p>当前 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span th:text="${pageInfo.pages}"></span> 页,共 <span th:text="${pageInfo.total}"></span> 条记录</p>
<a th:href="@{/all}">首页</a>
<a th:href="@{/all(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a>
<a th:href="@{/all(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a>
<a th:href="@{/all(pageNum=${pageInfo.pages})}">尾页</a>
</div>
</body>
</html>
注意上一页,下一页,哪些路径的请求 如果你用html页面和我之前的一模一样,那就需要改了,直接把这也代码复制就可以了
第三步:在我们之前查询全部学生信息的控制层加上点东西
@Controller
public class UserContorller {
@Autowired
private UserService userService;
private Object Direction;
@GetMapping("all")
public String all(Model model, @RequestParam(defaultValue = "1", value = "pageNum") Integer pageNum) {
PageHelper.startPage(pageNum, 10);
List<User> list = this.userService.selectUserByName();
PageInfo<User> pageInfo = new PageInfo<User>(list);
model.addAttribute("pageInfo", pageInfo);
return "users";
}
pageNum, 10就是我们让每页显示十条数据
这样我们就完成了