SpringBoot分页功能的实现

SpringBoot分页功能的实现

      • 1.1项目结构
      • 1.2引入依赖
      • 2.1在Indexcontroller中构建 /table 请求并利用分页功能获取数据库中的数据
      • 2.2在Indexcontroller中构建 /deteleUser/{id} 通过地址传参删除对应id的用户
      • 3.导入分页插件
          • 创建一个MybatisConfig 类,注入MybatisPlusInterceptor的Bean
      • 4.html中的thymeleaf代码编写
      • 5.效果展示
          • 当我们发送请求`http://localhost:8080/table?pn=1` 效果如下:
      • 6.添加页码
          • 1.在html中添加页码栏
          • 2.效果展示
            • 此时就可以通过点击页码进行页面跳转了

1.1项目结构

SpringBoot分页功能的实现_第1张图片

1.2引入依赖

<dependencies>
    <dependency>
         <groupId>org.springframework.bootgroupId>
         <artifactId>spring-boot-starter-webartifactId>
     dependency>

     <dependency>
         <groupId>org.springframework.bootgroupId>
         <artifactId>spring-boot-starter-testartifactId>
         <scope>testscope>
         <exclusions>
             <exclusion>
                 <groupId>org.junit.vintagegroupId>
                 <artifactId>junit-vintage-engineartifactId>
             exclusion>
         exclusions>
     dependency>
     
     //mybatis-plus的starter
     
     <dependency>
         <groupId>com.baomidougroupId>
         <artifactId>mybatis-plus-boot-starterartifactId>
         <version>3.5.2version>
     dependency>
     
	//mysql的connector
	
     <dependency>
         <groupId>mysqlgroupId>
         <artifactId>mysql-connector-javaartifactId>
     dependency>
     
     <dependency>
         <groupId>org.projectlombokgroupId>
         <artifactId>lombokartifactId>
     dependency>
     
     <dependency>
         <groupId>org.springframework.bootgroupId>
         <artifactId>spring-boot-starter-thymeleafartifactId>
     dependency>
     
 dependencies>

2.1在Indexcontroller中构建 /table 请求并利用分页功能获取数据库中的数据

 @RequestMapping("/table")
 	//pn参数就是代表着第几页,默认为第一页
    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); //利用page方法进行分页
        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>idth>
           <th>Nameth>
           <th>Ageth>
           <th>Emailth>
           <th>Deteleth>
       tr>
       thead>
       
       <tbody>
       //page.records就是page中的记录,也就是全部的user
       <tr th:each="user : ${page.records}">
           <td th:text="${user.id}">Marktd>
           <td th:text="${user.name}">Marktd>
           <td th:text="${user.age}">Marktd>
           <td th:text="${user.email}">Marktd>
           <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 效果如下:

SpringBoot分页功能的实现_第2张图片

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.效果展示
此时就可以通过点击页码进行页面跳转了

SpringBoot分页功能的实现_第3张图片

你可能感兴趣的:(springboot,笔记,spring,boot,java,spring)