vue + axios 实现分页参数传递，高级搜索功能实现

柔情只为你懂 2022-12-29 00:16 144阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue前端分页功能怎么实现

![bc2da4d0171e40d7bd6a4bcd9f700623.jpeg][] Vue前端分页功能可以通过以下几个步骤实现： 1. 安装分页组件库（如vue-pag

朴灿烈づ我的快乐病毒、/ 2023年10月10日 23:50/ 0 赞/ 10 阅读

相关 VUE + SpringBoot 分页功能实现

本文主要介绍一下 Vue + SpringBoot 中如何实现一个分页列表数据。 1、效果展示 ![watermark_type_ZmFuZ3poZW5naGVpdGk

喜欢ヅ旅行/ 2023年10月10日 11:51/ 0 赞/ 10 阅读

相关 vue + axios 实现分页参数传递，高级搜索功能实现

vue+axios写法 var vm = new Vue( { el:'log', //让vu掌握指定的视图区域div

柔情只为你懂/ 2022年12月29日 00:16/ 0 赞/ 145 阅读

相关 ListView实现分页功能

Android market里软件列表，每页显示10条记录，没有显示上一页，下一页的按钮，依靠手滑动动态加载数据，当向下滚动时，最下边显示 Loading… 。数据加载结

灰太狼/ 2022年07月28日 05:13/ 0 赞/ 259 阅读

相关 laravel实现搜索分页

一、控制器 / 搜索 / public function sou(){ //接值 $name=Input::get('name');

小灰灰/ 2022年06月01日 12:47/ 0 赞/ 230 阅读

相关分析分页功能实现

从业务的功能入手分析：功能实现通过一个触发按钮，客户端点击上一页，下一页，后台接收到一个值（page值），不同的值响应不同的内容。后端是来连接数据库进行传递，从而显示到js

傷城~/ 2022年05月24日 05:37/ 0 赞/ 300 阅读

相关 Vue+iview---分页功能的实现

背景订单系统前端使用vue框架，基于iview组件。当显示到表格的数据过多时，会进行分页处理。当然，分页有真分页和假分页，本次我们采用的是假分页。方法介绍

小灰灰/ 2022年03月06日 11:10/ 0 赞/ 218 阅读

相关 vue实现搜索功能

> 前言：最近小编也是刚跳槽新的公司一个月，前端技术栈是vue+element也是市面上比较常用的框架之一了，同时也花费一点时间总结一下最近的坑，react转vue的一个过程确

Love The Way You Lie/ 2022年01月22日 06:01/ 0 赞/ 340 阅读

相关实现搜索分页功能

1.1 需求分析实现搜索分页功能，每页显示30条记录。实现商品列表下方分页栏。 1.2 实现思路前端向后端传递参数 pageNo （页码） 1.3 代码实

川长思鸟来/ 2021年12月05日 05:51/ 0 赞/ 601 阅读

相关 JQuery实现分页功能

使用JQuery实现分页功能。 1、分页栏HTML码 <div class="g-cf g-pagerwp"> <div style="vis

拼搏现实的明天。/ 2021年09月17日 12:22/ 0 赞/ 698 阅读