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ā)。因為該搜索框對應多種方式，但輸入框只有一個，也就是多對一的情況，故而需要做一些轉換，需要將輸入框的值，相應轉換為對應下拉框選項的值，因此，可以用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、最后，就是后端邏輯實現(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;
}
到此這篇關于SpringBoot+Mybatis plus+React實現(xiàn)條件選擇切換搜索實踐的文章就介紹到這了,更多相關SpringBoot+Mybatis plus+React條件選擇切換內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
2013-03-03
完美解決Server?returned?HTTP?response?code:403?for?URL報錯問題
在調用某個接口的時候，突然就遇到了Server?returned?HTTP?response?code:?403?for?URL報錯這個報錯，導致獲取不到接口的數(shù)據(jù)，下面小編給大家分享解決Server?returned?HTTP?response?code:403?for?URL報錯問題，感興趣的朋友一起看看吧2023-03-03
Spring?Security?是?Spring家族中的一個安全管理框架。相比與另外一個安全框架Shiro，它提供了更豐富的功能，社區(qū)資源也比Shiro豐富，今天通過本文給大家介紹SpringSecurity定義多個過濾器鏈的實例，感興趣的朋友跟隨小編一起看看吧2023-04-04
這篇文章主要介紹了SpringBoot中RestTemplate的使用詳解,RestTemplate是由Spring框架提供的一個可用于應用中調用rest服務的類它簡化了與http服務的通信方式,統(tǒng)一了RESTFul的標準,封裝了http連接,我們只需要傳入url及其返回值類型即可,需要的朋友可以參考下2023-10-10
java異步執(zhí)行代碼處理方法(先返回結果,后執(zhí)行代碼)
這篇文章主要給大家介紹了關于java異步執(zhí)行代碼處理方法的相關資料,先返回結果,后執(zhí)行代碼,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了java實現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
上傳文件是互聯(lián)網(wǎng)中常應用的場景之一，最典型的情況就是上傳頭像等，今天就帶著大家做一個Spring Boot上傳文件的小案例，感興趣的朋友跟隨腳本之家小編一起學習吧2018-01-01
獲取Bean對象也叫做對象裝配，就是把對象取出來放到某個類中，有時候也叫對象注入，這篇文章主要介紹了Spring使用注解進行對象裝配(DI),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Java如何在Array和Set之間進行轉換，在本文章中，我們對如何在?Java?中對Array和Set進行轉換進行一些說明和示例，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Jmeter參數(shù)化實現(xiàn)方法及應用實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08