如何實現(xiàn)uni-app搜索功能前后端開發(fā)

這篇文章給大家介紹如何實現(xiàn)uni-app搜索功能前后端開發(fā)，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

uni-app搜索功能前后端開發(fā)（頁面）

借助的插件地址

插件地址

展示

前端是使用vue，后端使用Java的springBoot開發(fā)

監(jiān)控搜索框

uni-app

注意根據(jù)自己的需求來改

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;
},

后端接口開發(fā)

/**
 * 根據(jù)傳遞過來的值查詢商家
 * @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);
}

效果

根據(jù)自己的需求改一下vue綁定的值

熱門搜索列表

uni-app

//加載熱門搜索
async loadHotKeyword() {
  let [err, res] = await this.$http.get('/shop/searchList');
  console.log(res);
  // 請求失敗處理
  this.$http.errorCheck(err, res);
  //定義熱門搜索關鍵字，可以自己實現(xiàn)ajax請求數(shù)據(jù)再賦值
  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);
}

關于如何實現(xiàn)uni-app搜索功能前后端開發(fā)就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。