1.1项目结构
1.2引入依赖
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
//mybatis-plus的starter
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.2</version>
</dependency>
//mysql的connector
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
2.1在Indexcontroller中构建 /table 请求并利用分页功能获取数据库中的数据
@RequestMapping("/table")
public ModelAndView table(@RequestParam(value = "pn",defaultValue = "1")Integer pn){
ModelAndView mv = new ModelAndView();
Page<User> userPage = new Page<>(pn, 2);
Page<User> page = userService.page(userPage,null);
mv.addObject("page",page);
mv.setViewName("tables");
return mv;
}
2.2在Indexcontroller中构建 /deteleUser/{id} 通过地址传参删除对应id的用户
@RequestMapping("/deteleUser/{id}")
public String deteleUser(RedirectAttributes r,@PathVariable("id")Integer id,
@RequestParam("pn")Integer pn){
userService.removeById(id);
r.addAttribute("pn",pn);
return "redirect:/table";
}
3.导入分页插件
创建一个MybatisConfig 类,注入MybatisPlusInterceptor的Bean
@Configuration
public class MybatisConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor(){
MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return mybatisPlusInterceptor;
}
}
4.html中的thymeleaf代码编写
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Detele</th>
</tr>
</thead>
<tbody>
//page.records就是page中的记录,也就是全部的user
<tr th:each="user : ${page.records}">
<td th:text="${user.id}">Mark</td>
<td th:text="${user.name}">Mark</td>
<td th:text="${user.age}">Mark</td>
<td th:text="${user.email}">Mark</td>
<td >
// {id}(id=${user.id} 意为把user.id传给{id}拼接到地址中
//如: deteleUser?id=2 此处是将用户所对应得id传入地址中并根据id删除用户
<a th:href="@{/deteleUser/{id}(id=${user.id},pn=${page.current})}" class="btn btn-danger">
Detele
</a>
</td>
</tr>
</tbody>
</table>
5.效果展示
当我们发送请求http://localhost:8080/table?pn=1
效果如下:
6.添加页码
1.在html中添加页码栏
<ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li
#page.current就是当前页意思
th:class="${page.current==num?'active':''}"
#numbers是thymeleaf的一个工具类,此处调用的sequence是表示从1展示到page的最后一页,
th:each="num:${#numbers.sequence(1,page.pages)}">
<a th:href="@{/table(pn=${num})}">[[${num}]]</a></li>
<li><a href="#">»</a></li>
</ul>
#告诉用户页面的信息,包括当前是第几页,共有几页,一共有多少条数据
<ul>
当前是第[[${page.current}]] 页,共[[${page.pages}]], 共有[[${page.total}]] 条数据
</ul>
2.效果展示
此时就可以通过点击页码进行页面跳转了