2021-08-11

SpringBoot-Vue前后端 分页功能实现DEMO

vue main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css'

Vue.use(elementUI)

import axios from 'axios'
Vue.prototype.axios = axios

import qs from 'qs';
Vue.prototype.qs = qs;

前后端 分页功能实现

前端
vue页码分页
<div class="pages">
      <el-pagination
        background
        :disabled = "disablePage"
        :current-page.sync="currentPage"  //当前1
        small
        layout="prev, pager, next"
        :page-size="pageSize" //条数5
        :total="total"
        @current-change="handleCurrentChange"> //当前页功能
      </el-pagination>
</div>

tableData:[]

postData

qs.stringify
page: this.currentPage,

handleCurrentChange() {
        console.log(`当前页: ${this.currentPage}`);
        let postData = this.qs.stringify({
          page: this.currentPage,
       <!--userName: this.search_use-->
        });
        this.axios({
          method: 'post',
          url:'/page',
          data: postData
        }).then(response =>
        {
          this.tableData = response.data;
        }).catch(error =>
        {
          console.log(error);
        });
      },

page

handleCurrentChange

后端
controller
/**
     * 分页
     * @return
     */
    @RequestMapping(value="/page")
    @ResponseBody
    public List<User> page(String userName,String sex,String companyName,Integer page){
        int pageNow = page == null ? 1 : page;
        int pageSize = 5;
        int startRows = pageSize*(pageNow-1);
        return userService.queryPage(userName,sex,companyName,startRows);
    }

mapper
<select id="sqPage" resultMap="BaseResultMap" >
        select * from user
        <where>
            deleteflag != 'Y'
            <if test="userName != null and userName !=''">
                and user_name like concat('%', #{userName}, '%')
            </if>
            <if test="companyName != null and companyName !=''">
                and company_name = #{companyName}
            </if>
            <if test="sex != null and sex !=''">
                and sex = #{sex}
            </if>
        </where>

        order by user_id <!-- desc-->
        limit #{startRows},5   <!-- 分页每页条数-->

    </select>