需求
根据关键字、是否热销、分类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)