Springboot、Mybatis分页插件使用

Renaissance&复活

已于 2023-10-01 08:37:58 修改

阅读量565

点赞数

于 2023-09-29 18:47:16 首次发布

本文链接：https://blog.csdn.net/m0_62659797/article/details/133419357

版权

前言

二、步骤

1.创建数据库

2.Idea 创建maven/springBoot项目并添加依赖

前言

Mybatis具有良好的分页插件支持，本文将使用分页插件进行前端的分页展示。

二、步骤

1.创建数据库

代码如下：

/*
SQLyog Job Agent v12.08 (32 bit) Copyright(c) Webyog Inc. All Rights Reserved.


MySQL - 5.6.5-m8 : Database - db_mybatis
*********************************************************************
*/

/*!40101 SET NAMES utf8mb4 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`db_mybatis` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `db_mybatis`;

/*Table structure for table `t_car` */

DROP TABLE IF EXISTS `t_car`;

CREATE TABLE `t_car` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT '自增ID',
  `car_num` varchar(255) NOT NULL COMMENT '汽车编号',
  `brand` varchar(255) NOT NULL DEFAULT '' COMMENT '品牌',
  `guide_price` decimal(10,2) NOT NULL COMMENT '指导价',
  `produce_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '生产日期',
  `car_type` tinyint(3) unsigned NOT NULL DEFAULT '0' COMMENT '汽车类型（0-燃油车，1-电车，2-氢能源）',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=utf8 COMMENT='汽车表';

/*Data for the table `t_car` */

insert  into `t_car` values (1,'100','宝马529Li','41.00','2022-09-01 00:00:00',0),(5,'E2001','布加迪','120.00','2023-09-24 00:00:00',2),(8,'E2000','布加迪','41.28','2023-09-28 12:17:25',2),(9,'E2001','布加迪','93.35','2023-09-28 12:17:25',2),(10,'E2002','布加迪','97.01','2023-09-28 12:17:25',2),(11,'E2003','布加迪','15.86','2023-09-28 12:17:25',2),(12,'E2004','布加迪','48.74','2023-09-28 12:17:25',2),(16,'E2008','布加迪','77.74','2023-09-28 12:17:25',2),(17,'E2009','布加迪','30.80','2023-09-28 12:17:25',2);

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

2.Idea 创建maven/springBoot项目并添加依赖

代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.4.RELEASE</version>
        <relativePath />
    </parent>

    <groupId>com.mb</groupId>
    <artifactId>mybatis-generator</artifactId>
    <version>1.0.1</version>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <!-- Web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- 模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!-- 单元测试 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- Log -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>

        <!-- Lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.4</version>
        </dependency>

        <!-- Mybatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>

        <!-- MySQL -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.30</version>
        </dependency>

        <!-- 热部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>

        <!-- 分页 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.3.0</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!-- Mybatis自动生成 -->
            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.3.6</version>
                <configuration>
                    <overwrite>true</overwrite>
                    <verbose>true</verbose>
                    <configurationFile>GeneratorMapper.xml</configurationFile>
                </configuration>
                <dependencies>
                    <dependency>
                        <groupId>mysql</groupId>
                        <artifactId>mysql-connector-java</artifactId>
                        <version>8.0.30</version>
                    </dependency>
                </dependencies>
            </plugin>
        </plugins>
    </build>
</project>

3.按如下图片创建目录

controller：Web控制器

mapper：数据库映射类

model：数据库表实体类

service：业务类

4.后端代码

1、根据pom.xml文件build下的Mybatis生成插件的

<configurationFile>GeneratorMapper.xml</configurationFile>

创建文件。内容如下（需修改数据库连接信息）：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>

    <!-- 指定连接数据库 JDBC 驱动包所在位置，指定到本机的完整路径 -->
    <!--<classPathEntry location="D:\Tools\tools\mysql-connector-java-5.1.9-bin.jar" />-->

    <!--
        targetRuntime: 执行生成的逆向工程的版本
        MyBatis3Simple: 生成基本的CRUD（清新简洁版）
        MyBatis3: 生成带条件的CRUD（奢华尊享版）
    -->
    <!-- 配置 table 表信息内容体 -->
    <context id="DB2Tables" targetRuntime="MyBatis3">

        <!--定义生成的java类的编码格式-->
        <property name="javaFileEncoding" value="UTF-8"/>

        <!-- 去掉英文注释 -->
        <commentGenerator>
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>

        <!-- 数据库的连接信息 -->
        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/xxx"
                        userId="xxx"
                        password="xxx">
        </jdbcConnection>

        <!-- javaBean的生成策略-->
        <javaModelGenerator targetPackage="com.mb.model"
                            targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true"/>
            <property name="trimStrings" value="true"/>
        </javaModelGenerator>
        <!-- SQL映射文件的生成策略 -->
        <sqlMapGenerator targetPackage="com.mb.mapper"
                         targetProject=".\src\main\resources">
            <property name="enableSubPackages" value="true"/>
        </sqlMapGenerator>
        <!-- Mapper接口的生成策略 -->
        <javaClientGenerator type="XMLMAPPER"
                             targetPackage="com.mb.mapper"
                             targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true"/>
        </javaClientGenerator>
        <!-- 逆向分析的表 -->
        <!-- tableName设置为*号，可以对应所有表，此时不写domainObjectName -->
        <!-- domainObjectName属性指定生成出来的实体类的类名 -->
        <table tableName="t_car" domainObjectName="Car"
               enableCountByExample="false"
               enableUpdateByExample="false"
               enableDeleteByExample="false"
               enableSelectByExample="false"
               selectByExampleQueryId="false"/>
    </context>

</generatorConfiguration>

之后，在Maven Projects->项目->Plugins->mybatis-generator双击带:generate文件。

编译成功后，会创建相应的model、mapper、mapper.xml文件。

2、对于生成后的Car类，可以使用lombok依赖减少getter/setter等代码：

package com.mb.model;

import lombok.Data;
import lombok.NoArgsConstructor;

import java.math.BigDecimal;
import java.util.Date;

@Data
@NoArgsConstructor
public class Car {
    private Long id;

    private String carNum;

    private String brand;

    private BigDecimal guidePrice;

    private Date produceTime;

    private Byte carType;

}

3、在resources下创建application.xml和application-dev.xml文件（-dev表示开发时使用）。

application.xml文件内容如下：

spring:
  profiles:
    active: dev

application-dev.xml文件内容如下：

server:
  port: 8899
  servlet:
    context-path: /generator

spring:
  application:
    name: sql
  datasource: # MySQL
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/db_mybatis?serverTimezone=UTC
    username: root
    password: 8019
  thymeleaf:
    cache: false

mybatis:  # Mybatis
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    lazy-loading-enabled: true

4、在CarMapper接口添加抽象方法：

List<Car> selectAll();

在CarMapper.xml文件添加SQL实现：

<select id="selectAll" resultMap="BaseResultMap">
  select 
  <include refid="Base_Column_List" />
  from t_car
</select>

在Application启动类添加注解：

package com.mb;

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

/**
 * @create: 2023/9/26
 * @Description:
 * @FileName: Application
 */
@SpringBootApplication
@MapperScan(basePackages = "com.mb.mapper")
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

5、现在，可以在service包下创建业务接口CarService：

package com.mb.service;

import com.mb.model.Car;

import java.util.List;

/**
 * @create: 2023/9/29
 * @Description:
 * @FileName: CarService
 */
public interface CarService {
    Car queryById(Long id);

    List<Car> queryAll();

    int addCar(Car car);

    int updateCar(Car car);

    int removeById(Long id);
}

在service.impl包下创建实现类CarServiceImpl：

package com.mb.service.impl;

import com.mb.mapper.CarMapper;
import com.mb.model.Car;
import com.mb.service.CarService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @create: 2023/9/29
 * @Description:
 * @FileName: CarServiceImpl
 */
@Service
public class CarServiceImpl implements CarService {
    @Autowired
    private CarMapper carMapper;

    @Override
    public Car queryById(Long id) {
        return carMapper.selectByPrimaryKey(id);
    }

    @Override
    public List<Car> queryAll() {
        return carMapper.selectAll();
    }

    @Override
    public int addCar(Car car) {
        return carMapper.insert(car);
    }

    @Override
    public int updateCar(Car car) {
        return carMapper.updateByPrimaryKeySelective(car);
    }

    @Override
    public int removeById(Long id) {
        return carMapper.deleteByPrimaryKey(id);
    }
}

6、此刻，可以编写跟前端交互的CarController了。

package com.mb.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.mb.model.Car;
import com.mb.service.CarService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
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.servlet.ModelAndView;

import java.util.List;
import java.util.Objects;

/**
 * @create: 2023/9/29
 * @Description:
 * @FileName: CarController
 */
@Controller
@RequestMapping("/cars")
public class CarController {
    @Autowired
    private CarService carService;

    @GetMapping("/")
    public ModelAndView index(@RequestParam(required = false) Integer pageNum,
                              @RequestParam(required = false) Integer pageSize) {
        // 首次进入，设置初值
        if (Objects.isNull(pageNum)) pageNum = 1;
        if (Objects.isNull(pageSize)) pageSize = 5;

        ModelAndView view = new ModelAndView("index");
        PageHelper.startPage(pageNum, pageSize);                // 使用分页插件
        List<Car> carList = carService.queryAll();              // 获取汽车列表
        PageInfo<Car> pageInfo = new PageInfo<>(carList, 5);    // 获取分页信息

        // 设置属性
        view.addObject("carList", carList);
        view.addObject("page", pageInfo);

        return view;
    }
}

5.前端代码

1、在编写前端代码前，需要在resources/static/css和resources/static/js目录引入bootstrap、jquery文件。之后，可以在resources/templates目录下创建index.html文件。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>Index</title>

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.1.min.js}"></script>
    <style>
        /* 卡片展示下第一个span标签 */
        .car-content-card li span:first-child {
            width: 40%;
            display: inline-block;
        }

        /* 返回顶部按钮 */
        .to-top {
            position: fixed;
            right: 5%;
            bottom: 15%;
            padding: 0 7px;
            transform: scale(1.5) rotateX(180deg);  /* 放大为自身1.5倍，旋转180度 */
            border-radius: 50%;         /* 圆形 */
            box-shadow: 0 0 7px #999;   /* 阴影效果 */
            cursor: pointer;
            background-color: cadetblue;
            user-select: none;          /* 禁止选择 */
        }

        .to-top:active {
            box-shadow: 0 0 5px #555;
        }

        .car-content-table {
            display: none;
        }

        .car-content-card {
            display: block;
        }

        /* 媒体查询-根据宽度改变内容展示 */
        @media screen and (min-width: 678px) {
            .car-content-card {
                display: none;
            }
            .car-content-table {
                display: block;
            }
        }
    </style>
</head>
<body>
    <noscript>
        <p>抱歉，你的浏览器不支持脚本（JavaScript）！</p>
    </noscript>

    <!--容器rongqi -->
    <div class="container-md mt-3">
        <!-- 头部 -->
        <header class="header text-center py-3 border-bottom border-2">
            <h2>分页插件使用</h2>
        </header>

        <!-- 主体 -->
        <section class="main p-2">
            <!-- 汽车表格展示 -->
            <article class="car-content-table">
                <ul class="list-unstyled list-group text-center car-list">
                    <li class="row border bg-secondary bg-opacity-50 fw-bold">
                        <span class="col py-1 border-end">ID</span>
                        <span class="col py-1 border-end">编号</span>
                        <span class="col py-1 border-end">品牌</span>
                        <span class="col py-1 border-end">指导价（万元）</span>
                        <span class="col py-1 border-end">生产日期</span>
                        <span class="col py-1">类型</span>
                    </li>
                    <li th:each="car:${carList}" class="row text-muted">
                        <span class="col py-2 border border-top-0" th:text="${car.id}"></span>
                        <span class="col py-2 border border-top-0" th:text="${car.carNum}"></span>
                        <span class="col py-2 border border-top-0" th:text="${car.brand}"></span>
                        <span class="col py-2 border border-top-0" th:text="${#numbers.formatDecimal(car.guidePrice, 0, 2)}"></span>
                        <span class="col py-2 border border-top-0" th:text="${#dates.format(car.produceTime, 'yyyy/MM/dd')}"></span>
                        <span class="col py-2 border border-top-0" th:text="${0 == car.carType ? '燃油' : (1 == car.carType ? '电动' : '氢能源')}"></span>
                    </li>
                </ul>
            </article>

            <!-- 汽车卡片展示 -->
            <article class="car-content-card">
                <div class="card mb-2" th:each="car:${carList}">
                    <div class="card-header text-center">
                        <h5 class="card-title">ID([[${car.id}]])</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled list-group-flush">
                            <li class="list-group-item">
                                <span class="text-secondary">编号</span>
                                <span class="text-muted">[[${car.carNum}]]</span>
                            </li>
                            <li class="list-group-item">
                                <span class="text-secondary">品牌</span>
                                <span class="text-muted">[[${car.brand}]]</span>
                            </li>
                            <li class="list-group-item">
                                <span class="text-secondary">指导价（万元）</span>
                                <span class="text-muted">[[${#numbers.formatDecimal(car.guidePrice, 0, 2)}]]</span>
                            </li>
                            <li class="list-group-item">
                                <span class="text-secondary">生产日期</span>
                                <span class="text-muted">[[${#dates.format(car.produceTime, 'yyyy/MM/dd')}]]</span>
                            </li>
                            <li class="list-group-item">
                                <span class="text-secondary">类型</span>
                                <span class="text-muted">[[${0 == car.carType ? '燃油' : (1 == car.carType ? '电动' : '氢能源')}]]</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </article>

            <aside class="clearfix">
                <ul class="list-unstyled list-group-horizontal list-group mt-2 float-start">
                    <li class="mt-1 me-2">
                        <select class="form-select-button form-select form-select-sm select-page">
                            <option value="1" th:selected="${1 == page.pageSize}">1</option>
                            <option value="3" th:selected="${3 == page.pageSize}">3</option>
                            <option value="5" th:selected="${5 == page.pageSize}">5</option>
                            <option value="10" th:selected="${10 == page.pageSize}">10</option>
                        </select>
                    </li>
                    <li class="p-2 text-secondary" th:text="|共 ${page.pages} 页|"></li>
                    <li class="p-2 text-secondary" th:text="|当前第 ${page.pageNum} 页|"></li>
                </ul>

                <!-- 分页导航 -->
                <ul class="pagination mt-2 float-start ms-md-2">
                    <li class="page-item" th:classappend="${page.isFirstPage} ? 'disabled' : ''"
                        th:style="|cursor: ${page.isFirstPage ? 'not-allowed' : ''}|">
                        <a th:href="@{/cars/(pageNum=1,pageSize=${page.pageSize})}" class="page-link user-select-none">
                            First
                        </a>
                    </li>
                    <li class="page-item" th:classappend="${page.hasPreviousPage} ? '' : 'disabled'"
                        th:style="|cursor: ${page.hasPreviousPage ? '' : 'not-allowed'}|">
                        <a th:href="@{/cars/(pageNum=${page.prePage},pageSize=${page.pageSize})}" class="page-link user-select-none">
                            Previous
                        </a>
                    </li>
                    <li class="page-item" th:classappend="${page.hasNextPage} ? '' : 'disabled'"
                        th:style="|cursor: ${page.hasNextPage ? '' : 'not-allowed'}|">
                        <a th:href="@{/cars/(pageNum=${page.nextPage},pageSize=${page.pageSize})}" class="page-link user-select-none">
                            Next
                        </a>
                    </li>
                    <li class="page-item" th:classappend="${page.isLastPage} ? 'disabled' : ''"
                        th:style="|cursor: ${page.isLastPage ? 'not-allowed' : ''}|">
                        <a th:href="@{/cars/(pageNum=${page.pages},pageSize=${page.pageSize})}" class="page-link user-select-none">
                            Last
                        </a>
                    </li>
                </ul>
            </aside>
        </section>

        <!-- 尾部 -->
        <footer class="footer">
            <div class="rounded-circle to-top" onclick="window.scrollTo(0,0)">V</div>
        </footer>
    </div>

    <script th:inline="javascript">
        $(function () {
            // 分页大小设置事件
            $(".select-page").on("change", function () {
                location.href = [[${#request.contextPath}]] + "/cars/?pageSize=" + $(this).val();
            });
        });
    </script>
</body>
</html>

notes：使用@media（媒体查询）可以在宽度变化时改变内容展示。

6.效果展示

启动springboot，在浏览器输入：http://localhost:8899/generator/cars/

图片效果如下：

总结

通过对Mybatis分页插件的使用，使我对项目的编写更加熟练，对搭建项目的步骤更清晰。

同时，项目中也存在着不足。如下：

每次分页都进行了整页刷新（jquery可以异步加载，但可能需要编写HTML）
展示的信息中如”品牌“存在过长的问题，会导致内容溢出，影响美观
只是显示了数据，没有排序、搜索等操作。

Renaissance&复活

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Springboot、Mybatis分页插件使用

Mybatis具有良好的分页插件支持，本文将使用分页插件进行前端的分页展示。通过对Mybatis分页插件的使用，使我对项目的编写更加熟练，对搭建项目的步骤更清晰。同时，项目中也存在着不足。每次分页都进行了整页刷新（jquery可以异步加载，但可能需要编写HTML）展示的信息中如”品牌“存在过长的问题，会导致内容溢出，影响美观只是显示了数据，没有排序、搜索等操作。
复制链接

扫一扫