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
