基于分页的SpringBoot的学习(一文学会！)

最新推荐文章于 2023-08-22 21:23:55 发布

妄痴梦中

最新推荐文章于 2023-08-22 21:23:55 发布

阅读量212

点赞数

分类专栏：框架文章标签： spring boot java

本文链接：https://blog.csdn.net/an_gentle_killer/article/details/119573169

版权

框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页内目录
一，SpringBoot的介绍
二，SpringBoot的配置
整体布局
 引入父项目
 引入starter-web
配置额外功能（热加载）
pom文件展示
 springboot的启动类配置
 application.yml的配置
 html界面
 三，SpringBoot的测试
四，整合MyBatis
mybatis/druid/mysql依赖
 yml配置MyBatis映射文件
 配置类加扫描注解
 yml配置数据源
 lombok依赖
 五，整合测试
基于注解基于文件
 整合结果展示
 六，前端实现分页显示
引入js文件和css样式
 寻找前端分页框
 分页框标签
 分页框事件
 前端整合分页框
 前端界面展示
 数据格式化yml配置（时间）
七，服务端实现分页功能
分页maven
分页yml配置
 类的内部调整实现分页功能
 最终index.html
分页结果展示
 注意事项（可能出错的地方）

一，SpringBoot的介绍(SpringBoot官网) ；回到顶部

SpringBoot是一个基于Spring的框架，该框架的目的在于快速搭建Spring开发环境；
Spring为应对互联网应用的要求(高可靠、高并发、负载均衡等)，推出了SpringBoot和微服务框架SpringCloud；SpringClooud完全建立在SpringBoot之上，虽然SpringBoot为微服务而生，但已然成为Java单体项目的首选框架Spring、StringMVC、MyBatis等框架技术都可以集成到SpringBoot中；
SpringBoot可以理解为快速搭建框架的框架
特征
创建独立的Spring应用程序
直接嵌入Tomcat、Jetty或Undertow（无需部署WAR文件）
提供自以为是的“启动程序”依赖项以简化构建配置
尽可能自动配置Spring和第三方库
提供生产就绪特性，如度量、运行状况检查和外部化配置
完全不需要代码生成，也不需要XML配置

二，SpringBoot的配置；回到顶部

在这之前，因为springboot有自己内置的服务器，所以我们只需要建立一个普通的web项目，什么是普通的web项目？传送：mybatis的第二部分1是创建，2设置本地maven库（当然自己也得有本地库，第2步必要性不大，因为我没用本地库貌似也可以）

类与文件布局

在这里插入图片描述

引入SpringBoot的父项目（直接引我的你可能不放心，我带你）

进官网
打开springboot
进入入门操作
复制springboot的父项目（该项目内部已经配置了大量基本配置）
注意这不是maven依赖，在 <dependencies>标签外

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.3</version>
    </parent>

引入maven依赖starter-web

引入spring-boot-starter-web maven依赖（添加类路径依赖项，版本与父项目一致，且由父项目决定）

配置额外功能（热加载）

springboot包含了一组额外的工具，可以让应用程序开发体验更加愉快，点击此处
复制到pom文件下，注意上面的starter-web和spring-boot-devtools都是maven依赖，都放在<dependencies>该标签内；
进入设置
设置成如图样式，热加载便成功了（及时加载，注意：配置文件写完要手动加载）

最终pom文件

<?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>

    <groupId>org.example</groupId>
    <artifactId>SpringBoot\springboot01</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.3</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
    </dependencies>

</project>

springboot的启动类配置

加上注解：@SpringBootApplication

/**
 * @SpringBootApplication:
 * 加上该注解，该类就变成了SpringBoot的启动类，（配置类）在SpringBoot中要求启动类必须放在根包下
 * 包含了三个注解
 * 1.@EnableAutoConfiguration:Spring自动配置器
 * 2.@ComponentScan:组件扫描器,自动扫描当前类所在的包及其子包中的类
 * 3.@SpringBootConfiguration:SpringBoot配置类注解
 */
@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class);//启动Spring环境
    }
}

application.yml的配置（名字固定也可以是：application.properties）

配置项目访问路径，输入如图字样，
回车！得到
配置项目访问路径（简单设置/；注意前面要带空格）即：

server:
  servlet:
    context-path: /

设置端口号
得到（可见在该文件内部，区分级别，级别不对应会报错）
配置日志文件

html界面（害怕各位忘记）

在static文件夹下建立index.html文件

三，SpringBoot的测试；回到顶部

在类上加上注解@RestController和@RequestMapping

@RestController//以响应体的方式
@RequestMapping("/demo")
public class Demo {
}

写入方法（加上注解）@GetMapping

    @GetMapping("/demo1")
    public String demo1(){
        return "你好呀！SpringBoot";
    }

经过配置后此时访问该方法的url地址就为http://localhost/demo/demo1
得到界面
控制台

四，整合MyBatis；回到顶部

mybatis/druid/mysql依赖（maven官网）

MyBatis-Spring-Boot-Starter依赖
将该maven依赖粘贴到pom文件下

<!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.0</version>
</dependency>

Druid-spring-boot-starter依赖
将该maven依赖粘贴到pom文件下

<!-- https://mvnrepository.com/artifact/com.alibaba/druid-spring-boot-starter -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid-spring-boot-starter</artifactId>
    <version>1.2.6</version>
</dependency>

mysql-connector-java依赖（我用的是5.1.47版本）
将该maven依赖粘贴到pom文件下

<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.47</version>
</dependency>

配置MyBatisMapperr映射文件（当在xml文件下写SQL语句时需要）

配置选项
配置内容（mapper文件下的所有xml文件）

配置类加扫描注解（基于注解的SQL语句需要配置该注解）

在启动类内配置注解

@SpringBootApplication//成为启动类
@MapperScan("com.springboot.mapper")//扫描基于注解的SQL语句
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class);//启动Spring环境
    }
}

配置数据源

#配置spring管理的数据源
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url:jdbc:mysql://localhost:3306/goods?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: root
      # 配置数据库连接池相关配置
    druid:
      initial-size: 10
      max-active: 100
      min-idle: 10
      max-wait: 1000

lombok依赖

该依赖可以省区写getset方法等
将该依赖加入pom文件

<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.20</version>
    <scope>provided</scope>
</dependency>

五，MyBatis测试；回到顶部

model下的Goods实体类（因为引入了lombok依赖，所以省去了其他方法，原因是@data注解生成了）

@Data
public class Goods {
    private Integer g_id;
    private String g_name;
    private Double g_price;
    private Date g_date;
}

控制类GoodsController类

@RestController//将结果以响应体形式返回给客户端
@RequestMapping("/goods")//设置主路径
public class GoodsController {
    @Autowired
    private GoodsService goodsService;

    @GetMapping("/queryGoods")//辅路径
    List<Goods> queryGoods() {
        return goodsService.queryGoods();
    }
}

service包下GoodsService类

public interface GoodsService {
    List<Goods> queryGoods();
}

service.impl下的GoodsServiceImpl类

import java.util.List;
@Service
public class GoodsServiceImpl implements GoodsService {
    @Autowired//交给spring管理
    private GoodsMapper goodsMapper;
    @Override
    public List<Goods> queryGoods() {
        return goodsMapper.queryGoods();
    }
}

基于注解的Goodsmapper类

@Repository
public interface GoodsMapper {
    @Select("select * from tbl_goods")
    List<Goods> queryGoods();
}

或者基于mapper文件

删除注解sql
配置goodsMapper.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.springboot.mapper.GoodsMapper">
    <select id="queryGoods" resultType="com.springboot.model.Goods">
       select * from tbl_goods
   </select>
</mapper>

测试结果

运行，浏览器界面输入http://localhost/goods/queryGoods
得到，（说明整合mybatis成功）
控制台有

六，实例：前端界面分页的实现；回到顶部

引入js文件和css样式

这些我之前有过教程
vue.js文件：js文件引入教程
axios.min.js文件：axios文件引入教程
elementUI中js和css的引入：elementUI引入教程

寻找前端分页框（表格的制作，在我的elementUI博客中有简单介绍）

在这里插入图片描述

分页框标签

<el-pagination
                background
                layout="sizes,prev, pager, next,jumper,->,total"
                :page-size.sync="pageParam.pageSize"
                :current-page.sync="pageParam.pageNum"
                :page-sizes="pageSizes"
                :total="total"
                :hide-on-single-page="true"
                @current-change="getGoodsList"
                @size-change="getGoodsList">
</el-pagination>

        background:带有背景的页码
        layout:分页条的布局方式
           prev:上一页按钮
           pager:页码
           next:下一页按钮
           sizes:每页显示的条目数选择列表
           jumper:跳转到第几页
           ->:定位其后的内容居右显示
           total:总条目数
        :page-size.sync="pageSize":每页显示的条目数（双向绑定）
        :current-page.sync="pageNum":当前页（双向绑定）
        :page-sizes="pageSizes":每页显示条目数列表（双向绑定）
        :total="total":总条目数（双向绑定）
        :hide-on-single-page="true":当只有一页时自动隐藏分页条（双向绑定）

分页框事件

在这里插入图片描述

@current-change="getGoodsList"
@size-change="getGoodsList"

前端整合分页框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .page-tool {
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="goods-app">
    <el-table
            :data="goodsList"
            style="width: 100%">
        <el-table-column
                prop="g_id"
                label="商品编号"
        >
        </el-table-column>
        <el-table-column
                prop="g_name"
                label="商品名称"
        >
        </el-table-column>
        <el-table-column
                prop="g_price"
                label="商品单价">
        </el-table-column>
        <el-table-column
                prop="g_date"
                label="上架日期">
        </el-table-column>
    </el-table>
    <div class="page-tool">
        <!--
            background:带有背景的页码
            layout:分页条的布局方式
                prev:上一页按钮
                pager:页码
                next:下一页按钮
                sizes:每页显示的条目数选择列表
                jumper:跳转到第几页
                ->:定位其后的内容居右显示
                total:总条目数
            :page-size.sync="pageSize":每页显示的条目数
            :current-page.sync="pageNum":当前页
            :page-sizes="pageSizes":每页显示条目数列表
            :total="total":总条目数
            :hide-on-single-page="true":当只有一页时自动隐藏分页条
        -->
        <el-pagination
                background
                layout="sizes,prev, pager, next,jumper,->,total"
                :page-size.sync="pageParam.pageSize"
                :current-page.sync="pageParam.pageNum"
                :page-sizes="pageSizes"
                :total="total"
                :hide-on-single-page="true"
                @current-change="getGoodsList"
                @size-change="getGoodsList">
        </el-pagination>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#goods-app',
        data() {
            return {
                goodsList: [],
                //分页设置
                pageParam: {//分页参数对象
                    pageNum: 1,//当前页
                    pageSize: 5,//每页显示的条目数据
                },
                total: 100,//总条目数(从服务端获取)
                pageSizes: [5, 8, 10, 15],//每页显示条目数列表
            }
        },
        methods: {
            getGoodList() {
                axios.get('goods/queryGoods')
                    .then(response => {
                        this.goodsList = response.data;
                    })
                    .catch(err => {
                        alert("错误")
                    })
            }
        },
        created() {
            this.getGoodList();
        }
    });
</script>
</body>
</html>

前端界面展示

在这里插入图片描述

数据格式化（时间）

在yml文件中设置（这样可以使数据库与界面显示格式一直）

七，服务端实现分页功能；回到顶部

分页maven插件（改成基于limit的SQL语句）

找到
放到pom文件下

<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.3.1</version>
</dependency>

分页yml配置

在这里插入图片描述

类的内部调整实现分页功能

建立commons包下的PageParam类

@Data
public class PageParam {
    private Integer pageNum;//待查询的页码
    private Integer pageSize;//每页显示的条目数
}

修改GoodsController类

@RestController//将结果以响应体形式返回给客户端
@RequestMapping("/goods")//设置主路径
public class GoodsController {
    @Autowired
    private GoodsService goodsService;

    @GetMapping("/queryGoods")//辅路径
    public Map<String,Object> queryGoods(PageParam pageParam){
        Map<String,Object> goodsMap = goodsService.queryGoods(pageParam);
        return goodsMap;
    }
}

修改GoodsService类

public interface GoodsService {
    Map<String,Object> queryGoods(PageParam pageParam);
}

修改GoodsServiceImpl类

@Service
public class GoodsServiceImpl implements GoodsService {
    @Autowired//交给spring管理
    private GoodsMapper goodsMapper;
    @Override
    public Map<String,Object> queryGoods(PageParam pageParam) {
        /**
         * 使用pagehelper实现分页查询
         * 1. 设置分页参数（pageNum，pageSize），参数封装在PageParam类中
         * 2. 执行查询语句（每页分页SQL语句的查询）
         * 3.将查询结果封装到PageInFo对象中
         * 上三步为一体
         */
        PageHelper.startPage(pageParam);
        List<Goods> goodsList = goodsMapper.queryGoods();
        PageInfo pageInfo=new PageInfo(goodsList);
        Map<String,Object> map=new HashMap<>();
        //将分页查询相关数据存入Map集合返回
        map.put("goodsList",pageInfo.getList());//查询的数据
        map.put("total",pageInfo.getTotal());//总条数
        return map;
    }
}

最终index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .page-tool {
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="goods-app">
    <el-table
            stripe
            :data="goodsList"
            style="width: 100%">
        <el-table-column
                prop="g_id"
                label="商品编号"
        >
        </el-table-column>
        <el-table-column
                prop="g_name"
                label="商品名称"
        >
        </el-table-column>
        <el-table-column
                prop="g_price"
                label="商品单价">
        </el-table-column>
        <el-table-column
                prop="g_date"
                label="上架日期">
        </el-table-column>
    </el-table>
    <div class="page-tool">
        <!--
            background:带有背景的页码
            layout:分页条的布局方式
                prev:上一页按钮
                pager:页码
                next:下一页按钮
                sizes:每页显示的条目数选择列表
                jumper:跳转到第几页
                ->:定位其后的内容居右显示
                total:总条目数
            :page-size.sync="pageSize":每页显示的条目数
            :current-page.sync="pageNum":当前页
            :page-sizes="pageSizes":每页显示条目数列表
            :total="total":总条目数
            :hide-on-single-page="true":当只有一页时自动隐藏分页条
        -->
        <el-pagination
                background
                layout="sizes,prev, pager, next,jumper,->,total"
                :page-size.sync="pageParam.pageSize"
                :current-page.sync="pageParam.pageNum"
                :page-sizes="pageSizes"
                :total="total"
                :hide-on-single-page="true"
                @current-change="getGoodsList"
                @size-change="getGoodsList">
        </el-pagination>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#goods-app',
        data() {
            return {
                goodsList:[],
                //分页设置
                pageParam: {//分页参数对象
                    pageNum: 1,//当前页
                    pageSize: 5,//每页显示的条目数据
                },
                total: 0,//总条目数(从服务端获取)
                pageSizes: [5, 8, 10, 15],//每页显示条目数列表
            }
        },
        methods: {
            getGoodsList() {
                axios.get('goods/queryGoods',{params:this.pageParam})
                    .then(response => {
                        let resultMap= response.data;
                        this.goodsList=resultMap.goodsList;
                        this.total=resultMap.total;
                    })
                    .catch(err => {
                        alert("错误")
                    })
            }
        },
        created() {
            this.getGoodsList();
        }
    });
</script>
</body>
</html>

分页结果展示

在这里插入图片描述

注意事项（可能出错的地方）

查询之前先查看target文件，可能是导入的js文件没有在target路径下输出，需要删除target文件，再运行即可如图：
在这里插入图片描述

妄痴梦中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于分页的SpringBoot的学习(一文学会！)

页内目录一，SpringBoot的介绍二，SpringBoot的配置文件布局与包布局引入父项目starter-parent 引入maven依赖starter-web 配置额外功能（热加载）最终pom文件 springboot的启动类配置 application.yml的配置 html界面三，SpringBoot的测试四，五，六，一，SpringBoot的介绍(SpringBoot官网)springboot使创建独立的、.
复制链接

扫一扫