Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to achieve SpringBoot+Mybatis plus+React conditional selection switching search". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

When writing React front-end logic, we often encounter list query functions that can switch different conditions, such as the screenshot below. In fact, this code is basically a logic, which can record the implementation process at one time. When you encounter it later, you can reuse it directly according to your notes.

First, the front-end React page code. This kind of search box is usually placed in the Form form, and then the Input component with the prefix drop-down box option is used. The component of this pattern is to implement an addonBefore attribute in the Input component, as shown in the following code:

Render () {let {getFieldDecorator} = this.props.form; return ({getFieldDecorator ('searchUser', {initialValue: ""}) ());}

Second, after writing the form page, you can develop the form logic. Because the search box corresponds to a variety of ways, but there is only one input box, that is, many to one, so you need to do some conversion, you need to convert the value of the input box to the corresponding drop-down box option, so you can use switch judgment to do the conversion, of course, you can also use if-else, I have tried the effect of if-else, it looks like a lump.

Explain this code slightly, if the drop-down box is searched with "student name" as the dimension, then the getFieldDecorator ('condition') attribute value of the form, that is, "name", that is, values.condition== "name", will jump to values.name = values.searchValue, which means that the value of the search condition name is the value of the corresponding input box values.searchValue. In the form, the property label of the input box is 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. Finally, the back-end logic implementation

@ Datapublic class Student {private String name; private String className; private String sex;} public interface StudentMapper extends BaseMapper {}

Mybatis plus's ORM framework is used here, and you can directly use the search conditions of the lambda expression, because the search conditions search, therefore, need to use like fuzzy search, the search condition is name+ "%", not both sides use "%", because if the first fuzzy condition has an index, then "%" + name+ "%" will cause index failure.

Public List getStudents (Student reqVO) {String name = reqVO.getName (); String className = reqVO.getClassName (); String sex = reqVO.getSex () List students = studentMapper.selectList (new QueryWrapper (). Lambda (). Like (StringUtils.isNotEmpty (name), Student::getName,name+ "%"). Like (StringUtils.isNotEmpty (className), Student::getClassName,className+ "%"). Like (StringUtils.isNotEmpty (sex), Student::getSex Sex+ "%")) Return students;} "how to achieve SpringBoot+Mybatis plus+React conditional selection switch search" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.