在寫React前端邏輯時，經常遇到可以切換不同條件的列表查詢功能，例如下邊截圖這樣的，其實，這塊代碼基本都一個邏輯，可以一次性將實現過程記錄下來，待以后再遇到時，直接根據筆記復用即可。
一、首先，是前端React頁面代碼，這類搜索框，一般都是放在Form表單當中，然后使用有前綴下拉框選項的Input組件，這類模式的組件是在Input組件當中實現一個addonBefore屬性即可，如下代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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'）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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、最后，就是后端邏輯實現
|
1
2
3
4
5
6
|
@Datapublic class Student { private String name; private String className; private String sex;} |
|
1
|
public interface StudentMapper extends BaseMapper<Student> {} |
這里使用了Mybatis plus的ORM框架，可以直接使用lambda表達式的搜索條件進行，因為搜索條件搜索，故而，需要用like的模糊搜索，搜索條件是name+"%"，沒有兩邊都用"%"，是因為若第一個模糊條件有索引的話，那么"%"+name+"%"將會造成索引失效。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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條件選擇切換內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/zhujiqian/p/15344970.html
