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