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);
    }