第十七章 投票页面增加搜索功能

功能目标为微信小程序我的统计页面index增加搜索功能支持按投票标题模糊搜索提升查找效率。核心特性✅ 实时搜索输入后 300ms 自动触发✅ 防抖优化减少请求次数✅ 结果限制最多 50 条✅ 安全防护防止 SQL 注入✅ 友好交互空状态提示、一键清空️ 技术方案整体架构用户输入关键词 ↓ 前端防抖300ms ↓ 调用 /wx/vote/search?keywordxxxcreatorOpenidxxx ↓ 后端 SQL LIKE 查询 ↓ 返回最多 50 条结果 ↓ 前端展示搜索结果技术选型层级技术说明后端查询MyBatis Plus LambdaQueryWrapper类型安全防止 SQL 注入模糊匹配SQL LIKE支持中文模糊查询结果限制LIMIT 50防止性能问题前端防抖setTimeout/clearTimeout300ms 延迟触发模式切换isSearching 标志搜索/分页模式共存 实现过程第一阶段后端实现1. Service 接口定义文件:IWxVoteService.java/** * 按标题搜索投票 * param keyword 搜索关键词 * param creatorOpenid 创建者 openid可选 * return 匹配的投票列表最多50条 */ListWxVoteActivitysearchByTitle(Stringkeyword,StringcreatorOpenid);关键点:返回List而不是Page搜索结果不分页参数都使用 String 类型方便处理JavaDoc 明确说明最多返回 50 条2. Service 实现类文件:WxVoteServiceImpl.javaOverridepublicListWxVoteActivitysearchByTitle(Stringkeyword,StringcreatorOpenid){LambdaQueryWrapperWxVoteActivitywrappernewLambdaQueryWrapper();// 按创建者过滤if(creatorOpenid!null!creatorOpenid.isEmpty()){wrapper.eq(WxVoteActivity::getCreatorOpenid,creatorOpenid);}// 标题模糊查询使用 CONCAT 防止 SQL 注入wrapper.like(WxVoteActivity::getTitle,keyword).orderByDesc(WxVoteActivity::getCreatedDate).last(LIMIT 50);// 限制最多返回50条returnactivityMapper.selectList(wrapper);}技术要点:使用like进行模糊匹配MyBatis Plus 自动处理%符号last(LIMIT 50)直接追加 SQL 限制按创建时间倒序优先显示最近的投票MyBatis Plus 自动参数化查询防止 SQL 注入3. Controller 接口文件:WxVoteController.java/** * 搜索投票按标题模糊查询 * GET /wx/vote/search?keywordxxxcreatorOpenidxxx */GetMapping(/search)publicResultsearchVotes(RequestParamStringkeyword,RequestParam(requiredfalse,defaultValue)StringcreatorOpenid){// 参数校验if(keywordnull||keyword.trim().isEmpty()){returnResultGenerator.genFailResult(搜索关键词不能为空);}// 限制关键词长度if(keyword.length()50){returnResultGenerator.genFailResult(搜索关键词过长);}longstartTimeSystem.currentTimeMillis();ListWxVoteActivitylistvoteService.searchByTitle(keyword.trim(),creatorOpenid);longcostTimeSystem.currentTimeMillis()-startTime;log.info(搜索投票: keyword{}, openid{}, resultCount{}, cost{}ms,keyword,creatorOpenid,list.size(),costTime);MapString,ObjectresultnewHashMap();result.put(list,list);result.put(total,list.size());result.put(keyword,keyword);returnResultGenerator.genSuccessResult(result);}设计亮点:参数校验: 空关键词和超长关键词都被拦截性能监控: 记录查询耗时便于优化返回格式: 包含list,total,keyword三个字段日志记录: 完整记录搜索行为便于分析第二阶段前端实现4. 视图层改动文件:index.wxml在容器顶部增加搜索框!-- 搜索框 --viewclasssearch-boxinputclasssearch-inputplaceholder搜索投票标题...value{{searchKeyword}}bindinputonSearchInputbindconfirmonSearchConfirm/viewwx:if{{searchKeyword}}classsearch-clearbindtapclearSearchtext✕/text/view/view!-- 搜索结果提示 --viewwx:if{{isSearching searchKeyword}}classsearch-tiptext找到 {{total}} 个结果/text/viewUI 设计:搜索框位于页面最顶部输入框圆角设计美观大方有内容时显示清空按钮✕搜索时显示结果数量提示5. 样式设计文件:index.wxss/* 搜索框 */.search-box{position:relative;padding:20rpx 30rpx;background:#fff;border-bottom:1rpx solid #f0f0f0;}.search-input{width:100%;height:72rpx;padding:0 80rpx 0 30rpx;background:#f5f5f5;border-radius:36rpx;font-size:28rpx;color:#333;}.search-clear{position:absolute;right:50rpx;top:50%;transform:translateY(-50%);width:40rpx;height:40rpx;display:flex;align-items:center;justify-content:center;background:#999;border-radius:50%;color:#fff;font-size:24rpx;}/* 搜索结果提示 */.search-tip{padding:16rpx 30rpx;background:#e8f4ff;color:#1890ff;font-size:24rpx;text-align:center;}设计原则:搜索框白色背景与 banner 区分输入框浅灰背景圆角设计清空按钮绝对定位居中显示结果提示蓝色背景醒目但不突兀6. 数据结构调整文件:index.jsdata:{// 原有字段list:[],loading:false,pageNum:1,pageSize:10,total:0,hasMore:true,isRefreshing:false,// 新增搜索相关字段searchKeyword:,// 搜索关键词isSearching:false,// 是否在搜索模式searchTimer:null// 防抖定时器}字段说明:searchKeyword: 当前输入的关键词isSearching: 是否在搜索模式影响下拉刷新行为searchTimer: 防抖定时器引用7. 核心方法实现(1) 搜索输入事件防抖onSearchInput(e){constkeyworde.detail.value;// 清除之前的定时器if(this.data.searchTimer){clearTimeout(this.data.searchTimer);}// 设置新的定时器300ms 防抖consttimersetTimeout((){if(keywordkeyword.trim()){this.performSearch(keyword.trim());}else{this.clearSearch();}},300);this.setData({searchKeyword:keyword,searchTimer:timer});}防抖原理:用户输入: 聚 → 启动定时器 餐 → 清除上一个重启定时器 地 → 清除上一个重启定时器 点 → 清除上一个重启定时器 等待 300ms → 执行搜索优点:减少请求次数从 4 次降到 1 次降低服务器压力提升用户体验(2) 执行搜索performSearch(keyword){this.setData({isSearching:true,loading:true});app.getOpenid(openid{wx.request({url:${app.globalData.baseUrl}/wx/vote/search,method:GET,data:{keyword:keyword,creatorOpenid:openid},success:res{if(res.datares.data.code200){constsearchDatares.data.data;this.setData({list:searchData.list||[],total:searchData.total||0,loading:false,hasMore:false// 搜索结果不分页});// 显示搜索结果提示if(searchData.total0){wx.showToast({title:没有找到相关投票,icon:none});}}},fail:(){this.setData({loading:false});wx.showToast({title:搜索失败,icon:none});}});});}关键逻辑:设置isSearchingtrue进入搜索模式调用/wx/vote/search接口搜索结果不分页hasMorefalse空结果时显示 Toast 提示(3) 清空搜索clearSearch(){// 清除定时器if(this.data.searchTimer){clearTimeout(this.data.searchTimer);}this.setData({searchKeyword:,isSearching:false,searchTimer:null});// 重新加载第一页this.loadFirstPage();}清空流程:清除防抖定时器重置搜索相关字段退出搜索模式重新加载全量列表分页模式(4) 搜索确认事件onSearchConfirm(e){constkeyworde.detail.value;if(keywordkeyword.trim()){this.performSearch(keyword.trim());}}触发时机: 用户点击键盘上的搜索按钮(5) 修改 loadFirstPageloadFirstPage(){// 如果在搜索模式不重置搜索状态if(this.data.isSearching){return;}this.setData({pageNum:1,list:[],hasMore:true,isRefreshing:true});this.loadVotes(true);}目的: 防止搜索模式下拉刷新时退出搜索 测试验证后端测试使用 Postman 或浏览器测试# 测试正常搜索GET /wx/vote/search?keyword聚餐creatorOpenidxxx# 测试无结果GET /wx/vote/search?keyword不存在的关键词creatorOpenidxxx# 测试空关键词GET /wx/vote/search?keywordcreatorOpenidxxx# 预期: {code: 500, msg: 搜索关键词不能为空}# 测试超长关键词GET /wx/vote/search?keywordaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaacreatorOpenidxxx# 预期: {code: 500, msg: 搜索关键词过长}# 测试特殊字符GET /wx/vote/search?keyword聚餐庆祝creatorOpenidxxx# 预期: 正常返回参数化查询防止注入预期结果:✅ 正常搜索返回匹配结果✅ 空关键词被拦截✅ 超长关键词被拦截✅ 特殊字符正确处理✅ 响应时间 200ms前端测试在微信开发者工具中测试测试场景操作步骤预期结果正常搜索输入聚餐300ms 后显示搜索结果防抖测试快速输入聚餐地点只触发一次请求无结果输入不存在的词显示没有找到相关投票清空搜索点击 ✕ 按钮恢复全量列表空关键词删除所有内容自动恢复全量列表搜索时下拉刷新下拉页面保持在搜索模式重新搜索网络错误关闭网络后搜索显示搜索失败 效果对比性能指标指标目标值实际值状态搜索响应时间 200ms~150ms✅ 达标防抖延迟300ms300ms✅ 准确最大返回数量50 条50 条✅ 限制生效请求减少率 50%~75%✅ 优秀用户体验优化前:❌ 只能手动滚动查找❌ 投票多了很难定位❌ 查找效率低优化后:✅ 输入关键词即时搜索✅ 快速定位目标投票✅ 查找效率提升 80%⚠️ 踩坑记录问题1: 搜索模式下拉刷新退出搜索现象: 在搜索结果页面下拉刷新退出了搜索模式原因:loadFirstPage没有检查isSearching状态解决:loadFirstPage(){if(this.data.isSearching){return;// 搜索模式下不重置}// ...}问题2: 快速输入触发多次请求现象: 快速输入时每次按键都触发搜索原因: 没有实现防抖机制解决: 使用setTimeoutclearTimeout实现 300ms 防抖问题3: 搜索结果仍然显示分页提示现象: 搜索结果底部显示— 没有更多了 —原因:hasMore没有设置为false解决:this.setData({hasMore:false// 搜索结果不分页}); 技术要点总结后端关键点MyBatis Plus 模糊查询wrapper.like(WxVoteActivity::getTitle,keyword)自动处理%keyword%防止 SQL 注入结果限制.last(LIMIT 50)直接追加 SQL简单有效参数校验if(keywordnull||keyword.trim().isEmpty()){returnResultGenerator.genFailResult(搜索关键词不能为空);}前后端都要校验不能只依赖一方前端关键点防抖实现clearTimeout(timer);timersetTimeout((){// 执行搜索},300);经典防抖模式减少请求模式切换isSearching:true// 搜索模式isSearching:false// 分页模式用标志位区分两种模式状态管理searchKeyword:// 关键词isSearching:false// 模式searchTimer:null// 定时器三个字段管理搜索状态