基于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、一个参数也不传

查询了全部数据

相关推荐
z123456789862 小时前
2026最新两款AI编程工具深度对比实测
java·数据库·ai编程
程序猿DD2 小时前
一个 API Key,统一调用大模型、生图和联网搜索
数据库·网关
王维同学3 小时前
[原创][Windows C++]LSA 认证、安全与通知包的注册表枚举
c++·windows·安全
YCOSA20253 小时前
雨晨 Windows 11 IOT 企业版 LTSC 24H2 轻装 2合1 26100.8968
windows·物联网
TlSfoward3 小时前
抓包代理链路下的 TLS 指纹变化分析 TLSFOWARD抓包工具
数据库·爬虫·网络协议·搜索引擎·php
汤姆yu3 小时前
CodeGeeX 4完整安装与实操使用全指南
人工智能·windows·ai·智能体·视频模型
数智化管理手记4 小时前
账龄分析手工统计易遗漏?自动账龄分析工具怎么搭建
大数据·网络·数据库·人工智能·数据挖掘
LabVIEW开发4 小时前
NI Package Manager安装LabVIEW时InternalServerError错误
网络·数据库·labview·labview知识·labview功能·labview程序
SelectDB4 小时前
PostgreSQL 实时同步到 Apache Doris:一站式 CDC 解决方案
数据库
Database_Cool_5 小时前
AI Agent 长期记忆怎么存?阿里云 PolarDB-X 对接 Mem0 记忆框架实践
数据库·阿里云