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

news2024/11/16 9:38:18

前后端数据交互

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

完成本节课的内容将会实现以下功能:

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

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

多条件搜索并分页展示

(一)后端代码

 1、UserMapper类

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

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

         查询了全部数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1502293.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OWASP Top 10 网络安全10大漏洞——A03:2021-注入

10大Web应用程序安全风险 2021年top10中有三个新类别、四个类别的命名和范围变化&#xff0c;以及一些合并。 A03:2021-注入 Injection从第一的位置滑落至第三位置。94% 的应用程序针对某种形式的注入进行了测试&#xff0c;最大发生率为 19%&#xff0c;平均发生率为 3%&a…

Mint_21.3 drawing-area和goocanvas的FB笔记(五)

FreeBASIC SDL图形功能 SDL - Simple DirectMedia Layer 是完整的跨平台系统&#xff0c;有自己的窗口、直接捕获键盘、鼠标和游戏操纵杆的事件&#xff0c;直接操作音频和CDROM&#xff0c;在其surface上可使用gfx, openGL和direct3D绘图。Window3.0时代&#xff0c;各种应用…

11.Node.js入门

一.什么是 Node.js Node.js 是一个独立的 JavaScript 运行环境&#xff0c;能独立执行 JS 代码&#xff0c;因为这个特点&#xff0c;它可以用来编写服务器后端的应用程序 Node.js 作用除了编写后端应用程序&#xff0c;也可以对前端代码进行压缩&#xff0c;转译&#xff0c;…

win11中微软商店如何使用微信支付?microsoft store支付教程

Microsoft Store是由微软公司提供的一个数字分发平台&#xff0c;用于购买和下载Windows操作系统及其相关应用、游戏、音乐、电影、电视节目和其他数字内容。该平台最初是作为Windows 8的一部分引入的&#xff0c;后来也适用于Windows 10和其他Microsoft平台。 以下是Microsof…

ROS——用VirtualBox虚拟一台计算机

打开软件后会出现这个界面&#xff0c;点击新建 然后出现这个界面 名称可以自己任取 &#xff0c;点击文件夹后边的箭头会出现这个界面&#xff0c;点其他可以自己选择虚拟机位置&#xff0c;默认C盘 版本和类型因为我们需要的是 Ubuntu&#xff0c;所以类型选择Linux&#xf…

Neo4j 新手教程 环境安装 基础增删改查 python链接 常用操作 纯新手向

Neo4j安装教程&#x1f680; 目前在学习知识图谱的相关内容&#xff0c;在图数据库中最有名的就是Neo4j,为了降低入门难度&#xff0c;不被网上很多华丽呼哨的Cypher命令吓退&#xff0c;故分享出该文档&#xff0c;为自己手动总结&#xff0c;包括安装环境&#xff0c;增删改查…

LeetCode146题:LRU缓存(python3)

代码思路&#xff1a; Python 默认是用 dict 存储属性的&#xff0c;每次用 . 访问属性都需要查字典。如果声明 slots 就不会创建字典&#xff0c;而是改用指针偏移量直接拿到属性对象。所以即节省了内存&#xff08;没有字典&#xff09;又节省了时间&#xff08;省去查字典的…

k8s-生产级的k8s高可用(1) 24

高可用集群 实验至少需要三个master&#xff08;控制节点&#xff09;&#xff0c;一个可以使外部可以访问到master的load balancer&#xff08;负载均衡&#xff09;以及一个或多个外部节点worker&#xff08;也要部署高可用&#xff09;。 再克隆三台主机 清理并重启 配置两…

Vue 项目性能优化指南:提升应用速度与效率

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Pinctrl子系统_04_Pinctrl子系统主要数据结构

引言 本节说明Pinctrl子系统中主要的数据结构&#xff0c;对这些数据结构有所了解&#xff0c;也就是对Pinctrl子系统有所了解了。 前面说过&#xff0c;要使用Pinctrl子系统&#xff0c;就需要去配置设备树。 以内核面向对象的思想&#xff0c;设备树可以分为两部分&#x…

7. 镜面网格

E . 镜面网格 E.镜面网格 E.镜面网格 每次测试时限&#xff1a; 2 秒 每次测试时限&#xff1a;2 秒 每次测试时限&#xff1a;2秒 每次测试的内存限制&#xff1a; 256 兆字节 每次测试的内存限制&#xff1a;256 兆字节 每次测试的内存限制&#xff1a;256兆字节 题目描述 给…

深度学习与人类的智能交互:迈向自然与高效的人机新纪元

引言 随着科技的飞速发展&#xff0c;深度学习作为人工智能领域的一颗璀璨明珠&#xff0c;正日益展现出其在模拟人类认知和感知过程中的强大能力。本文旨在探讨深度学习如何日益逼近人类智能的边界&#xff0c;并通过模拟人类的感知系统&#xff0c;使机器能更深入地理解和解…

每日OJ题_牛客HJ86 求最大连续bit数(IO型OJ)

目录 牛客HJ86 求最大连续bit数 解法代码 牛客HJ86 求最大连续bit数 求最大连续bit数_牛客题霸_牛客网 解法代码 #include <iostream> using namespace std; int main() {int n 0, cnt 0, ret 0;cin >> n;for (int i 0; i < 32; i){if (n & (1 <…

uniapp富文本编辑-editor-vue2-vue3-wangeditor

前言 除了“微信小程序”&#xff0c;其他小程序想要使用editor组件实现富文本编辑&#xff0c;很难vue3项目 官方组件editor&#xff0c;在初始化时有点麻烦&#xff0c;建议搭配第三方组件wangeditor 写在前面 - editor组件缺少editor-icon.css 内容另存为editor-icon.css…

Springboot+vue的物业管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的物业管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的物业管理系统&#xff0c;采用M&#xff08;model&#xff09;V&#xff…

【Haproxy】Haproxy的配置和应用

HAProxy介绍 HAProxy是法国开发者威利塔罗(Willy Tarreau)在2000年使用C语言开发的一个开源软件&#xff0c;是一款具备高并发(一万以上)、高性能的TCP和HTTP负载均衡器&#xff0c;支持基于cookie的持久性&#xff0c;自动故障切换&#xff0c;支持正则表达式及web状态统计&a…

server win搭建apache网站服务器+php网站+MY SQL数据库调用电子阅览室

一、适用场景&#xff1a; 1、使用开源的免费数据库Mysql&#xff1b; 2、自己建网站的发布&#xff1b; 3、使用php代码建网站&#xff1b; 4、使用windows server作为服务器&#xff1b; 5、使用apache作为网站服务器。 二、win server 中apache网站服务器搭建 &#xff0…

AlexNet 网络结构详解

一、基本了解 什么是过拟合&#xff1f; 解决方法 AlexNet网络结构通过使用dropout方法&#xff0c;使一些神经元失活&#xff0c;变相的减少了网络训练的参数化&#xff0c;从而实现减少过拟合。 二、AlexNet网络结构的详细解释 他是由上下两组GPU进行运算的&#xff0c;所以…

数据结构 - 栈和队列

本篇博客将介绍栈和队列的定义以及实现。 1.栈的定义 栈是一种特殊的线性表&#xff0c;只允许在固定的一端进行插入和删除数据&#xff0c;插入数据的一端叫做栈顶&#xff0c;另一端叫做栈底。栈中的数据遵守后进先出的原则 LIFO (Last In First Out)。 插入数据的操作称为压…

遥感卫星影像数据产品级别概述及卫星影像获取

1986年&#xff0c;美国航空航天局&#xff08;NASA&#xff09;定义了一系列数据处理"级别"&#xff0c;用以区分源于其地球观测系统&#xff08;EOS&#xff09;卫星获取的影像生成的标准数据产品。给定任何数据产品&#xff0c;我们可以根据其级别来判断其在生产过…