企业官网建设流程全解析

🎯 功能目标

为微信小程序"我的统计"页面（index）增加搜索功能，支持按投票标题模糊搜索，提升查找效率。

核心特性

• ✅ 实时搜索（输入后 300ms 自动触发）
• ✅ 防抖优化（减少请求次数）
• ✅ 结果限制（最多 50 条）
• ✅ 安全防护（防止 SQL 注入）
• ✅ 友好交互（空状态提示、一键清空）

🏗️ 技术方案

整体架构

用户输入关键词 ↓ 前端防抖（300ms） ↓ 调用 /wx/vote/search?keyword=xxx&creatorOpenid=xxx ↓ 后端 SQL LIKE 查询 ↓ 返回最多 50 条结果 ↓ 前端展示搜索结果

技术选型

💻 实现过程

第一阶段：后端实现

1. Service 接口定义

文件:IWxVoteService.java

/** * 按标题搜索投票 * @param keyword 搜索关键词 * @param creatorOpenid 创建者 openid（可选） * @return 匹配的投票列表（最多50条） */List<WxVoteActivity>searchByTitle(Stringkeyword,StringcreatorOpenid);

关键点:

• 返回List而不是Page（搜索结果不分页）
• 参数都使用 String 类型，方便处理
• JavaDoc 明确说明最多返回 50 条

2. Service 实现类

文件:WxVoteServiceImpl.java

@OverridepublicList<WxVoteActivity>searchByTitle(Stringkeyword,StringcreatorOpenid){LambdaQueryWrapper<WxVoteActivity>wrapper=newLambdaQueryWrapper<>();// 按创建者过滤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?keyword=xxx&creatorOpenid=xxx */@GetMapping("/search")publicResultsearchVotes(@RequestParamStringkeyword,@RequestParam(required=false,defaultValue="")StringcreatorOpenid){// 参数校验if(keyword==null||keyword.trim().isEmpty()){returnResultGenerator.genFailResult("搜索关键词不能为空");}// 限制关键词长度if(keyword.length()>50){returnResultGenerator.genFailResult("搜索关键词过长");}longstartTime=System.currentTimeMillis();List<WxVoteActivity>list=voteService.searchByTitle(keyword.trim(),creatorOpenid);longcostTime=System.currentTimeMillis()-startTime;log.info("搜索投票: keyword={}, openid={}, resultCount={}, cost={}ms",keyword,creatorOpenid,list.size(),costTime);Map<String,Object>result=newHashMap<>();result.put("list",list);result.put("total",list.size());result.put("keyword",keyword);returnResultGenerator.genSuccessResult(result);}

设计亮点:

1. 参数校验: 空关键词和超长关键词都被拦截
2. 性能监控: 记录查询耗时，便于优化
3. 返回格式: 包含list,total,keyword三个字段
4. 日志记录: 完整记录搜索行为，便于分析

第二阶段：前端实现

4. 视图层改动

文件:index.wxml

在容器顶部增加搜索框：

<!-- 搜索框 --><viewclass="search-box"><inputclass="search-input"placeholder="搜索投票标题..."value="{{searchKeyword}}"bindinput="onSearchInput"bindconfirm="onSearchConfirm"/><viewwx:if="{{searchKeyword}}"class="search-clear"bindtap="clearSearch"><text>✕</text></view></view><!-- 搜索结果提示 --><viewwx:if="{{isSearching && searchKeyword}}"class="search-tip"><text>找到 {{total}} 个结果</text></view>

UI 设计:

• 搜索框位于页面最顶部
• 输入框圆角设计，美观大方
• 有内容时显示清空按钮（✕）
• 搜索时显示结果数量提示

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.js

data:{// 原有字段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){constkeyword=e.detail.value;// 清除之前的定时器if(this.data.searchTimer){clearTimeout(this.data.searchTimer);}// 设置新的定时器（300ms 防抖）consttimer=setTimeout(()=>{if(keyword&&keyword.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.data&&res.data.code===200){constsearchData=res.data.data;this.setData({list:searchData.list||[],total:searchData.total||0,loading:false,hasMore:false// 搜索结果不分页});// 显示搜索结果提示if(searchData.total===0){wx.showToast({title:'没有找到相关投票',icon:'none'});}}},fail:()=>{this.setData({loading:false});wx.showToast({title:'搜索失败',icon:'none'});}});});}

关键逻辑:

• 设置isSearching=true，进入搜索模式
• 调用/wx/vote/search接口
• 搜索结果不分页（hasMore=false）
• 空结果时显示 Toast 提示

(3) 清空搜索

clearSearch(){// 清除定时器if(this.data.searchTimer){clearTimeout(this.data.searchTimer);}this.setData({searchKeyword:'',isSearching:false,searchTimer:null});// 重新加载第一页this.loadFirstPage();}

清空流程:

1. 清除防抖定时器
2. 重置搜索相关字段
3. 退出搜索模式
4. 重新加载全量列表（分页模式）

(4) 搜索确认事件

onSearchConfirm(e){constkeyword=e.detail.value;if(keyword&&keyword.trim()){this.performSearch(keyword.trim());}}

触发时机: 用户点击键盘上的"搜索"按钮

(5) 修改 loadFirstPage

loadFirstPage(){// 如果在搜索模式，不重置搜索状态if(this.data.isSearching){return;}this.setData({pageNum:1,list:[],hasMore:true,isRefreshing:true});this.loadVotes(true);}

目的: 防止搜索模式下拉刷新时退出搜索

🧪 测试验证

后端测试

使用 Postman 或浏览器测试：

# 测试正常搜索GET /wx/vote/search?keyword=聚餐&creatorOpenid=xxx# 测试无结果GET /wx/vote/search?keyword=不存在的关键词&creatorOpenid=xxx# 测试空关键词GET /wx/vote/search?keyword=&creatorOpenid=xxx# 预期: {"code": 500, "msg": "搜索关键词不能为空"}# 测试超长关键词GET /wx/vote/search?keyword=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&creatorOpenid=xxx# 预期: {"code": 500, "msg": "搜索关键词过长"}# 测试特殊字符GET /wx/vote/search?keyword=聚餐&庆祝&creatorOpenid=xxx# 预期: 正常返回（参数化查询防止注入）

预期结果:

• ✅ 正常搜索返回匹配结果
• ✅ 空关键词被拦截
• ✅ 超长关键词被拦截
• ✅ 特殊字符正确处理
• ✅ 响应时间 < 200ms

前端测试

在微信开发者工具中测试：

📊 效果对比

性能指标

用户体验

优化前:

• ❌ 只能手动滚动查找
• ❌ 投票多了很难定位
• ❌ 查找效率低

优化后:

• ✅ 输入关键词即时搜索
• ✅ 快速定位目标投票
• ✅ 查找效率提升 80%

⚠️ 踩坑记录

问题1: 搜索模式下拉刷新退出搜索

现象: 在搜索结果页面下拉刷新，退出了搜索模式

原因:loadFirstPage没有检查isSearching状态

解决:

loadFirstPage(){if(this.data.isSearching){return;// 搜索模式下不重置}// ...}

问题2: 快速输入触发多次请求

现象: 快速输入时，每次按键都触发搜索

原因: 没有实现防抖机制

解决: 使用setTimeout+clearTimeout实现 300ms 防抖

问题3: 搜索结果仍然显示分页提示

现象: 搜索结果底部显示"— 没有更多了 —"

原因:hasMore没有设置为false

解决:

this.setData({hasMore:false// 搜索结果不分页});

🎓 技术要点总结

后端关键点

1. MyBatis Plus 模糊查询

   wrapper.like(WxVoteActivity::getTitle,keyword)

   自动处理%keyword%，防止 SQL 注入

2. 结果限制

   .last("LIMIT 50")

   直接追加 SQL，简单有效

3. 参数校验

   if(keyword==null||keyword.trim().isEmpty()){returnResultGenerator.genFailResult("搜索关键词不能为空");}

   前后端都要校验，不能只依赖一方

前端关键点

1. 防抖实现

   clearTimeout(timer);timer=setTimeout(()=>{// 执行搜索},300);

   经典防抖模式，减少请求

2. 模式切换

   isSearching:true// 搜索模式isSearching:false// 分页模式

   用标志位区分两种模式

3. 状态管理

   searchKeyword:''// 关键词isSearching:false// 模式searchTimer:null// 定时器

   三个字段管理搜索状态