SpringBoot 整合Mybatis + PageHelper 實現分頁

江南夜未央發表於2020-07-22
Spring BootMyBatis

前言：

  • 現在公司大多數都實現了前後端分離，前端使用Vue、React、AngularJS 等框架，不用完全依賴後端。但是如果對於比較小型的專案，沒必要前後端分離，而SpringBoot也基本拋棄了Jsp，使用Thymeleaf模板搭配SpringBoot是個不錯的選擇。
  • 在展示資料時必然需要大量的分頁操作，在使用JPA、Mybatis-Plus等持久層框架時，已經自帶分頁查詢操作，無需手動編寫，然而在使用Mybatis作為持久層時，需要手動編寫分頁操作十分麻煩。PageHelper就是用來在Mybatis之上幫助我們實現分頁操作。

開發環境：

  • IDEA IntelliJ IDEA 2019.3.3 x64
  • JDK: 1.8
  • SpringBoot: 2.25
  • PageHelper: 1.2.13
  • Mybatis: 2.1.3 (使用Mybatis作為持久層)
  • 資料來源：Druid 1.1.23

一、SpringBoot框架搭建

【1】點選：File ---> New ---> Project

image-20200722002449351

【2】這個頁面選項是選擇SpringBoot需要的啟動依賴，在這裡可以有很多選項，這裡選擇 Web 和 SQL中的相應配置，然後點選下一步。（這裡的SpringBoot版本有些過高，可以選擇使用預設的最新版本）

image-20200722002852164

【3】儲存路徑，點選FINSH完成。

image-20200722003036710

二、詳細配置

1、在pom檔案中引入Pagehelper分頁外掛，Driud資料來源（非必需）

<!-- Mybatis 分頁外掛 -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.13</version>
</dependency>

<!-- Druid 資料來源-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.1.23</version>
</dependency>

2、建立資料庫

資料庫名：pagehelperdemo 編碼字符集：utf8

CREATE DATABASE `pagehelperdemo`;

USE `pagehelperdemo`;

DROP TABLE IF EXISTS `users`;

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id主鍵',
  `username` varchar(20) NOT NULL COMMENT '使用者名稱',
  `PASSWORD` varchar(20) NOT NULL COMMENT '使用者密碼',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;

insert  into `users`(`id`,`username`,`PASSWORD`) values 
(1,'onetest','123'),
(2,'twotest','456'),
(3,'onetest','789'),
(4,'twotest','987'),
(5,'onetest','654'),
(6,'twotest','321'),
(7,'onetest','147'),
(8,'twotest','258'),
(9,'onetest','369'),
(10,'twotest','963');

插入多條資料方便分頁檢視。

image-20200722005028707

3、配置分頁外掛

將resource資料夾下的application.properties配置檔案改成yml字尾，即application.yml,進行如下配置

server:
  port: 8089

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/pagehelperdemo?useUnicode=true&characterEncoding=UTF-8
    username: root
    password: root

  thymeleaf:
    encoding: UTF-8
    prefix: classpath:/templates/
    suffix: .html
    cache: false
    
#mybatis:
#  mapper-locations: classpath:/mapper/*.xml  #專案中使用註解進行開發

pagehelper:
  helper-dialect: mysql # 指定資料庫型別
  reasonable: true
  params: count=countSql
  support-methods-arguments: true

三、程式碼編寫

1、建立使用者實體類

package com.jia.pojo;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author: ButterflyStars
 * @DateTime: Created in 2020/7/22 1:28
 * @QQ: 1498575492
 * Description: 使用者資訊實體類
 */
public class User {
    private Integer id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

2、建立使用者持久層介面：UserDaoMapper

package com.jia.mapper;

import com.jia.pojo.User;
import org.apache.ibatis.annotations.Select;

import java.util.List;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author: ButterflyStars
 * @DateTime: Created in 2020/7/22 1:31
 * @QQ: 1498575492
 * Description: 使用者持久層介面
 */
public interface UserDaoMapper {
    //查詢所有使用者
    @Select("select id,username,password from users")
    List<User> getAllUser();
}

3、建立業務層介面和實現類：UserService、UserServiceImpl

package com.jia.service;

import com.jia.pojo.User;

import java.util.List;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author: ButterflyStars
 * @DateTime: Created in 2020/7/22 1:35
 * @QQ: 1498575492
 * Description: 使用者業務層介面
 */
public interface UserService {
    //查詢所有使用者
    List<User> getAllUser();
}

package com.jia.service.impl;

import com.jia.mapper.UserDaoMapper;
import com.jia.pojo.User;
import com.jia.service.UserService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author: ButterflyStars
 * @DateTime: Created in 2020/7/22 1:36
 * @QQ: 1498575492
 * Description: 使用者業務層介面實現類
 */
@Service
public class UserServiceImpl implements UserService {
    @Resource
    UserDaoMapper userDaoMapper;

    @Override
    public List<User> getAllUser() {
        return userDaoMapper.getAllUser();
    }
}

4、建立使用者控制層：UserController

【1】 編寫測試Cntroller，檢測是否能查詢到資料。

package com.jia.controller;

import com.jia.pojo.User;
import com.jia.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author: ButterflyStars
 * @DateTime: Created in 2020/7/22 1:39
 * @QQ: 1498575492
 * Description: 使用者控制層
 */
@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
    @GetMapping("/findAll")
    @ResponseBody
    public List<User> findUser() {
        List<User> userList = userService.getAllUser();
        return userList;
    }
}

【2】資料查詢成功。

image-20200722105524501

【3】修改後的UserController

package com.jia.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.jia.pojo.User;
import com.jia.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;


import java.util.List;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author: ButterflyStars
 * @DateTime: Created in 2020/7/22 1:39
 * @QQ: 1498575492
 * Description: 使用者控制層
 */
@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    /**
     * @param model
     * @param pageNum  當前頁數
     * @return
     */
    @GetMapping("/findAll")
    public String findUser(Model model, @RequestParam(defaultValue = "1", value = "pageNum") Integer pageNum) {
        PageHelper.startPage(pageNum,5);    // 預設從第一頁開始，每頁展示五條資料
        List<User> userList = userService.getAllUser();
        PageInfo<User> pageInfo = new PageInfo<>(userList);
        model.addAttribute("pageInfo",pageInfo);
        return "index";
    }
}

5、新增 MapperScan 註解

修改 啟動檔案，在類前新增 MapperScan 註解，修改後如下：

package com.jia;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.jia.mapper")
public class PagehelperDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(PagehelperDemoApplication.class, args);
    }

}

6、建立index.html頁面，引入Thymeleaf依賴

注意：對user進行取值時，屬性會有紅色波浪線提示，並不影響執行。

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分頁測試</title>
</head>
<body>
<h3>查詢所有使用者</h3>
<table border="1">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>password</th>
    </tr>
    <tr th:each="user:${pageInfo.list}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.password}"></td>
    </tr>
</table>
<p>當前 <span th:text="${pageInfo.pageNum}"></span> 頁,總 <span th:text="${pageInfo.pages}"></span> 頁,共 <span th:text="${pageInfo.total}"></span> 條記錄</p>
<a th:href="@{/user/findAll}">首頁</a>
<a th:href="@{/user/findAll(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一頁</a>
<a th:href="@{/user/findAll(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一頁</a>
<a th:href="@{/user/findAll(pageNum=${pageInfo.pages})}">尾頁</a>
</body>
</html>

四、執行測試

啟動 SpringBoot 工程，在瀏覽器輸入：http://localhost:8089/user/findAll，可以看到網頁顯示使用者資訊表格，點選上一頁、下一頁可以進行頁面切換顯示資料。

image-20200722113000115

相關文章