在寫React前端邏輯時，經(jīng)常遇到可以切換不同條件的列表查詢功能，例如下邊截圖這樣的，其實(shí)，這塊代碼基本都一個邏輯，可以一次性將實(shí)現(xiàn)過程記錄下來，待以后再遇到時，直接根據(jù)筆記復(fù)用即可。
一、首先，是前端React頁面代碼，這類搜索框，一般都是放在Form表單當(dāng)中，然后使用有前綴下拉框選項(xiàng)的Input組件，這類模式的組件是在Input組件當(dāng)中實(shí)現(xiàn)一個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">學(xué)生姓名</Option> <Option value="class">班級</Option> <Option value="studentNo">學(xué)號</Option> </Select> ) } /> )} </FormItem> </Form> );} |
二、寫好表單頁面后，就可以對該表單邏輯進(jìn)行開發(fā)。因?yàn)樵撍阉骺驅(qū)?yīng)多種方式，但輸入框只有一個，也就是多對一的情況，故而需要做一些轉(zhuǎn)換，需要將輸入框的值，相應(yīng)轉(zhuǎn)換為對應(yīng)下拉框選項(xiàng)的值，因此，可以用switch判斷來做轉(zhuǎn)換，當(dāng)然，你也可以用if-else，我試過if-else的效果，看起來就是一坨......
稍微解釋一下這段代碼，假如下拉框是以“學(xué)生姓名”為維度來搜索，那么表單的getFieldDecorator('condition'）屬性值即“name”，也就是values.condition==“name”，就會跳轉(zhuǎn)至values.name = values.searchValue，就意味著是搜索條件name的值，為對應(yīng)輸入框的值values.searchValue。在表單當(dāng)中，輸入框的屬性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、最后，就是后端邏輯實(shí)現(xiàn)
|
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表達(dá)式的搜索條件進(jìn)行，因?yàn)樗阉鳁l件搜索，故而，需要用like的模糊搜索，搜索條件是name+"%"，沒有兩邊都用"%"，是因?yàn)槿舻谝粋€模糊條件有索引的話，那么"%"+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; } |
到此這篇關(guān)于SpringBoot+Mybatis plus+React實(shí)現(xiàn)條件選擇切換搜索實(shí)踐的文章就介紹到這了,更多相關(guān)SpringBoot+Mybatis plus+React條件選擇切換內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://www.cnblogs.com/zhujiqian/p/15344970.html
