基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程(五)——多条件搜索并分页展示

前后端数据交互

书接上文,我们上节课通过前后端数据交互实现了分页查询和单条件搜索分页查询的功能,最后留了个小尾巴,就是把其他两个搜索条件(email,address)也加进来,实现多条件搜索并分页展示。这节课我们一起来完善一下。
完成本节课的内容将会实现以下功能:

搜索框内输入的是0~N个条件时都能进行数据查询并分页展示。

如下图:我只输入 树 或者 qq.com 或者 园 其中任意一个条件都能进行查询 ,或者我什么条件也不输入点击搜索他查询全部数据。

多条件搜索并分页展示

(一)后端代码

1、UserMapper类

注意:注解方式下该写的注解都不要落下,否则后面报奇奇怪怪找不到某个参数的错误!!!!

java 复制代码
 @Select("select * from sys_user where username like #{userName} and email like #{email} and address like #{address} limit #{pageNum},#{pageSize}")
    List<User> selectPage(@Param("pageNum") Integer pageNum,
                          @Param("pageSize") Integer pageSize,
                          @Param("userName") String userName,
                          @Param("email") String email,/*新增参数*/
                          @Param("address") String address/*新增参数*/);

    //查询数据总条数接口及sql
    @Select("select count(*) from sys_user where username like #{userName} and email like #{email} and address like #{address}")
    Integer selectTotal(@Param("userName") String userName,@Param("email") String email,@Param("address") String address);

2、UserSevice类

如下图稍作修改,增加两个参数

3、UserController类

如下图稍作修改,增加两个参数,记得注解要加好。

(二)前端代码

1、按下图进行双向绑定

(三)运行项目(以下均为模糊查询)

1、仅传一个参数:"树"

2、传2个参数

3、传3个参数

4、一个参数也不传

查询了全部数据

相关推荐
老胖闲聊3 分钟前
Python Django完整教程与代码示例
数据库·python·django
践行见远8 分钟前
django之请求处理过程分析
数据库·django·sqlite
Antonio91510 分钟前
【Linux】 Linux 进程控制
linux·运维·服务器
行星00823 分钟前
Postgresql常用函数操作
数据库·postgresql
程序员葵安42 分钟前
【Java Web】9.Maven高级
java·数据库·后端·maven
不想头秃a1 小时前
JavaEE初阶-网络编程
java·运维·服务器·网络
海棠一号1 小时前
Android Settings 数据库生成、监听与默认值配置
android·数据库
新时代苦力工1 小时前
MVCC机制:Undo Log版本链与ReadView机制
数据库·mysql
西阳未落1 小时前
Linux(12)——基础IO(下)
linux·运维·服务器
什么半岛铁盒1 小时前
云服务器Xshell登录拒绝访问排查
运维·服务器