[Springboot] Based on annotation development Springboot-Vue3 integrates Mybatis-plus to implement paging query (2) – front-end el-pagination implementation

Series of articles

[Springboot] Based on annotation development Springboot-Vue3 integrates Mybatis-plus to implement paging query – back-end implementation

Article directory

• Series of articles
• system version
• Implement function
• Implementation ideas
• Data format passed in from backend
• frontendel-table
• Encapsulate axois interface
• Introducing the el-pagination paging component of Element-plus
• Axois gets background data

System version

Backend: Springboot 2.7, Mybatis-plus
Database: MySQL 8.0
Front-end: Vue3, Axois 1.6.0, Vite 4.5.0, Element-Plus, Router-v4

Implement function

The above article mainly uses the method provided by Mybatis-plus from the back end to implement the paging function. The current page needs to be passed in the url, and how many pieces of data are displayed on each page. This article will combine the el-pagination component of Element-plus to call background data to achieve the paging effect. The following demonstrates a function, such as paging query of Orders records. Readers can modify it according to their own entity class.

Implementation ideas

First write an axois that obtains the IPage type data returned by the background. After obtaining the data, when the user selects how many pages per page or selects a specific number of pages on the front end, the api for obtaining the data is re-triggered.

Data format passed in from the backend

The data returned by the backend actually looks like this. The current page, the total number of pages, and how much data is displayed on each page are all actually there. The frontend only needs to get these parameter values:

Front-end el-table

 <el-table :data="orderlist.data" style="width: 90%">
      <el-table-column sortable prop="orderId" label="Order Number" width="200" />
      <el-table-column sortable prop="checkIn" label="Check-in time" width="200" />
      <el-table-column sortable prop="checkOut" label="Departure time" width="200" />

      <el-table-column prop="clientName" label="Name" width="100" />
      <el-table-column prop="clientSex" label="gender" width="100" />
      <el-table-column prop="clientCard" label="ID card number" width="200" />
      <el-table-column prop="clientPhone" label="Contact" width="150" />
      <el-table-column label="room type" prop="roomType" width="200" />

      <el-table-column prop="" label="Operation" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
            >Details</el-button
          >
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>

Encapsulating axois interface

In the project src directory, create another folder /request and create api.js in it. The content is to create an axois instance and simply encapsulate axois.

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

Introducing the el-pagination paging component of Element-plus

Official website: Element-plus-elpagination

The following currentPage, totalPage, and pageSize are all return data fields of the backend IPage type.

• The total parameter is used to display how many pieces of data there are.
• :page-sizes consists of an array, and the optional values inside represent how many pieces of data can be selected on each page.
• current-page represents the page number of the currently selected page;
• page-size: Used to obtain the number of pages sent from the backend.

Use reactive to implement responsiveness through ref. After obtaining the background data, the data in these fields will be overwritten by the incoming data from the backend to obtain the real page size, current page and other parameters.

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

We need to define methods: handleSizeChanged and method handleCurrentChange to respond when the user clicks to switch page numbers or switch the data displayed on each page. The method I designed here is that when the user performs the above operation, the method returns the user to the specific page to switch to, or selects how many pieces of data per page, and then stores it in the orderlist and uses its internal fields to receive it.

 <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"
      />

We use the orderlist method to store the total number of pages, the current page, and how many pieces of data are displayed on each page from the background.

const currentPage = ref(1);
const pageSize = ref(5);
const totalPage = ref(20);
// const pageSize = ref(5);
let orderlist = new reactive({<!-- -->
  //Test information after paging
  current: 1, //Current page
  total: null, //Number of records
  size: 5, //Number of items per page
  data: [],
});

The handleCurrentChange and handleSizeChanged methods are as follows:

const handleSizeChange = (val) => {<!-- -->
  orderlist.size = val;
  console.log("Call the page size monitoring function and pass the parameters as follows:");
  console.log("orderlist.current=== " + orderlist.current);
  console.log("orderlist.size ===== " + orderlist.size);
  getdata();
};
const handleCurrentChange = (val) => {<!-- -->
  orderlist.current = val;
  console.log("Call the current page monitoring function and pass the parameters as follows:");
  console.log("orderlist.current=== " + orderlist.current);
  console.log("orderlist.size ===== " + orderlist.size);
  getdata();
};

Axois gets background data

Use anti-single quotes to splice request url parameters. The usage of anti-single quotes to splice parameters is as follows:
See details
Vue-Router Programmatic Navigation

// We can create the url manually, but we have to handle the encoding ourselves
router.push(`/user/${<!-- -->username}`) // -> /user/eduardo
// Same
router.push({<!-- --> path: `/user/${<!-- -->username}` }) // -> /user/eduardo

In this project, write the method to obtain axois:

const getdata = () => {<!-- -->
  api
    .get(`/getpage/${<!-- -->orderlist.current}/${<!-- -->orderlist.size}`)
    .then(function (res) {<!-- -->
      if (res.status === 200) {<!-- -->
        //Update the total number of pages of data
        totalPage.value = res.data.total;
        console.log("Total number of pages: " + totalPage.value);
        orderlist.data = res.data.records;
      } else {<!-- -->
        ElMessage.error("Data request failed!");
        console.log(res);
      }
    })
    .catch(function (e) {<!-- -->
      ElMessage.error("Request error");
      console.log(e);
    });
};
getdata(); //Call the data initialization method.

Note: There is no created() method in the Vue3 life cycle. The initialization method previously written in created() in Vue2 can be written directly in