JAVA前后端传输数据，分页查询

背景介绍：

      前端使用vue和axios技术传输数据到后端，传输的数据时相应的分页信息和查询条件

      后端使用：springBoot和mybatis-plus框架进行查询数据并分页

      业务情景: 实现对某类（Book） 的查询操作

解决问题：

      在进行带条件的分页查询的时候，需要传入分页信息（当前页以及页面大小信息）和相应的查询条件。如果切换当前页码的时候，不传入所查询条件的信息，会导致点击之后切换页码的时候查询的是所有的信息。

 思路：

      我们在前端传输数据可以氛围两种形式进行传参：

     第一种，通过get的方式，把所需的页面信息和查询条件，当作一个个的参数进行传输。

    前端的代码：

 这里所有的条件以及页面的当前页，和页面大小，都是当作单个参数而不是封装到一个类种进行传输的。

  openQuery2() {
                console.log(this.bookname);
                const queryParams = {
                    name: this.book.name,
                    currentPage: this.pageInfo.currentPage,
                    pagesize: this.pageInfo.pagesize,
                };

                axios.get("/books/condition", { params: queryParams }).then((res) => {
                    this.dataList = res.data.data.records;
                    this.pageInfo.total = res.data.data.total;
                    // this.pageInfo.currentPage = res.data.data.current;
                    this.pageInfo.pagesize = res.data.data.size;
                });
            },

后端代码：

这里会根据接收参数的类型和传入的参数，自动的匹配。（注意这里需要提前创建好page1类和Book ,并且里面的参数名称要和相应前端穿过类的参数名称一致）

 /**
     * 通过相应的get进行传参数，传输的是一个个单独的参数，并非类
     * @param pageInfo
     * @param book
     * @return
     */
    @GetMapping ("/condition")
    public Result selectBooks( page1 pageInfo,Book book) {
        System.out.println(pageInfo);
        System.out.println(book);
        IPage<Book> books = bookService.selectBooks(book,pageInfo);
//        System.out.println(books);
        Integer code= books !=null ? Code.GET_OK:Code.GET_ERR ;
//        return books;
        return new Result(code,books,"查询成功");

    }

第二种方法，把相应的查询的条件和分页信息当作类里面的数据进行传输；

前端代码：

 openQueryByClass() {
                console.log(this.bookname);
                // 传对象的 时候需保证这里的对象名称和相应的接受参数封装类中的属性一致。
                // 比如这里采用的时queryParams类封装两个类：condition,和page
                //所以相应的后台代码中需要进行相应的顶一个类进行接收包含这两个类的数据，
                // 这里代码中的例子时：QueryCondition，这里面两个
                // public class QueryCondition<T> {
                //     private page1 page;
                //     private T condition;
                //
                //     // Getters and setters
                // }
                const queryParams = {
                    condition: this.book,
                    page: this.pageInfo,
                };

                axios.post("/books/condition2",  queryParams ).then((res) => {
                    this.dataList = res.data.data.records;
                    this.pageInfo.total = res.data.data.total;
                    // this.pageInfo.currentPage = res.data.data.current;
                    this.pageInfo.pagesize = res.data.data.size;
                });
            },

后端代码：

首先创建一个接受数据的类：

这里使用泛型来接受不同种类的条件。为了方便以后代码扩展，比如增加工具，车辆等类的查询条件。

package com.ct.domain;

import lombok.Data;

@Data
public class QueryCondition<T> {
    private page1 page;
    private T condition;

    // Getters and setters
}

之后后端接受相应的参数并进行处理：

  
    /**
     * 通过相应的get进行传参数，传输的是一个个类
     * @param queryCondition
     * @return
     */
    @PostMapping ("/condition2")
    public Result selectBooksByClass(@RequestBody QueryCondition<Book> queryCondition) {
        System.out.println("**************");
        System.out.println(queryCondition.getPage());
        System.out.println(queryCondition.getCondition());
        System.out.println("**************");
        System.out.println("**************");
        IPage<Book> books = bookService.selectBooks(queryCondition.getCondition(),queryCondition.getPage());
//        System.out.println(books);
        Integer code= books !=null ? Code.GET_OK:Code.GET_ERR ;
//        return books;
        return new Result(code,books,"查询成功");

    }