您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家介绍如何实现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搜索功能前后端开发就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。