【Springboot】基于注解式开发Springboot-Vue3整合Mybatis-plus实现分页查询

news2025/4/22 19:37:07

系列文章目录

文章目录

  • 系列文章目录
    • 系统版本
    • 实现功能
    • 操作步骤
      • 1. 新建Mybatis的全局分页配置文件
      • 2. 编写OrderMapper :继承Mybatis-plus提供的BaseMapper
      • 3. 编写OrderServiceImpl,实现OrderService
      • 4. 编写OrdersController 控制类
    • 发送接口请求测试

系统版本

后端: Springboot 2.7、 Mybatis-plus
数据库:MySQL 8.0
前端:Vue3、Axois 1.6.0 、Vite 4.5.0、Element-Plus、Router-v4

实现功能

本文主要从后端,借助Mybatis-plus提供的方法,实现分页功能。url中需要传入当前页,和每页显示多少条数据。下篇文章将结合Element-plus的el-pagination组件,调用后台数据,实现分页效果。

下面演示一个功能,比如分页查询订单(Orders)记录。读者可以根据自己的实体类,自行修改。
数据库数据如下:
在这里插入图片描述

操作步骤

1. 新建Mybatis的全局分页配置文件

Mybatis配置全局配置文件:MybatisPageConfig


/**
 * @author hspcadmin
 */
@Configuration
@MapperScan("your mapper address")//设置mapper接口的扫描

public class MyBatisPageConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        //添加分页插件
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

2. 编写OrderMapper :继承Mybatis-plus提供的BaseMapper

public interface OrderMapper extends BaseMapper<Orders> {
}

在Service中编写具体业务方法,IPage <Orders> getAllOrders 是返回IPage类型,IPage类型已经将数据分页好了。

在OrderService中编写具体的业务。

public interface OrderService {
    /**
     * 获得所有的订单信息,使用IPage分页
     * @param page
     * @return
     */
    IPage<Orders> getAllOrders(Page page);
    /**
     * 获取所有订单数据,不分页
     * @return
     */
    List<Orders> getAllList();
}

3. 编写OrderServiceImpl,实现OrderService

package com.fy36.hotelmanage.service.impl;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.fy36.hotelmanage.entity.Orders;
import com.fy36.hotelmanage.mapper.OrderMapper;
import com.fy36.hotelmanage.service.OrderService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

/**
 * @author hspcadmin
 */
@Service
public class OrderServiceImpl implements OrderService {
    @Autowired
    private OrderMapper orderMapper;

    @Override
    public IPage getAllOrders(Page page) {
        return orderMapper.selectPage(page, null);
    }
    @Override
    public List<Orders> getAllList() {
        return orderMapper.selectList(null);
    }
}

上面实际使用Mybatis-plus方法的是getAllOrders方法,实际调用的是Mybatis-plus源码里面的下面的这个方法:
在这里插入图片描述

4. 编写OrdersController 控制类

@RestController
public class OrderController {
    @Autowired
    private OrderServiceImpl orderService;

    /**
     * 不带分页查询
     *
     * @return 返回List数组
     */
    @GetMapping("/get-all")
    public ApiResult getAllOrderList() {
        System.out.println("get-all.....");
        return ApiResultHandler.buildApiResult(200, "获取信息", orderService.getAllList());
    }

    /**
     * 带分页的查询
     *
     * @param page,代表当前的页数
     * @param size,代表当前每页显示多少内容
     * @return 返回IPage类型
     */
    @GetMapping("/get-page/{page}/{size}")
    public IPage<Orders> queryUserForPage(@PathVariable("page") Integer page, @PathVariable("size") Integer size) {
        Page<Orders> ordersPage = new Page<>(page, size);
        IPage<Orders> logsIPage = orderService.getAllOrders(ordersPage);
        return logsIPage;
    }
}

发送接口请求测试

数据库中数据一共有7条。
在这里插入图片描述
localhost:8081/get-page/1/4 ,即查询第1页,并规定每页4条数据。
在这里插入图片描述

localhost:8081/get-page/2/4 ,即查询第2页,并规定每页4条数据。
在这里插入图片描述

再比如更改每页的页面大小为3,发送请求:localhost:8081/get-page/1/3
在这里插入图片描述
前端axois获取后端数据就是分好页的:
在这里插入图片描述

前端效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1197068.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Antd React Form.Item内部是自定义组件怎么自定义返回值

在线演示https://stackblitz.com/edit/stackblitz-starters-xwtwyz?filesrc%2FSelfTreeSelect.tsx 需求 当我们点击提交,需要返回用户名和选中树的id信息,但是,我不关要返回树的id信息,还需要返回选中树的名称 //默认返回的 {userName:梦洁,treeInfo:leaf1-value } //但是需…

MySQL中的json使用注意

MySQL中json是一种重要的数据类型 好的点在于其不必事先定义列得名称啥的 不过不要将明显的关系型数据作为json来存储&#xff0c;例如用户余额、姓名、身份证等&#xff0c;这些是用户必须包含的数据 json适合存储的是给每个用户&#xff08;或者物品&#xff09;打的标签&…

红黑树的模拟实现

一、介绍 1. 概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路径会比其他路径长出俩倍&#xff0c…

超级有效的12个远程团队管理技巧

前言 随着远程办公的兴起&#xff0c;虚拟管理团队已成为新常态。尽管混合和远程工作正在成为新常态&#xff0c;但管理远程团队也面临着一系列挑战。本文我们将为您提供 12个技巧&#xff0c;帮助您成功管理远程团队并改善协作。此外&#xff0c;我们将讨论定期接触点的重要性…

前端通过导入editor.md库实现markdown功能

小王学习录 今日摘录前言jquery下载editor下载editor和jquery的导入初始化editor总结 今日摘录 满招损&#xff0c;谦受益 前言 要想通过editor.md实现markdown的功能&#xff0c;需要经过如下四步&#xff1a; 下载editor.md到本地将本地editor导入到前端代码中编写少量代…

【分布式】tensorflow 1 分布式代码实战与说明;单个节点上运行 2 个分布式worker工作线程

tensorflow.python.framework.errors_impl.UnknowError: Could not start gRPC server 1. tf分布式 一台电脑服务器server是一个节点&#xff0c;包含了多个GPU。首先分布式的方式就是让多台电脑上的gpu共同干活。 分布式工作分为两个部分&#xff0c;parameter server&#…

Practice01-Qt6.0设置文本颜色、格式等。

Qt6.0学习&#xff0c;在此做个记录&#xff0c;方便日后查找复习 本次项目用到的控件有&#xff1a;复选框&#xff0c;单选按钮。文本编辑框。 项目目录结构&#xff1a; 项目运行效果图&#xff1a; 实现的功能&#xff1a; 勾选Underline、Italic&#xff0c;Bold时&…

BUUCTF——刮开有奖

打开程序&#xff1a; 就一个这个玩意儿&#xff0c;没有输入框&#xff0c;没有啥的&#xff0c;打开IDA反编译一下&#xff1a; 直接找到WinMain&#xff0c;发现里面只有一个对话框API&#xff08;如果只有一个对话框&#xff0c;那真就没有输入框了&#xff09;&#xff0…

人工智能基础——Python:Matplotlib与绘图设计

人工智能的学习之路非常漫长&#xff0c;不少人因为学习路线不对或者学习内容不够专业而举步难行。不过别担心&#xff0c;我为大家整理了一份600多G的学习资源&#xff0c;基本上涵盖了人工智能学习的所有内容。点击下方链接,0元进群领取学习资源,让你的学习之路更加顺畅!记得…

Android---屏幕适配的处理技巧

在几年前&#xff0c;屏幕适配一直是困扰 Android 开发工程师的一大问题。但是随着近几年各种屏幕适配方案的诞生&#xff0c;以及谷歌各种适配控件的推出&#xff0c;屏幕适配也显得越来越容易。下面&#xff0c;我们就来总结一下关于屏幕适配的那些技巧。 ConstraintLayout …

【数据结构】二叉树经典例题---<你真的掌握二叉树了吗?>(第一弹)

一、已知一颗二叉树如下图&#xff0c;试求&#xff1a; (1)该二叉树前序、中序和后序遍历的结果。 (2)该二叉树是否为满二叉树&#xff1f;是否为完全二叉树&#xff1f; (3)将它转换成对应的树或森林。 (4)这颗二叉树的深度为多少? (5)试对该二叉树进行前序线索化。 (6)试对…

向量的点积和外积

参考&#xff1a;https://www.cnblogs.com/gxcdream/p/7597865.html 一、向量的内积&#xff08;点乘&#xff09; 定义&#xff1a; 两个向量a与b的内积为 ab |a||b|cos∠(a, b)&#xff0c;特别地&#xff0c;0a a0 0&#xff1b;若a&#xff0c;b是非零向量&#xff0c;…

Shopee收款账户怎么设置?shopee收款方式选哪种

Shopee作为一家领先的电子商务平台&#xff0c;为卖家提供了多种收款方式。无论是在线支付、虚拟账户余额还是线下支付&#xff0c;卖家可以根据自己的需求和交易情况来进行选择。然而&#xff0c;在选择收款方式时&#xff0c;安全性、便捷性和市场适应性是需要考虑虾皮Shopee…

【Git】Git的GUI图形化工具ssh协议IDEA集成Git

一、GIT的GUI图形化工具 1、介绍 Git自带的GUI工具&#xff0c;主界面中各个按钮的意思基本与界面文字一致&#xff0c;与git的命令差别不大。在了解自己所做的操作情况下&#xff0c;各个功能点开看下就知道是怎么操作的。即使不了解&#xff0c;只要不做push操作&#xff0c;…

【数据结构】顺序表 | 详细讲解

在计算机中主要有两种基本的存储结构用于存放线性表&#xff1a;顺序存储结构和链式存储结构。本篇文章介绍采用顺序存储的结构实现线性表的存储。 顺序存储定义 线性表的顺序存储结构&#xff0c;指的是一段地址连续的存储单元依次存储链性表的数据元素。 线性表的&#xf…

Activiti BPMN visualizer Using Of Idear

Launch 安装插件 创建文件 可视化创建按钮 设置条件,是在线上设置的

【C++破局】C++内存管理之new与deleted剖析

​作者主页 &#x1f4da;lovewold少个r博客主页 ⚠️本文重点&#xff1a;c内存管理部分知识点梳理 &#x1f449;【C-C入门系列专栏】&#xff1a;博客文章专栏传送门 &#x1f604;每日一言&#xff1a;花有重开日&#xff0c;人无再少年&#xff01; 目录 C/C的内存分配机…

Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model

前言 持续学习总结输出中&#xff0c;Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model 概念&#xff1a;指令&#xff08;Directives&#xff09;是Vue提供的带有 v- 前缀 的特殊标签属性。可以提高操作 DOM 的效率。 vue 中的指令按照不…

Java Web——HTTP协议

目录 1. HTTP协议概述 1.1. HTTP数据传输格式 1.2. HTTP协议特点 2. HTTP 1.0和HTTP 1.1 3. HTTP请求协议 3.1. GET方式请求协议 3.2. POST方式请求协议 3.3. GET请求和POST请求的区别 4. HTTP相应协议 4.1. 响应状态码 如果两个国家进行会晤需要遵守一定的礼节。所以…

WMS配送中心主要业务流程

业务流程图 入库 波次出库 按门店和门店所属送货路线确定出库波次 入库 出库 移库、封仓 门店欠货能要点 1. 日常补货&#xff1a;分拣仓位商品小于当前商品在该位置的补货下限的时候&#xff1b;生成对此进行补货任务&#xff1b;补货完成后确认任务&#xff0c;系统变更库存…