模糊查询前后端

### 实现前后端模糊查询 #### 前端实现 在前端部分，可以利用Vue.js结合Element UI来创建表格并实现实时的模糊查询功能。通过监听输入框的变化事件，在每次用户输入新的字符时发送请求到服务器获取匹配的数据。 对于`el-table`组件来说，可以通过设置分页器的相关属性来进行页面控制以及每页显示条目数的选择： - `@size-change`: 绑定当前页数量变化时触发的方法 - `@current-change`: 改变当前页码时触发的方法 - `:current-page`: 当前所在页码 - `:page-size`: 每一页展示多少项记录 - `:total="total"`: 总共存在多少条记录[^3] 下面是一个简单的例子展示了如何配置这些参数，并且添加了一个用于执行模糊搜索的功能按钮： ```html <template> <div class="search-container"> <!-- 查询条件 --> <el-input v-model="queryParam.keyword" placeholder="请输入关键字"></el-input> <!-- 表格 --> <el-table :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"> ... </el-table> <!-- 分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="sizes, prev, pager, next" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { queryParam: { keyword: '' }, tableData: [], total: 0, pageSize: 10, currentPage: 1 } }, methods: { handleSearch() { this.currentPage = 1; this.fetchData(); }, fetchData() { const params = Object.assign({}, this.queryParam); // 发送AJAX请求至后端... axios.get('/api/search', {params}) .then(response => { this.tableData = response.data.items; // 更新表格数据源 this.total = response.data.totalCount; // 设置总条目的数目 }); }, handleSizeChange(val) { console.log(`每页 ${val} 条`); this.pageSize = val; this.handleSearch(); // 刷新列表 }, handleCurrentChange(val) { console.log(`当前页: ${val}`); this.currentPage = val; this.fetchData(); // 加载对应页的内容 } } } </script> ``` #### 后端实现 (Jeecg-boot) 为了支持来自客户端发起的带有关键词参数的HTTP GET/POST 请求，可以在Spring Boot控制器层定义相应的处理逻辑。这里假设使用的是MyBatis Plus作为持久化框架，则可以直接借助其内置的支持构建动态SQL语句的能力完成模糊查找操作。 当接收到含有特定字段名和值的对象实例之后，就可以调用Mapper接口中的selectList方法传入封装好的Wrapper对象进行数据库检索工作了。需要注意的一点是在构造Where子句的时候应该采用通配符%包裹住实际传递过来的关键字字符串从而达到预期效果。 以下是基于上述思路编写的一个简单示例代码片段: ```java @RestController @RequestMapping("/api") public class SearchController { private final YourEntityService yourEntityService; public SearchController(YourEntityService yourEntityService){ this.yourEntityService = yourEntityService; } /** * 处理模糊查询请求. */ @GetMapping(value="/search", produces={"application/json"}) public Result<List<YourEntity>> search(@RequestParam String keyword,@RequestParam Integer page,@RequestParam Integer limit){ QueryWrapper<YourEntity> wrapper=new QueryWrapper<>(); if(!StringUtils.isEmpty(keyword)){ wrapper.like("column_name",keyword); // column_name 替换成你要查的列名称 } Page<YourEntity> pagedResult=this.yourEntityService.page(new Page<>(page,limit),wrapper); List<YourEntity> list=pagedResult.getRecords(); Map<String,Object> map=new HashMap<>(); map.put("items",list); map.put("totalCount",pagedResult.getTotal()); return new Result<>(map,"success"); } } // 定义实体类和服务层接口... @Service public interface YourEntityService extends IService<YourEntity>{...} ``` 以上就是关于如何在一个典型的Web应用程序架构下集成完整的前后端模糊查询解决方案的具体说明。希望这能帮助理解整个流程是如何运作起来的。