uni-app搜尋功能前後端開發（頁面）

部落格說明

文章所涉及的資料來自網際網路整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯絡本人刪除，謝謝！

藉助的外掛地址

外掛地址

展示

前端是使用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