uni-app搜寻性能前后端开发（页面）
<!-- more -->
博客阐明
文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！
借助的插件地址
插件地址
展现
前端是应用vue，后端应用Java的springBoot开发
监控搜寻框
uni-app
留神依据本人的需要来改
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绑定的值
热门搜寻列表
uni-app
//加载热门搜寻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以及勤奋的本人，集体博客，GitHub