这篇文章给大家介绍如何实现uni-app搜索功能前后端开发，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
插件地址
前端是使用vue，后端使用Java的springBoot开发
注意根据自己的需求来改
计算
安全
数据库
网络和加速
企业服务
async getSearch(keyword) {
let [err, res] = 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[i];
//定义高亮#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;
},/**
* 根据传递过来的值查询商家
* @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);
}根据自己的需求改一下vue绑定的值
//加载热门搜索
async loadHotKeyword() {
let [err, res] = await this.$http.get('/shop/searchList');
console.log(res);
// 请求失败处理
this.$http.errorCheck(err, res);
//定义热门搜索关键字，可以自己实现ajax请求数据再赋值
this.hotKeywordList = res.data.data;
},/**
* 查询热门搜索商家
* @return
*/
@ApiOperation(value = "搜索热门列表", notes = "搜索热门列表")
@GetMapping("/searchList")
public Object searchList() {
List<ShopSearch> shopSearchs = shopSearchService.list(new QueryWrapper<ShopSearch>().orderByDesc("number"));
return Result.success(shopSearchs);
}关于如何实现uni-app搜索功能前后端开发就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/guizimo/blog/4557111
