第62讲商品搜索动态实现以及性能优化

商品搜索后端动态获取数据

后端动态获取数据:

    /*** 商品搜索* @param q* @return*/@GetMapping("/search")public R search(String q){List<Product> productList = productService.list(new QueryWrapper<Product>().like("name", q));Map<String,Object> map=new HashMap<>();map.put("message",productList);return R.ok(map);}

定义productList

    /*** 页面的初始数据*/data: {productList:[], // 商品数组inputValue:"", // 输入框的值isFocus:false // 取消 按钮 是否显示},

前端调用

  /*** 请求后端 商品搜索*/async search(q){const result = await requestUtil({url: '/product/search',data:{q}});this.setData({productList: result.productList})},
// 处理input事件handleInput(e){const {value}=e.detail;if(!value.trim()){this.setData({productList:[],isFocus:false})return;}this.setData({isFocus:true})clearTimeout(this.TimeoutId);this.TimeoutId=setTimeout(()=>{this.search(value)},1000)},

页面渲染:

<view class="search_row"><input type="text" model:value="{{inputValue}}" placeholder="请输入商品关键字" bindinput="handleInput"/><button hidden="{{!isFocus}}">取消</button>
</view>
<view class="search_content"><navigatorclass="search_item"wx:for="{{productList}}"wx:key="id"url="/pages/product_detail/index?id={{item.id}}">{{item.name}}</navigator>
</view>

样式:

page{background-color: #F9F9F9;padding-top: 20rpx;
}.search_row{height: 50rpx;display: flex;input{background-color: #FFFFFF;flex:1;height: 100%;padding-left: 30rpx;}button{display:flex;justify-content: center;align-items: center;width:110rpx !important;font-size: 26rpx;padding: 0;margin: 0 10rpx;height: 100%;}
}.search_content{margin-top: 15rpx;padding: 0px;.search_item{background-color: #FFFFFF;font-size: 26rpx;padding: 15rpx;align-items: center;border-bottom: 1rpx solid #EAEAEA;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
}

取消按钮:

<view class="search_row"><input type="text" model:value="{{inputValue}}" placeholder="请输入商品关键字" bindinput="handleInput"/><button hidden="{{!isFocus}}">取消</button>
</view>
  // 点击 取消按钮handleCancel(){this.setData({productList:[], // 商品数组isFocus:false, // 取消 按钮 是否显示inputValue:"" // 输入框的值})},

在这里插入图片描述
搜索性能优化

搞个定时器

// 处理input事件handleInput(e){const {value}=e.detail;if(!value.trim()){this.setData({productList:[],isFocus:false})return;}this.setData({isFocus:true})clearTimeout(this.TimeoutId);this.TimeoutId=setTimeout(()=>{this.search(value)},1000)},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/256452.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java程序设计】【C00260】基于Springboot的企业客户信息反馈平台(有论文)

基于Springboot的企业客户信息反馈平台&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的企业客户信息反馈平台 本系统分为平台功能模块、管理员功能模块以及客户功能模块。 平台功能模块&#xff1a;在平台首页可…

python从入门到精通(十六):python爬虫的BeautifulSoup4

python爬虫的BeautifulSoup4 BeautifulSoup4导入模块解析文件创建对象python解析器beautifulsoup对象的种类Tag获取整个标签获取标签里的属性和属性值Navigablestring 获取标签里的内容BeautifulSoup获取整个文档Comment输出的内容不包含注释符号BeautifulSoup文档遍历Beautifu…

OpenCV-36 多边形逼近与凸包

目录 一、多边形的逼近 二、凸包 一、多边形的逼近 findContours后的轮廓信息countours可能过于复杂不平滑&#xff0c;可以用approxPolyDP函数对该多边形曲线做适当近似&#xff0c;这就是轮廓的多边形逼近。 apporxPolyDP就是以多边形去逼近轮廓&#xff0c;采用的是Doug…

Android9~Android13 某些容量SD卡被格式化为内部存储时容量显示错误问题的研究与解决方案

声明:原创文章,禁止转载! Android9~Android13 某些容量SD卡被格式化为内部存储时容量显示错误问题的研究与解决方案 分析Android11 系统对于EMMC/UFS作为内部存储、SD卡被格式化为内部存储、SD卡/U盘被格式化为便携式存储的不同处理 一.现象描述 实测Android9 Android10 A…

牛客错题整理——C语言(实时更新)

1.以下程序的运行结果是&#xff08;&#xff09; #include <stdio.h> int main() { int sum, pad,pAd; sum pad 5; pAd sum, pAd, pad; printf("%d\n",pAd); }答案为7 由于赋值运算符的优先级高于逗号表达式&#xff0c;因此pAd sum, pAd, pad;等价于(…

速度规划:s形曲线应用(变速 停车)opencv c++显示(3)

理论篇 先看该篇&#xff0c;这里沿用了里面的变量。 应用推导篇 分为变速和停车两部分&#xff08;字迹潦草&#xff0c;可结合代码看&#xff09; 代码篇 变速函数入口&#xff1a; velocityPlanner vp; vp.SetParameters(0, 1);停车函数入口&#xff1a; ParkingVelo…

6 scala-面向对象编程基础

Scala 跟 Java 一样&#xff0c;是一门面向对象编程的语言&#xff0c;有类和对象的概念。 1 类与对象 与 Java 一样&#xff0c;Scala 也是通过关键字 class 来定义类&#xff0c;使用关键字 new 创建对象。 要运行我们编写的代码&#xff0c;同样像 Java 一样&#xff0c;…

uniapp小程序端使用计算属性动态绑定style样式踩坑

踩坑点: 使用uniapp编译小程序端动态绑定复杂style使用计算属性方式&#xff0c;return必须返回json字符串格式&#xff0c;不能返回object&#xff0c;否则会不起作用。 代码总览 视图层 逻辑层&#xff08;注意这里是使用的计算属性哈&#xff09; 这里我封装成了一个个性化…

蓝桥杯嵌入式第9届真题(完成) STM32G431

蓝桥杯嵌入式第9届真题(完成) STM32G431 题目 分析和代码 main.h /* USER CODE BEGIN Header */ /********************************************************************************* file : main.h* brief : Header for main.c file.* …

Ubuntu Desktop - Terminal 输出全部选中 + 复制

Ubuntu Desktop - Terminal 输出全部选中 复制 1. Terminal2. Terminal 最大化3. Edit -> Select All4. Copy & PasteReferences 1. Terminal 2. Terminal 最大化 3. Edit -> Select All 4. Copy & Paste Edit -> Copy or Shift Ctrl C Edit -> Paste…

PV、UV、IP

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1. PV1.1 PV 计算1.2 PV 的影响因素 2. UV2.1 UV 计算2.2UV 的影响因素 3. IP3.1 IP和UV①UV大于IP②UV小于IP 三者的关系PV 和 UV 前言 PV、UV、IP是我们在运…

印度5G不是比中国先进,而是印度用户敢用,中国用户不敢用!

分析机构OpenSignal给出的数据指出中国手机用户的平均速率比印度用户还要低&#xff0c;这说明中国5G落后于印度&#xff0c;其实这是片面的说法&#xff0c;中国运营商的5G网络能力肯定强于印度运营商&#xff0c;但是中国用户不敢用&#xff0c;而印度用户敢用&#xff0c;这…

mysql经典4张表问题

1.数据库表结构关联图 2.问题&#xff1a; 1、查询"01"课程比"02"课程成绩高的学生的信息及课程分数3.查询平均成绩大于等于60分的同学的学生编号和学生姓名和平均成绩4、查询名字中含有"风"字的学生信息5、查询课程名称为"数学"&…

java的excel列行合并模版

1.效果 2.模版 <tableborder"1"cellpadding"0"cellspacing"0"class"tablebor"id"TABLE"><tr align"center" class"bg217"><td style"background-color: #008000; color: #ffffff;p…

【初中生讲机器学习】6. 分类算法中常用的模型评价指标有哪些?here!

创建时间&#xff1a;2024-02-07 最后编辑时间&#xff1a;2024-02-09 作者&#xff1a;Geeker_LStar 你好呀~这里是 Geeker_LStar 的人工智能学习专栏&#xff0c;很高兴遇见你~ 我是 Geeker_LStar&#xff0c;一名初三学生&#xff0c;热爱计算机和数学&#xff0c;我们一起加…

Web 扫描神器:Gobuster 保姆级教程(附链接)

一、介绍 Gobuster 是一款用于目录和文件枚举的开源工具。它主要用于在Web应用程序或网站上查找隐藏的目录和文件&#xff0c;从而进行信息收集或渗透测试。以下是 Gobuster 的一些主要特点和功能&#xff1a; 快速且高效&#xff1a; Gobuster 被设计为快速、高效的工具&…

第九个知识点:内部对象

Date对象: <script>var date new Date();date.getFullYear();//年date.getMonth();//月date.getDate();//日date.getDay();//星期几date.getHours();//时date.getMinutes();//分date.getSeconds();//秒date.getTime();//获取时间戳&#xff0c;时间戳时全球统一&#x…

【人工智能】神奇的Embedding:文本变向量,大语言模型智慧密码解析(10)

什么是嵌入&#xff1f; OpenAI 的文本嵌入衡量文本字符串的相关性。嵌入通常用于&#xff1a; Search 搜索&#xff08;结果按与查询字符串的相关性排序&#xff09;Clustering 聚类&#xff08;文本字符串按相似性分组&#xff09;Recommendations 推荐&#xff08;推荐具有…

牛客周赛 Round 32 F.小红的矩阵修改【三进制状态压缩dp】

原题链接&#xff1a;https://ac.nowcoder.com/acm/contest/75174/F 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 小红拿到了一个字符矩阵&#xff0c;矩阵中仅包含&q…

spring boot学习第十一篇:发邮件

1、pom.xml文件内容如下&#xff08;是我所有学习内容需要的&#xff0c;不再单独分出来&#xff0c;包不会冲突&#xff09;&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"…