Vue+ElementUI+SpringBOOT实现多条件复杂查询

在实现Vue+ElementUI+SpringBOOT实现多条件复杂查询时，我们可以先定义好Vue组件中的查询条件，然后通过axios将查询条件发送到后端的Spring Boot应用，并获取查询结果。

以下是一个简化的例子：

1. 前端Vue组件中定义查询条件：

<template>
  <div>
    <el-form :model="searchForm" ref="searchForm" inline>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="searchForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchForm: {
        username: '',
        email: ''
      }
    };
  },
  methods: {
    onSearch() {
      this.$refs['searchForm'].validate((valid) => {
        if (valid) {
          this.fetchData();
        } else {
          console.log('表单验证失败');
        }
      });
    },
    fetchData() {
      this.$http.post('/api/user/search', this.searchForm)
        .then(response => {
          console.log(response.data);
          // 处理查询结果
        })
        .catch(error => {
          console.error('查询失败', error);
        });
    }
  }
};
</script>

2. 后端Spring Boot Controller中处理查询请求：

@RestController
@RequestMapping("/api/user")
public class UserController {
 
    @Autowired
    private UserService userService;
 
    @PostMapping("/search")
    public ResponseEntity<?> search(@RequestBody Map<String, Object> searchParams) {
        // 根据searchParams中的条件进行查询
        List<?> users = userService.search(searchParams);
        return ResponseEntity.ok(users);
    }
}

3. 服务层和服务实现层的代码：

public interface UserService {
    List<?> search(Map<String, Object> searchParams);
}
 
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserRepository userRepository;
 
    @Override
    public List<?> search(Map<String, Object> searchParams) {
        // 根据searchParams构建Specification
        Specification<User> spec = (root, query, cb) -> {
            List<Predicate> predicates = new ArrayList<>();
            searchParams.forEach((key, value) -> {
                if (value != null) {
                    if ("username".equals(key)) {
                        predicates.add(cb.like(root.get(key), "%"