乐趣区

关于java:uniapp搜索功能前后端开发页面

jiezi

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

退出移动版