uni-app搜索功能前后端开发（页面）
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];//定义高亮#9f9f9fvar 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
uni-app搜索功能前后端开发（页面）相关推荐
- uniapp 如何给搜索框设值_uni-app搜索功能前后端开发（页面）
uni-app搜索功能前后端开发(页面) 博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 借助的插件地址 展示 前端是使用vue, ...
- 萌新一手包App前后端开发日记（一）
从事Android移动端也有些日子了,还记得一开始选择这份工作,是憧憬着有朝一日能让亲朋好友用上自己开发的软件,但日子久了才发现,并不是所有的公司,所有的项目的适用群体都是"亲朋好友&quo ...
- 游戏陪玩网站源码开发，搜索功能的实现与页面倒计时跳转
在游戏陪玩网站源码开发时,首页会有一个搜索输入框和按钮区域,我们要做的就是来完善这部分功能.首先游戏陪玩网站源码搜索的逻辑,我们简单地设定为问题的title或者content包含搜索的关键字即可.假设 ...
- .net core webapi 前后端开发分离后的配置和部署
背景:现在越来越多的企业都采用了在开发上前后端分离,前后端开发上的分离有很多种,那么今天,我来分享一下项目中得的前后端分离. B/S Saas 项目:(这个项目可以理解成个人中心,当然不止这么点功能 ...
- 前后端开发人员必备Chrome插件
写在前面 Chrome算是世界上最广为流传的浏览器了,得益于它的简洁.快速.Chrome支持多标签浏览,每个标签页面都在独立的"沙箱"内运行,在提高安全性的同时,一个标签页面的崩溃 ...
- 3分钟搞懂前后端开发的区别
上周末见了好多开发的年轻朋友,问了我一个问题:"前后端的区别和要求是什么?"分不清前后端开发的区别和要求,一种是因为前后端都了解,号称"全栈工程师",但又什么都 ...
- Web开发之三：前后端开发任务量分析与比较
这一年来的项目,无论是个人中心.文库还是学科测评,每次都会被一个问题所困扰,那就是如何估量前后端的任务量.如何确定前后端的人员比. 在采用分工模式之后,经过两个项目的开发,和大个.阿黄.建坤可以明显的 ...
- 前后端开发的心得体会_前后端对接的思考及总结
说在前面的话 随着前端NodeJs技术的火爆,现在的前端已经非以前传统意义上的前端了,各种前端框架(Vue.React.Angular......)井喷式发展,配合NodeJs服务端渲染引擎,目前前端 ...
- ABP开发框架前后端开发系列---（9）ABP框架的权限控制管理
在前面两篇随笔<ABP开发框架前后端开发系列---(7)系统审计日志和登录日志的管理>和<ABP开发框架前后端开发系列---(8)ABP框架之Winform界面的开发过程>开始 ...
最新文章
- 21个必须知道的机器学习开源工具！
- linux如何关闭udp端口,如何阻止linux RHEL7中的udp端口范围(How to block udp ports range in linux RHEL7)...
- 修改Nginx与Apache配置参数解决http状态码：413上传文件大小限制问题
- 数据结构(c语言版)笔记6,2020考研计算机《数据结构(C语言版)》复习笔记(6)
- VMware中High Availability (HA),的含义
- win11安装chocolatey软件包管理工具（win版）
- IOS应用管理学习，进阶，涉及字典转模型，工厂方法，面向对象思想，页面布局等
- BAT技术大牛推荐：看懂英文文档，每天只需要10分钟做这件事……
- 秒杀场景_重复抢单问题分析与实现_03
- kotlin 判断数字_Kotlin程序可以逆转数字
- ＭＯＮＧＯＤＢ 与sql聚合操作对应图
- 高清接口芯片---gv7600、sii9135
- 数据库工作笔记005---You have an error in your SQL syntax; check the manual that corresponds to y
- 三维点云学习（3）6- 实现K-Means
- Office 2013集成SP1
- Java_定义一个圆类，提供输出面积和周长的方法，定义一个测试类使用
- 华为鸿蒙HarmonyOS 简介
- boost::asio::io_service的stop()和reset()和stopped()函数
- java与C/C++的比较
- c 语言实现多线程排序,在c中使用多线程快速排序