SpringBoot+Mybatis plus+React实现条件选择切换搜索实践

 更新时间:2021年09月29日 16:05:44   作者:朱季谦  
本文主要介绍了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实现条件选择切换搜索实践的文章就介绍到这了,更多相关SpringBoot+Mybatis plus+React条件选择切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 完美解决Server returned HTTP response code:403 for URL报错问题

    完美解决Server returned HTTP response code:403 for URL报错问题

    在调用某个接口的时候,突然就遇到了Server returned HTTP response code: 403 for URL报错这个报错,导致获取不到接口的数据,下面小编给大家分享解决Server returned HTTP response code:403 for URL报错问题,感兴趣的朋友一起看看吧
    2023-03-03
  • SpringSecurity定义多个过滤器链的操作代码

    SpringSecurity定义多个过滤器链的操作代码

    Spring Security 是 Spring家族中的一个安全管理框架。相比与另外一个安全框架Shiro,它提供了更丰富的功能,社区资源也比Shiro丰富,今天通过本文给大家介绍SpringSecurity定义多个过滤器链的实例,感兴趣的朋友跟随小编一起看看吧
    2023-04-04
  • SpringBoot中RestTemplate的使用详解

    SpringBoot中RestTemplate的使用详解

    这篇文章主要介绍了SpringBoot中RestTemplate的使用详解,RestTemplate是由Spring框架提供的一个可用于应用中调用rest服务的类它简化了与http服务的通信方式,统一了RESTFul的标准,封装了http连接,我们只需要传入url及其返回值类型即可,需要的朋友可以参考下
    2023-10-10
  • java异步执行代码处理方法(先返回结果,后执行代码)

    java异步执行代码处理方法(先返回结果,后执行代码)

    这篇文章主要给大家介绍了关于java异步执行代码处理方法的相关资料,先返回结果,后执行代码,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • java实现省市区三级联动

    java实现省市区三级联动

    这篇文章主要为大家详细介绍了java实现省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 使用Spring Boot上传文件功能

    使用Spring Boot上传文件功能

    上传文件是互联网中常应用的场景之一,最典型的情况就是上传头像等,今天就带着大家做一个Spring Boot上传文件的小案例,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-01-01
  • Spring使用注解进行对象装配(DI)的操作

    Spring使用注解进行对象装配(DI)的操作

    获取Bean对象也叫做对象装配,就是把对象取出来放到某个类中,有时候也叫对象注入,这篇文章主要介绍了Spring使用注解进行对象装配(DI),需要的朋友可以参考下
    2023-07-07
  • Java 在 Array 和 Set 之间进行转换的示例

    Java 在 Array 和 Set 之间进行转换的示例

    这篇文章主要介绍了Java如何在Array和Set之间进行转换,在本文章中,我们对如何在 Java 中对Array和Set进行转换进行一些说明和示例,需要的朋友可以参考下
    2023-05-05
  • Jmeter参数化实现方法及应用实例

    Jmeter参数化实现方法及应用实例

    这篇文章主要介绍了Jmeter参数化实现方法及应用实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08

最新评论