第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.hqwc.cn/news/460232.html

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

相关文章

四.Linux实用操作 8-11.网络请求和下载.端口进程管理主机状态监控

目录 四.Linux实用操作 8.网络请求和下载 ping命令 wget命令--下载网络文件 curl命令--发送网络请求/下载文件 四.Linux实用操作 9.端口 端口 端口&#xff08;虚拟&#xff09; 端口&#xff08;号&#xff09; 查看端口占用 四.Linux实用操作 10.进程管理 查看进程…

位运算01 插入[C++]

图源&#xff1a;文心一言 上机题目练习整理&#xff0c;位运算&#xff0c;供小伙伴们参考~&#x1f95d;&#x1f95d; 网页版目录在页面的右上角↗~&#x1f95d;&#x1f95d; 第1版&#xff1a;在力扣新手村刷题的记录~&#x1f9e9;&#x1f9e9; 编辑&#xff1a;梅…

C语言特殊指针

1 野指针 概念&#xff1a;指向一块未知区域的指针&#xff0c;被称为野指针。野指针是危险的。 危害&#xff1a; 引用野指针&#xff0c;相当于访问了非法的内存&#xff0c;常常会导致段错误&#xff08;segmentation fault&#xff09;引用野指针&#xff0c;可能会破坏系…

恒流源方案对比

1、双运放恒流源 2、运放三极管放大电路组成的恒流源 5A 3、运放三极管组成的恒流源 200uA 4、运放MOS管组成的恒流源 100mA 5、电源模块并联输出100A恒流

百面嵌入式专栏(面试题)C语言面试题22道

沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇我们将介绍C语言相关面试题 。 宏定义是在编译的哪个阶段被处理的?答案:宏定义是在编译预处理阶段被处理的。 解读:编译预处理:头文件包含、宏替换、条件编译、去除注释、添加行号。 写一个“标准”宏MIN,这个…

极限的反问题【高数笔记】

1. 什么是极限反问题&#xff1f; 2. 极限反问题分为几类&#xff1f; 3. 每一类极限反问题的具体做法是什么&#xff1f; 4. 每一类极限反问题具体做法是否有前提条件&#xff1f; 5. 例题&#xff1f;

CDN相关和HTTP代理

CDN相关和HTTP代理 参考&#xff1a; 《透视 HTTP 协议》——chrono 把这两个放在一起是因为容易搞混&#xff0c;我一开始总以为CDN就是HTTP代理&#xff0c;但是看了极客时间里透视HTTP协议的讲解&#xff0c;感觉又不仅于此&#xff0c;于是专门写下来。 先说结论&#xf…

数据结构:双向链表

文章目录 1. 双向带头循环链表的结构2. 相关操作2.1 创建节点2.2 尾插2.3 头插2.4 打印2.5 尾删2.6 头删2.7 查找2.8 指定位置前/后插入2.9 删除指定位置的节点2.10 删除指定位置后的节点2.11 销毁链表 3.顺序表与链表区别 1. 双向带头循环链表的结构 与单链表不同的是&#xf…

javaEE - 24( 20000 字 Servlet 入门 -2 )

一&#xff1a; Servlet API 详解 1.1 HttpServletResponse Servlet 中的 doXXX 方法的目的就是根据请求计算得到相应, 然后把响应的数据设置到HttpServletResponse 对象中. 然后 Tomcat 就会把这个 HttpServletResponse 对象按照 HTTP 协议的格式, 转成一个字符串, 并通过S…

JVS物联网、低代码、规则引擎2.5功能新增说明

物联网更新功能 新增: 1、新增离线存储-页面配置及指令下发对接&#xff1b; 用户可以对平台的页面进行自定义配置&#xff0c;通过平台&#xff0c;可以将指令下发给与之相连的设备或系统&#xff0c;这些指令可以是控制指令、配置指令或其他类型的指令。 2、新增数据压缩-…

diffusers单机多卡推理(全网首发)

起因 博主在部署InstantID项目时&#xff0c;显存不够&#xff0c;想要将模型分散在多张卡上。 翻到这篇发现是分布式推理&#xff0c;博主一直以为这个可以达到我想要的效果&#xff0c;但是效果是多线程并行推理&#xff0c;并不能将一个模型切片在多个GPU上。 Distributed …

Text2SQL研究-Chat2DB体验与剖析

文章目录 概要业务数据库配置Chat2DB安装设置原理剖析 小结 概要 近期笔者在做Text2SQL的研究&#xff0c;于是调研了下Chat2DB&#xff0c;基于车辆订单业务做了一些SQL生成验证&#xff0c;有了一点心得&#xff0c;和大家分享一下.&#xff1a; 业务数据库设置 基于车辆订…