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条件选择切换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • springboot与mybatis整合实例详解(完美融合)

    简介 从 Spring Boot 项目名称中的 Boot 可以看出来,Spring Boot 的作用在于创建和启动新的基于 Spring 框架的项目.它的目的是帮助开发人员很容易的创建出独立运行和产品级别的基于 Spring 框架的应用.Spring Boot 会选择最适合的 Spring 子项目和第三方开源库进行整合.大部分 Spring Boot 应用只需要非常少的配置就可以快速运行起来. Spring Boot 包含的特性如下: 创建可以独立运行的 Spring 应用. 直接嵌入 Tomc

  • SpringBoot项目的logback日志配置(包括打印mybatis的sql语句)

    关于logback日志的详解见这位仁兄的博客:Spring Boot-日志配置(超详细) 我在这就开门见山直接介绍我们项目日志的配置使用吧!~ 1.基本介绍 默认情况下,Spring Boot项目就会用Logback来记录日志,并用INFO级别输出到控制台.如下图: 实际开发中我们不需要直接添加logback日志依赖. 你会发现 spring-boot-starter 其中包含了 spring-boot-starter-logging,该依赖内容就是 Spring Boot 默认的日志框架 lo

  • springboot+mybatis-plus 两种方式打印sql语句的方法

    1.注解方式,yml文件配置上以下就可以直接使用 mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl 2.这一种网上没有,搜过好多资料都没有,我是配置多数据源,所以是在代码中写的config那么yml文件就是失效的,只能一个一个配置,到了打印sql的时候,就怎么都是找不到,后来设置的源码找到灵感,发现可

  • SpringBoot整合MyBatis逆向工程及 MyBatis通用Mapper实例详解

    一.添加所需依赖,当前完整的pom文件如下: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd&q

  • springboot集成mybatisplus实例详解

    集成mybatisplus后,简单的CRUD就不用写了,如果没有特别的sql,就可以不用mapper的xml文件的. 目录 pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-insta

  • springboot+mybatis通过实体类自动生成数据库表的方法

    前言 本章介绍使用mybatis结合mysql数据库自动根据实体类生成相关的数据库表. 首先引入相关的pom包我这里使用的是springboot2.1.8.RELEASE的版本 <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.0</ve

  • Springboot中MyBatisplus使用IPage和Page分页的实例代码

    一.需求:实现Springboot中MyBatisplus使用IPage和Page分页 二.技术:MyBatisplus的IPage和Page 三.实现 1.代码结构 2.代码详情 (1)Controller package com.xkcoding.rbac.security.controller; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; i

  • springboot + mybatis配置多数据源示例

    在实际开发中,我们一个项目可能会用到多个数据库,通常一个数据库对应一个数据源. 代码结构: 简要原理: 1)DatabaseType列出所有的数据源的key---key 2)DatabaseContextHolder是一个线程安全的DatabaseType容器,并提供了向其中设置和获取DatabaseType的方法 3)DynamicDataSource继承AbstractRoutingDataSource并重写其中的方法determineCurrentLookupKey(),在该方法中使用Da

  • springboot整合mybatis将sql打印到日志的实例详解

    在前台请求数据的时候,sql语句一直都是打印到控制台的,有一个想法就是想让它打印到日志里,该如何做呢? 见下面的mybatis配置文件: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-

  • springboot+springmvc+mybatis项目整合

    介绍: 上篇给大家介绍了ssm多模块项目的搭建,在搭建过程中spring整合springmvc和mybatis时会有很多的东西需要我们进行配置,这样不仅浪费了时间,也比较容易出错,由于这样问题的产生,Pivotal团队提供了一款全新的框架,该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. 特点: 1. 创建独立的Spring应用

随机推荐