ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
需求 根据关键字、是否热销、分类ID、分页信息来调用接口。 # 获取分类数据 ![](https://img.kancloud.cn/eb/22/eb223f0b8d3751578602783b51e98053_804x1378.png) ## 配置接口的基地址 ![](https://img.kancloud.cn/ef/9b/ef9b524e0f9066fdbe44cbc597ef7f38_2294x962.png) ## 在页面打开时调用接口获取数据并保存到 data 中 ![](https://img.kancloud.cn/b8/0d/b80dc63002441ca283b8fd8c5d20299a_1504x1176.png) 写完之后测试一下: ![](https://img.kancloud.cn/97/16/9716b5dfd353fb7d5cdfafb73229cf83_1732x528.png) 出错了,找原因: ![](https://img.kancloud.cn/cf/ab/cfab590587d3d706dc69c287f7934559_1764x862.png) 现在发现 `this.$http.get` 出错了,所以我们应该到 `main.js` 中查看,因为必须要把 axios 包设置到 Vue 上才能使用 `this.$http`: ![](https://img.kancloud.cn/5a/b7/5ab79f9de95cd77e544eb07d422ad1ac_2484x940.png) 现在调好了: ![](https://img.kancloud.cn/d3/6f/d36f2cfe31a91991e6c29554f42801e1_1422x726.png) ## 循环显示数据 ![](https://img.kancloud.cn/24/70/2470fa91764bb636c99fc4ee99aab448_2694x806.png) # 获取商品 ## 我们需要知道搜索的条件 在调用商品接口之前先收集信息: ![](https://img.kancloud.cn/2c/26/2c26983267a8b5aa220b75b5994987cd_790x1012.png) 具体做法: 1. 定义数据 ![](https://img.kancloud.cn/cf/0a/cf0ae3c90a328634e0195aad33fff075_1032x808.png) 2. 数据绑定到页面上 2.1 绑定搜索框 总结:表单元素 (输入框 、单选框 、下拉框。。。)都使用 `v-model` 。 ![](https://img.kancloud.cn/e9/21/e92132d281d4a52b372e9b5f635f0521_962x300.png) 2.1 绑定分类 先把分类ID放到组件的 name 上 ![](https://img.kancloud.cn/81/82/818268050f5008b8a1ba952392911c42_1952x508.png) 添加一个 click 事件,然后就可以获取点击 的分类的ID ![](https://img.kancloud.cn/7e/bb/7ebbc0fd1bd8d8d1b885b0b454a129f4_1300x1392.png) 现在收集的数据就完成了: ![](https://img.kancloud.cn/46/b0/46b0336f3b611bfdd3b5bc570ba35e06_2414x470.png) ## 调用商品接口 现在收集了数据,就可以调用商品接口了。 问题:什么时候需要调用商品接口获取数据? 时机一、刚打开网站时 时机二、当搜索的条件改变时(关键字、分类等) 实现: 时机一、网站刚打开就马上调用接口,代码应该写在 created 中 ![](https://img.kancloud.cn/93/8d/938d8060a32b8996dd07aea3c968e93e_1592x1002.png) 测试一下: 页面一刷新数据就有了: ![](https://img.kancloud.cn/e8/9f/e89fa61fb95466b9b2d2d90177a6bd77_1698x920.png) 时机二、当搜索条件发生变化时调用商品接口 ![](https://img.kancloud.cn/0d/53/0d53c6c9371e3fe572709e382eb53bbf_1502x1576.png)