JeecgBoot年龄搜索范围

### 如何在 JeecgBoot 中实现年龄范围搜索功能 #### 1. 修改实体类 为了支持年龄范围的查询，在对应的实体类中添加两个字段用于表示最小和最大年龄。假设当前操作的是 `User` 实体： ```java // User.java private Integer minAge; private Integer maxAge; // Getter and Setter methods... public Integer getMinAge() { return this.minAge; } public void setMinAge(Integer minAge) { this.minAge = minAge; } public Integer getMaxAge() { return this.maxAge; } public void setMaxAge(Integer maxAge) { this.maxAge = maxAge; } ``` 这些新增加的属性将会被用来接收来自前端传递过来的参数[^1]。 #### 2. Controller 层调整 接着修改控制器部分，使其能够接受并处理这两个新的查询条件。这里以 Spring MVC 风格为例说明如何编写相应的接口逻辑： ```java @GetMapping("/list") @ResponseBody public R<IPage<User>> list(@RequestParam(value="minAge", required=false) Integer minAge, @RequestParam(value="maxAge", required=false) Integer maxAge){ QueryWrapper<User> queryWrapper = new QueryWrapper<>(); if (null != minAge && null != maxAge) { queryWrapper.between("age", minAge, maxAge); } else if (null != minAge) { queryWrapper.ge("age", minAge); // 大于等于 } else if (null != maxAge) { queryWrapper.le("age", maxAge); // 小于等于 } Page<User> page = new Page<>(current, size); IPage<User> userPage = userService.page(page, queryWrapper); return Result.ok(userPage); } ``` 这段代码实现了基于给定年龄段筛选用户的业务需求。 #### 3. 前端页面集成 最后一步是在前端界面上提供输入控件让用户可以指定想要查找的具体年龄区间，并通过 AJAX 请求将此信息发送到服务器端进行过滤显示。以下是 Ant Design Vue 组件库中的表单设计片段作为参考： ```html <!-- TeamClass.data.ts --> <template> <a-form :form="form"> <!-- Other form items... --> <a-row type="flex" justify="space-between"> <a-col span="8"> <a-form-item label="最低年龄"> <a-input-number v-decorator="[ 'minAge', {} ]"/> </a-form-item> </a-col> <a-col span="8"> <a-form-item label="最高年龄"> <a-input-number v-decorator="[ 'maxAge', {} ]"/> </a-form-item> </a-col> <a-button htmlType="submit">查询</a-button> </a-row> </a-form> </template> <script lang="ts"> export default class extends Component { private form!: any; public mounted(): void { this.form = this.$form.createForm(this); } public handleSubmit(e: Event): void { e.preventDefault(); this.form.validateFields((err: Error | null, values: object) => { if (!err) { console.log('Received values of form:', values); // 发送带有 age 范围的数据至后端 API 进行查询 axios.get('/api/user/list', { params: values }).then(response => { const resultData = response.data.result; // 更新视图状态或渲染列表项 }); } }); } render(){ return ( <div>{this.handleSubmit}</div> ); } }; </script> ``` 上述示例展示了如何利用双向绑定机制收集用户提交的信息并通过 HTTP GET 方法调用远程服务完成最终的结果集获取工作[^5]。