SpringBoot + Vue实现分页查询

后端

在controller层修改

SpringBoot自带分页查询方法，只需要修改关键代码就可以

 @GetMapping("/findAll/{page}/{size}") //获取url输入的页码
    public Page<Users> findAll(@PathVariable("page") int page, @PathVariable("size") int size) { //将页码取到方法内
        Pageable pageable = PageRequest.of(page -1 , size); // page从0开始的，所以需要-1
        return usersRepository.findAll(pageable);
    }

UserHandler.java

package com.example.springboottest.controller;


import com.example.springboottest.entity.Users;
import com.example.springboottest.repository.UsersRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserHandler {

    @Autowired
    private UsersRepository usersRepository;

    @GetMapping("/findAll/{page}/{size}")
    public Page<Users> findAll(@PathVariable("page") int page, @PathVariable("size") int size) {
        Pageable pageable = PageRequest.of(page -1 , size);
        return usersRepository.findAll(pageable);
    }

}

url测试

前端

需要在表格下面编写页码el代码

  <el-pagination
                background
                layout="prev, pager, next"
                page-size="6"
                :total="total"
                @current-change="page">
        </el-pagination>

记得安装axios

AJAX需要调用这个url

  page(currentPage) {
                const _this = this
                axios.get('http://localhost:8181/user/findAll/'+ currentPage +'/6').then(function (resp) {
                    _this.tableData =resp.data.content;
                    _this.total = resp.data.totalElements;
                })

            }

这是这个界面的全部代码

<template>
    <div class="full-height">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="ID"
                    width="150">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="name"
                    label="名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="birthday"
                    label="生日"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                page-size="6"
                :total="total"
                @current-change="page">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            page(currentPage) {
                const _this = this
                axios.get('http://localhost:8181/user/findAll/'+ currentPage +'/6').then(function (resp) {
                    _this.tableData =resp.data.content;
                    _this.total = resp.data.totalElements;
                })

            }
        },
        created() {
            const _this = this
            axios.get('http://localhost:8181/user/findAll/1/6').then(function (resp) {
                _this.tableData =resp.data.content;
                _this.total = resp.data.totalElements;
            })

        },
        data() {
            return {
                total: null,
                tableData: null
            }
        }
    }
</script>
<style>
    .full-height {
        height: 100vh;
        overflow: hidden;
    }

    /* 如果你想要让el-table铺满整个高度，可以设置其高度为100% */
    .full-height el-table {
        height: 100%;
    }

    /* 如果你想要让el-pagination铺满整个宽度，可以设置其宽度为100% */
    .full-height el-pagination {
        width: 100%;
    }
</style>

实现截图