vue + axios 實現分頁引數傳遞，高階搜尋功能實現

vue+axios寫法

var vm = new Vue(
    {
        el:'#log', //讓vu掌握指定的檢視區域div
        data:{  //資料
            log:{
                logId:'',
                userId:'',
                userName:'',
                ip:'',
                time:'',
                path:'',
                method:'',
                companyId:'',
                companyName:'',
            },
            viewid:1, //控制檢視的狀態  ==1 顯示列表，==2 新增, == 3 修改，==4 高階搜尋
            pi:'',  //分頁資訊
            logList:[], //查詢商品分類列表
            curr: 1,    //當前頁數
            pageSize: 10,    //每頁記錄數
            total: 0,   //總記錄數
        },
        methods:{
            //查詢滿足條件的資料通過分頁顯示，無條件全查
            findByPage:function(){
                var vm = this
                // this.log = {}   //清空當前物件 //傳遞引數後臺通過@RequestBody接收，不能使用get方式，get沒有請求體
                axios.post('/OnlineMall/system/log',{
                    //post body
                    // log: vm.log
                    logId: vm.log.logId,
                    userId: vm.log.userId,
                    userName: vm.log.userName,
                    ip: vm.log.ip,
                    time: vm.log.time,
                    path: vm.log.path,
                    method: vm.log.method,
                    companyId: vm.log.companyId,
                    companyName: vm.log.companyName,
                },{
                    params:{
                        //query
                        curr: vm.curr,
                        pageSize: vm.pageSize,
                    }
                })
                    .then(function (response) {//正常
                        vm.logList = response.data.data.list;   //瀏覽器除錯發現資料在response.data.data.list中
                        vm.pi = response.data.data;
                        vm.viewid = 1;  //顯示查詢結果
                    })
                    .catch(function (err) {//請求失敗
                        console.log(err);
                        alert(err);
                    });
            },
            back:function(){    //點選返回，將狀態設為1，顯示錶單列表
                var vm = this
                this.log = {} //返回清空物件     【***】這裡設定判斷 if(viewid!=4) 不是搜尋的時候返回就清空
                vm.viewid = 1
            },
            showSearchForm:function(){    //點選高階搜尋，將狀態設為4，顯示錶單列表
                var vm = this
                vm.viewid = 4
            },
            clear:function(){    //清空當前的物件product
                var vm = this
                this.log = {}   //清空物件的屬性（但是不能清空物件的子物件）
            },
            //分頁
            pageChange(e) { // 點選上一頁下一頁時改變分頁導航的樣式，同時查詢下一條記錄
                // this.pi.page = e.page;
                this.curr = e.curr;     //當前頁
                this.pageSize = e.pageSize;     //每頁資料量
                this.findByPage();
            }
        },
        //當vue物件建立完畢之後需要執行的函式（也就是頁面載入完成的時候執行）
        created:function () {
            this.findByPage()
        }
    }
) //建立了MVVM中的VM物件

後臺Controller接收引數

    //按照條件分頁顯示（全查、高階搜尋顯示）
    @PostMapping
    public Object findByPage(@RequestBody Log log, @RequestParam(defaultValue = "1") int curr, @RequestParam(defaultValue = "10") int pageSize){
        System.out.println("條件log : " + log);
        PageInfo<Log> pi = logService.findByPage(log, curr, pageSize);
        return Result.init(true,StatusCode.SUCCESS,"搜尋成功",pi);
    }