SpringBoot+Mybatis plus+React實現(xiàn)條件選擇切換搜索實踐

更新時間：2021年09月29日 16:05:44 作者：朱季謙

本文主要介紹了SpringBoot+Mybatis plus+React實現(xiàn)條件選擇切換搜索實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在寫React前端邏輯時，經(jīng)常遇到可以切換不同條件的列表查詢功能，例如下邊截圖這樣的，其實，這塊代碼基本都一個邏輯，可以一次性將實現(xiàn)過程記錄下來，待以后再遇到時，直接根據(jù)筆記復用即可。

一、首先，是前端React頁面代碼，這類搜索框，一般都是放在Form表單當中，然后使用有前綴下拉框選項的Input組件，這類模式的組件是在Input組件當中實現(xiàn)一個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>
    );
  }

二、寫好表單頁面后，就可以對該表單邏輯進行開發(fā)。因為該搜索框?qū)喾N方式，但輸入框只有一個，也就是多對一的情況，故而需要做一些轉(zhuǎn)換，需要將輸入框的值，相應轉(zhuǎn)換為對應下拉框選項的值，因此，可以用switch判斷來做轉(zhuǎn)換，當然，你也可以用if-else，我試過if-else的效果，看起來就是一坨......

稍微解釋一下這段代碼，假如下拉框是以“學生姓名”為維度來搜索，那么表單的getFieldDecorator('condition'）屬性值即“name”，也就是values.condition==“name”，就會跳轉(zhuǎn)至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、最后，就是后端邏輯實現(xiàn)

@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;
    }

到此這篇關(guān)于SpringBoot+Mybatis plus+React實現(xiàn)條件選擇切換搜索實踐的文章就介紹到這了,更多相關(guān)SpringBoot+Mybatis plus+React條件選擇切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: