如何实现uni-app搜索功能前后端开发

发布时间:2022-01-18 10:35:35 作者:柒染
来源:亿速云 阅读:1156

这篇文章给大家介绍如何实现uni-app搜索功能前后端开发,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

uni-app搜索功能前后端开发(页面)

借助的插件地址

插件地址

展示

前端是使用vue,后端使用Java的springBoot开发

如何实现uni-app搜索功能前后端开发

监控搜索框
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搜索功能前后端开发

热门搜索列表
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搜索功能前后端开发就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. Vuejs怎么实现搜索匹配功能
  2. javascript实现简单搜索功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

uni-app

上一篇:Po.et的三层架构是什么

下一篇:写爬虫遇到APP的请求有加密参数时该怎么解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》