VUE element UI 结合Spring Boot 的 Spring Data Jpa进行分页查询并且按id字段进行动态正序逆序排序

这不仅仅是前端查出全部数据，然后做假分页和排序，而是结合SpringData Jpa 以及其封装的进行真分页以及排序后查询，每次只从数据库动态获取指定条数和指定页码的数据,解决了全表查询数据量太大的问题。

首先是前端Vue的部分

写一个table加pagination并且绑定必要的方法

<div class="elshowtablediv">
            <div>
                <el-table
                        class="eltable1"
                        :data="UsertableData"
                        :header-cell-style="{background:'#F2F9FF', 'text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                        @sort-change="changeUsertableSort"
                        style="width: 85vw"
                        border>
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="180"
                            :sortable="'custom'">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="usernumber"
                            label="账号">
                    </el-table-column>
                    <el-table-column
                            prop="password"
                            label="密码">
                    </el-table-column>
                    <el-table-column
                            prop="userrole"
                            label="身份类型">
                    </el-table-column>

                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button
                                    circle
                                    size="mini"
                                    type="primary"
                                    icon="el-icon-edit"
                                    @click="handleEdit(scope.row)"></el-button>
                            <el-button
                                    circle
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="handleDelete(scope.row)"></el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>

            <div class="divpagenation">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[9, 15, 20, 50]"
                        :page-size="sortjsontableData.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>

数据定义以及所涉及到的js方法的部分

export default {
        name: "index1",
        data() {
            return {
                total: null,
                // currentpagesize: null, // 每页显示多少条
                // whichpage: 1, // 第几页
                UsertableData: [], // 查询表的数据载体
                currentPage4: 1,
                
                // 正序逆序get请求提交的字段
                sortjsontableData: {
                    page: 1, // 第几页
                    size: 9, // 每页显示多少条
                    sortType: 'ascending', //正序ascending逆序descending
                    sortableFields: 'id', //需要排序的字段
                }
            }
        },

        created() {
            const _this = this;
            // 默认每页九条数据，并且获取第一页的前9条
            axios.get(api123.baseURL + '/userfindAll/1/9').then(response => {
                const res = response.data;
                console.log(res);
                _this.UsertableData = res.content; //记录的内容
                _this.total = res.totalElements; //总记录数
                _this.sortjsontableData.size = res.size; //每页条数
            })
        },
        methods: {
            //改变·每页显示的条数
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.sortjsontableData.size = val; //赋值显示条数给处理分页handleCurrentChange()使用
                const _this = this;
                axios.get(api123.baseURL + '/findandsortPageable/'+this.sortjsontableData.page+'/' +this.sortjsontableData.size+'/'+this.sortjsontableData.sortType+'/'+this.sortjsontableData.sortableFields).then(response => {
                    const res = response.data;
                    _this.UsertableData = res.content; //记录的内容
                    // _this.total = res.totalElements; //总记录数
                })
            },
            // 处理分页
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.sortjsontableData.page = val; //赋值第几页给处理当前页handleSizeChange()使用
                const _this = this;
                axios.get(api123.baseURL + '/findandsortPageable/'+this.sortjsontableData.page+'/' +this.sortjsontableData.size+'/'+this.sortjsontableData.sortType+'/'+this.sortjsontableData.sortableFields).then(response => {
                    const res = response.data;
                    _this.UsertableData = res.content; //记录的内容
                    // _this.total = res.totalElements; //总记录数
                })

            },
            
            // 与后端通讯进行逆序排序
            changeUsertableSort(column) {
                // this.$message.info(column);
                // console.log("这是column对象"+column);
                //获取字段名称和排序类型
                const _this = this;
                let columnName = column.prop;
                let sortingType = column.order;
                // this.sortjsontableData.page = this.whichpage;
                // this.sortjsontableData.size = this.currentpagesize;
                this.sortjsontableData.sortType = sortingType;
                this.sortjsontableData.sortableFields = columnName;
                this.$message.info("排序类型为："+sortingType+",排序列字段为:"+columnName);

                axios.get(api123.baseURL + '/findandsortPageable/'+this.sortjsontableData.page+'/' +this.sortjsontableData.size+'/'+this.sortjsontableData.sortType+'/'+this.sortjsontableData.sortableFields).then(response => {
                    // '/userfindAll/' + this.whichpage + '/'+val+''
                    const res = response.data;
                    _this.UsertableData = res.content; //记录的内容
                    // _this.total = res.totalElements; //总记录数
                })

            }

        }
    }

这里用到的所有分页以及排序方法和相关的监听请参考elementui官方文档的解释
地址附上:
排序点进去看table里面的排序部分即可
 分页点进去看pagination

后端SpringBoot部分代码

controller类中代码

import com.cmkjspringboot.chemicalsystem.dao.UserDao;
import com.cmkjspringboot.chemicalsystem.entity.User;
import com.cmkjspringboot.chemicalsystem.repository.UserRepository;
import com.cmkjspringboot.chemicalsystem.service.UserService;
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.data.domain.Sort;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import static org.springframework.data.domain.Sort.by;

@RestController
public class UserController {
    @Autowired
    private UserRepository userRepository;
    
    //查询全部用户并分页返回(仅分页不排序)
    @GetMapping("/userfindAll/{page}/{size}")
    public Page<User> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size) {
        // 使用Jpa封装好的page方法page-1是因为数组从0开始的前端传过来第1页实际上是数组的第0页
        Pageable pageable = PageRequest.of(page - 1, size);
        return userRepository.findAll(pageable);
    }

    //查询用户分页并且绑定id字段来进行正序逆序排序
    @GetMapping("/findandsortPageable/{page}/{size}/{sortType}/{sortableFields}")
    public Page<User> testPageable(
            @PathVariable("page") Integer page, // 第几页
            @PathVariable("size") Integer size, // 显示多少条
            @PathVariable("sortType") String sortType, // 正序还是逆序
            @PathVariable("sortableFields") String sortableFields //需要按照哪一个字段域来排序
    ) {
        System.out.println("前端传来的配置sort"+page+size+sortType+sortableFields);
        //判断排序类型及排序字段
        Sort sort = "ascending".equals(sortType) ? by(Sort.Direction.ASC, sortableFields) : by(Sort.Direction.DESC, sortableFields);
        //获取pageable
        Pageable pageable = PageRequest.of(page-1,size,sort);
        return userRepository.findAll(pageable);

    }

   
}

repository类代码，其实就只用写一个 extends 继承jpa类就行了就一行代码

public interface UserRepository extends JpaRepository<User, Integer> {
}

实现效果如下
默认：
第一页
在这里插入图片描述
最后一页

逆序后
第一页
在这里插入图片描述
最后一页

有不懂或者我写的不妥的地方欢迎大家评论一起学习交流

完整的项目地址(github)
https://github.com/h03147/chemicaladminsystem