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

柔情只为你懂 2022-12-29 00:16 212阅读 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 条评论，212人围观）

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

相关阅读

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

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

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

相关 VUE + SpringBoot 分页功能实现

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

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

相关 Vue分页简单功能的实现

Vue分页简单功能的实现这种方式适合数据量不是很大的页面分页上代码： <!DOCTYPE html> <html lang="en">

我会带着你远行/ 2023年07月09日 08:26/ 0 赞/ 69 阅读

相关 vue实现分页功能jiexi

首先我们先定义好分页效果 <div class="common-seo-page-box clearfix align-center assist">

ゝ一世哀愁。/ 2023年06月12日 09:29/ 0 赞/ 39 阅读

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

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

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

相关 laravel实现搜索分页

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

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

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

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

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

相关 vue实现搜索功能

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

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

相关实现搜索分页功能

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

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

相关 JQuery实现分页功能

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

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