【Springboot】基于注解式开发Springboot-Vue3整合Mybatis-plus实现分页查询(二)——前端el-pagination实现

本文详细介绍了如何在Springboot2.7与Mybatis-plus配合MySQL8.0的后端环境下,通过Vue3和Axios与Element-Plus组件实现数据分页查询,包括后端接口设计、前端el-table展示及el-pagination分页组件的使用。
摘要由CSDN通过智能技术生成

系列文章

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


系统版本

后端: 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)记录。读者可以根据自己的实体类,自行修改。

实现思路

先编写一个获取后台返回IPage类型的数据的axois,获取到数据后,用户在前端进行选择每页选择多少页或者选择具体的页数的时候,重新触发获取数据的api.
在这里插入图片描述

后端传入的数据格式

后端传回来的数据实际上长这样,当前页,总页数,每页展示多少数据,其实都有,前台只需要拿到这些参数值即可:
在这里插入图片描述

前端el-table

    <el-table :data="orderlist.data" style="width: 90%">
      <el-table-column sortable prop="orderId" label="订单编号" width="200" />
      <el-table-column sortable prop="checkIn" label="入住时间" width="200" />
      <el-table-column sortable prop="checkOut" label="离房时间" width="200" />

      <el-table-column prop="clientName" label="姓名" width="100" />
      <el-table-column prop="clientSex" label="性别" width="100" />
      <el-table-column prop="clientCard" label="身份证号" width="200" />
      <el-table-column prop="clientPhone" label="联系方式" width="150" />
      <el-table-column label="房型" prop="roomType" width="200" />

      <el-table-column prop="" label="操作" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
            >详情</el-button
          >
          <el-button link type="primary" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

封装axois接口

在项目src目录下,另建一个文件夹/request,里面创建api.js,内容是创建axois实例,简单封装axois.

import axios from "axios";
const api = axios.create(
    { 
        baseURL: "http://localhost:8081", 
        timeout: 10000 ,
        headers:{
            "Content-Type":"application/json;charset=UTF-8"
        }
});

引入Element-plus的el-pagination分页组件

官网:Element-plus-elpagination

下面的currentPagetotalPage,pageSize 都是接收后端IPage类型的返回数据字段。

  • total参数用来显示,一共有多少条数据。
  • :page-sizes由数组构成,里面的可选值代表每页可以选择多少条数据。
  • current-page代表当前选中的页面页码;
  • page-size:用来获取后端传来的页面数量。

通过ref 使用 reactive 来实现响应式,获取到后台数据后,这些字段的数据将会被后端传入数据覆盖掉,获得真正的页面大小,当前页等参数。

const currentPage = ref(1);
const pageSize = ref(5);
const totalPage = ref(20);

我们要定义方法:handleSizeChanged 和方法 handleCurrentChange,当用户点击切换页码或切换每页展示的数据时,能够做出响应。我这里设计的方法是,用户执行上述操作时,通过方法返回用户具体切换成第几页,或者选择数据每页多少条,然后存入orderlist中,用其内部字段来接收。

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[2, 4, 5, 8, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

我们通过orderlist方法,将后台传来的总页数、当前页、每页展示多少条数据,存储起来

const currentPage = ref(1);
const pageSize = ref(5);
const totalPage = ref(20);
// const pageSize = ref(5);
let orderlist = new reactive({
  //分页后的考试信息
  current: 1, //当前页
  total: null, //记录条数
  size: 5, //每页条数
  data: [],
});

handleCurrentChange 和 handleSizeChanged 方法如下:

const handleSizeChange = (val) => {
  orderlist.size = val;
  console.log("调用页面大小监控函数,传参如下:");
  console.log("orderlist.current===   " + orderlist.current);
  console.log("orderlist.size ===== " + orderlist.size);
  getdata();
};
const handleCurrentChange = (val) => {
  orderlist.current = val;
  console.log("调用当前页面监控函数,传参如下:");
  console.log("orderlist.current===   " + orderlist.current);
  console.log("orderlist.size ===== " + orderlist.size);
  getdata();
};

Axois 获取后台数据

使用反单引号拼接请求url参数,反单引号拼接参数用法如下:
详见
Vue-Router编程式导航

// 我们可以手动建立 url,但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo

本项目中编写获取axois方法:

const getdata = () => {
  api
    .get(`/getpage/${orderlist.current}/${orderlist.size}`)
    .then(function (res) {
      if (res.status === 200) {
        //更新数据的总页数
        totalPage.value = res.data.total;
        console.log("总页数:" + totalPage.value);
        orderlist.data = res.data.records;
      } else {
        ElMessage.error("数据请求失败!");
        console.log(res);
      }
    })
    .catch(function (e) {
      ElMessage.error("请求出错");
      console.log(e);
    });
};
getdata(); //调用数据初始化方法。

说明:Vue3生命周期中没有 created() 方法,以前在Vue2中写在created()的初始化方法,可以直接写在<script setup> 下。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Issac-Clarke

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值