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

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

后端动态获取数据:

bash 复制代码
    /**
     * 商品搜索
     * @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

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

前端调用

bash 复制代码
  /**
   * 请求后端 商品搜索
   */
  async search(q){
    const result = await requestUtil({
      url: '/product/search',
      data:{q}
    });
    this.setData({
      productList: result.productList
    })
  },
bash 复制代码
    // 处理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)
     
    },

页面渲染:

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

样式:

bash 复制代码
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;
  }
}

取消按钮:

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

搜索性能优化

搞个定时器

bash 复制代码
// 处理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)
     
    },
相关推荐
木叶丸5 分钟前
跨平台方案该如何选择?
android·前端·ios
LL.。7 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴12 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
运维咖啡吧13 分钟前
周一才上线的网站,单单今天已经超过1000访问了
前端·程序员·ai编程
世界哪有真情16 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界17 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端
LeQi22 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑24 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js
Mintopia32 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
前端小巷子35 分钟前
跨域问题解决方案:CORS(跨域资源共享)
前端·网络协议·面试