在家帮别人做网站赚钱,seo网络营销工程师,wordpress给栏目页加后缀,大企业服务品牌建设笔记/朱季谦
在写React前端逻辑时#xff0c;经常遇到可以切换不同条件的列表查询功能#xff0c;例如下边截图这样的#xff0c;其实#xff0c;这块代码基本都一个逻辑#xff0c;可以一次性将实现过程记录下来#xff0c;待以后再遇到时#xff0c;直接根据笔记复用…笔记/朱季谦
在写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 valuename学生姓名/OptionOption valueclass班级/OptionOption valuestudentNo学号/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.propslet 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.searchValuebreak;case studentNo:values.studentNo values.searchValuebreak;default:break;}getStudentList(params);}}))}3、最后就是后端逻辑实现
Data
public class Student {private String name;private String className;private String sex;
}
public interface StudentMapper extends BaseMapperStudent {}这里使用了Mybatis plus的ORM框架可以直接使用lambda表达式的搜索条件进行因为搜索条件搜索故而需要用like的模糊搜索搜索条件是name%没有两边都用%是因为若第一个模糊条件有索引的话那么%name%将会造成索引失效。
public ListStudent getStudents(Student reqVO) {String name reqVO.getName();String className reqVO.getClassName();String sex reqVO.getSex();ListStudent students studentMapper.selectList(new QueryWrapperStudent().lambda().like(StringUtils.isNotEmpty(name),Student::getName,name%).like(StringUtils.isNotEmpty(className),Student::getClassName,className%).like(StringUtils.isNotEmpty(sex),Student::getSex,sex%));return students;}
