基于SpringBoot+Mybatis plus+React.js实现条件选择切换搜索功能
笔记/朱季谦
在写React前端逻辑时,经常遇到可以切换不同条件的列表查询功能,例如下边截图这样的,其实,这块代码基本都一个逻辑,可以一次性将实现过程记录下来,待以后再遇到时,直接根据笔记复用即可。
一、首先,是前端React页面代码,这类搜索框,一般都是放在Form表单当中,然后使用有前缀下拉框选项的Input组件,这类模式的组件是在Input组件当中实现一个addonBefore属性即可,如下代码:
render () {
let { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.submit} layout={'inline'}>
<FormItem>
{getFieldDecorator('searchUser', {
initialValue: ""
})(
<Input allowClear placeholder="请输入搜索条件"
addonBefore={
getFieldDecorator('condition', {
initialValue: 'name'
})(
<Select style={{ width: 100 }}>
<Option value="name">学生姓名</Option>
<Option value="class">班级</Option>
<Option value="studentNo">学号</Option>
</Select>
)
}
/>
)}
</FormItem>
</Form>
);
}
二、写好表单页面后,就可以对该表单逻辑进行开发。因为该搜索框对应多种方式,但输入框只有一个,也就是多对一的情况,故而需要做一些转换,需要将输入框的值,相应转换为对应下拉框选项的值,因此,可以用switch判断来做转换,当然,你也可以用if-else,我试过if-else的效果,看起来就是一坨......
稍微解释一下这段代码,假如下拉框是以“学生姓名”为维度来搜索,那么表单的getFieldDecorator('condition')属性值即“name”,也就是values.condition==“name”,就会跳转至values.name = values.searchValue,就意味着是搜索条件name的值,为对应输入框的值values.searchValue。在表单当中,输入框的属性label是getFieldDecorator('searchUser')。
submit = (e) => {
e.preventDefault()
let { form, getStudentList } = this.props
let values = {}
form.validateFieldsAndScroll({ first: true },
((errors, value) => {
if (errors) {
message.error(getFormFirstErrorMsg(errors));
} else {
values = trimObjectValues(value);
switch (values.condition) {
case "name":
values.name = values.searchValue;
break;
case "className":
values.className = values.searchValue
break;
case "studentNo":
values.studentNo = values.searchValue
break;
default:
break;
}
getStudentList(params);
}
}))
}
3、最后,就是后端逻辑实现
@Data
public class Student {
private String name;
private String className;
private String sex;
}
public interface StudentMapper extends BaseMapper<Student> {}
这里使用了Mybatis plus的ORM框架,可以直接使用lambda表达式的搜索条件进行,因为搜索条件搜索,故而,需要用like的模糊搜索,搜索条件是name+"%",没有两边都用"%",是因为若第一个模糊条件有索引的话,那么"%"+name+"%"将会造成索引失效。
public List<Student> getStudents(Student reqVO) {
String name = reqVO.getName();
String className = reqVO.getClassName();
String sex = reqVO.getSex();
List<Student> students = studentMapper.selectList(
new QueryWrapper<Student>().lambda()
.like(StringUtils.isNotEmpty(name),Student::getName,name+"%")
.like(StringUtils.isNotEmpty(className),Student::getClassName,className+"%")
.like(StringUtils.isNotEmpty(sex),Student::getSex,sex+"%")
);
return students;
}
基于SpringBoot+Mybatis plus+React.js实现条件选择切换搜索功能的更多相关文章
- 基于SpringBoot+MyBatis实现一套电商系统
项目介绍 mall项目是一套电商系统,包括前台商城系统及后台管理系统,基于SpringBoot+MyBatis实现. 前台商城系统包含首页门户.商品推荐.商品搜索.商品展示.购物车.订单流程.会员中心 ...
- 基于SpringBoot+Mybatis+MySQL5.7的轻语音乐网
一个基于SpringBoot+Mybatis+MySQL5.7的轻语音乐网站项目 1.主要用到的技术: 使用maven进行项目构建 使用Springboot+Mybatis搭建整个系统 使用ajax连 ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- 基于SpringBoot开发一个Restful服务,实现增删改查功能
前言 在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练. ...
- 基于SpringBoot + Mybatis实现SpringMVC Web项目
一.热身 一个现实的场景是:当我们开发一个Web工程时,架构师和开发工程师可能更关心项目技术结构上的设计.而几乎所有结构良好的软件(项目)都使用了分层设计.分层设计是将项目按技术职能分为几个内聚的部分 ...
- JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识
JAVA WEB快速入门系列之前的相关文章如下:(文章全部本人[梦在旅途原创],文中内容可能部份图片.代码参照网上资源) 第一篇:JAVA WEB快速入门之环境搭建 第二篇:JAVA WEB快速入门之 ...
- 基于SpringBoot+Mybatis+AntDesign快速开发平台,Jeecg-Boot 1.1 版本发布
Jeecg-Boot 1.1 版本发布,初成长稳定版本 导读 平台首页UI升级,精美的首页支持多模式 提供4套代码生成器模板(支持单表.一对多) 集成Excel简易工具类,支持单表.一对多导入 ...
- 基于SpringBoot + Mybatis实现 MVC 项目
1.预览: (1)完整项目结构 (2) 创建数据库.数据表: [user.sql] SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- ...
- 基于Springboot+Mybatis+Element UI开发的钢贸供应链系统
小蓝钢贸云供应链系统以销售.采购.库存及财务一体化的设计理念,从供应商到客户的销售流程,实现订单.货物.资金的全面管控,并能对成本进行准确的跟踪与分析,为销售决策提供依据. 基于SpringBoot2 ...
随机推荐
- C#多线程---Task实现异步
一.场景 使用Task来进行累加操作. 二.例子-Task使用 1 using System; 2 using System.Collections.Generic; 3 using System.L ...
- SpringCloud商品服务调用方式之Ribbon
1.创建order_service项目 pom依赖 <dependency> <groupId>org.springframework.boot</groupId> ...
- Ubuntu中配置tomcat
1.从网上下载的tomcat配置失败后,servername那一栏写不了,必须要删除工作空间的配置文件 sudo rm /home/{username}/workspace/.metadata/.pl ...
- ES6扩展——函数扩展之默认参数
1.函数的默认参数 //函数的默认参数 function add(a, b = 999){ console.log(a,b); //1 999 } add(1); 2. 函数的形参可以设置默认值,默认 ...
- Win7/Win10+VS2017+OpenCV3.4.2安装、测试
安装VS2017 在微软官网https://www.microsoft.com,下载Visual Studio 2017安装包 用管理员权限运行vs2017 enterprise安装包,安装过程会持续 ...
- Win10 下安装Ubuntu 21.04桌面版 双系统 并设置win10为默认启动系统 详细教程
@ 目录 〇.写在前面 〇 - Plus:如何进入BIOS 〇 - Plus - Plus:U盘启动快捷键 一.磁盘分区:Win10划分未分配空间 二.下载Ubuntu 21.04镜像 三.安装U盘启 ...
- AtomicStampedReference AtomicReference解决CAS机制中ABA问题
AtomicStampedReference AtomicReference解决CAS机制中ABA问题 AtomicStampedReference AtomicStampedReference它内部 ...
- (八)羽夏看C语言——C番外篇
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇文章 ...
- SQL语句之高级使用
1.select top select top 用于规定要返回的数据的数目 注意:并非所有的数据库系统都支持 SELECT TOP 语句. MySQL 支持 LIMIT 语句来选取指定的条数数据, ...
- Mysql 面试宝典
实时更新 你用过哪些数据库? mysql redis mysql 和 redis 的区别? 比较点 Mysql Redis 数据库类型 关系型 非关系型 作用 持久化层 存储需要持久化的数据,数据存在 ...