uni-app搜索功能前后端开发（页面）
<h2 id="uni-app搜索功能前后端开发页面">uni-app搜索功能前后端开发（页面）</h2><p><strong>博客说明</strong></p>
<blockquote>
<p>文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！</p>
</blockquote>
<h4 id="借助的插件地址">借助的插件地址</h4>
<p>插件地址</p>
<h4 id="展示">展示</h4>
<p>前端是使用vue，后端使用Java的springBoot开发</p>
<p><img src="https://img2020.cnblogs.com/other/1973296/202009/1973296-20200910174108698-1889662343.png" alt="image-20200910172949557" loading="lazy"></p>
<h4 id="监控搜索框">监控搜索框</h4>
<h5 id="uni-app">uni-app</h5>
<p>注意根据自己的需求来改</p>
<pre><code class="language-js">async getSearch(keyword) {
let = await this.$http.post('/shop/search',{
name:keyword
});
// 请求失败处理
this.$http.errorCheck(err, res);
this.keywordList = [];
this.keywordList = this.drawCorrelativeKeyword(res.data.data, keyword);
},
//高亮关键字
drawCorrelativeKeyword(keywords, keyword) {
var len = keywords.length,
keywordArr = [];
for (var i = 0; i < len; i++) {
var row = keywords;
//定义高亮#9f9f9f
var html = row.name.replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
html = '<div>' + html + '</div>';
var tmpObj = {
keyword: row.name,
htmlStr: html,
id:row.id
};
keywordArr.push(tmpObj)
}
return keywordArr;
},
</code></pre>
<h5 id="后端接口开发">后端接口开发</h5>
<pre><code class="language-java">/**
* 根据传递过来的值查询商家
* @param name
* @return
*/
@ApiOperation(value = "搜索商家", notes = "首页搜索商家")
@ApiImplicitParam(name="name", value="商家名字", required = true, dataType = "String")
@RequestMapping(value = "/search", method = {RequestMethod.POST})
public Object search(@RequestParam(defaultValue = "") String name) {
List<Shop> shops = shopService.list(new QueryWrapper<Shop>().select("id","name").eq("flag", 1).like("name",name));
return Result.success(shops);
}
</code></pre>
<h5 id="效果">效果</h5>
<p>根据自己的需求改一下vue绑定的值</p>
<p><img src="https://img2020.cnblogs.com/other/1973296/202009/1973296-20200910174109813-1438676812.png" alt="image-20200910173547335" loading="lazy"></p>
<h4 id="热门搜索列表">热门搜索列表</h4>
<h5 id="uni-app-1">uni-app</h5>
<pre><code class="language-js">//加载热门搜索
async loadHotKeyword() {
let = await this.$http.get('/shop/searchList');
console.log(res);
// 请求失败处理
this.$http.errorCheck(err, res);
//定义热门搜索关键字，可以自己实现ajax请求数据再赋值
this.hotKeywordList = res.data.data;
},
</code></pre>
<h5 id="后端">后端</h5>
<pre><code class="language-java">/**
* 查询热门搜索商家
* @return
*/
@ApiOperation(value = "搜索热门列表", notes = "搜索热门列表")
@GetMapping("/searchList")
public Object searchList() {
List<ShopSearch> shopSearchs = shopSearchService.list(new QueryWrapper<ShopSearch>().orderByDesc("number"));
return Result.success(shopSearchs);
}
</code></pre>
<p>其他的功能是用了插件里面的</p>
<p><strong>感谢</strong></p>
<blockquote>
<p>uni-app</p>
<p>以及勤劳的自己，个人博客，GitHub</p>
<p><img src="https://img2020.cnblogs.com/other/1973296/202009/1973296-20200910174111723-284853812.png" alt="微信公众号" loading="lazy"></p>
</blockquote><br><br>
来源：https://www.cnblogs.com/guizimo/p/13647085.html 哇，楼主太棒了！终于找到这么详细的uni-app搜索功能教程了，前后端都有，代码也很清晰，对我帮助很大！
干货满满，收藏了！
想问一下几个小问题：
1. 关于搜索性能方面，如果数据量比较大的话，后面会考虑加缓存或者ElasticSearch吗？
2. 那个高亮显示的逻辑很实用，不过如果搜索关键词在中间或者有多个匹配的话，效果会不会不太好啊？
3. 热门搜索的排序，是单纯按number字段降序吗？有没有考虑过结合点击率或者时间衰减之类的算法？
另外补充一点小建议：
搜索接口可以考虑加个防抖处理，避免用户快速输入时发送太多请求：
// 可以用lodash的debounce或者自己写一个
let debounceTimer = null;
onSearchInput(val) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
this.getSearch(val);
}, 300);
}
这样用户体验会更好一些~
再次感谢楼主的分享，期待更多好文章！顶起来！
頁:
[1]