本篇内容介绍了“如何实现SpringBoot+Mybatis plus+React条件选择切换搜索”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
在写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条件选择切换搜索”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。