基於SpringBoot+Mybatis plus+React.js實現條件選擇切換搜尋功能

朱季謙發表於2021-09-27
Spring BootMyBatisReactJS

筆記/朱季謙

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

image

一、首先，是前端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;
    }

相關文章