Day13--商品列表-请求并渲染商品列表的数据

1.定义请求参数对象

接口部分：

 文档部分：

我的操作：

1》在goods_list.vue中：

1>初步操作：

 

 

其效果图：

 

 2>进一步操作：

在goods_list.vue中：

情况①： 

 情况②：

 

**************************************************************************************************************

2.获取商品列表数据

接口部分：

 文档部分：

我第一次遇见$http后面地址是跟一个对象的。马上去看了一下后面对象是咋跟的？

 

 1》在 data 中新增如下的数据节点：

2》在 onLoad 生命周期函数中，调用 getGoodsList 方法获取商品列表数据：

 

3》在 methods 节点中，声明 getGoodsList 方法如下：

4》效果图：【点击不同的图片会有不同的效果】

 

 

 

 **************************************************************************************************************

3. 渲染商品列表结构

我的操作：

1》在页面中，通过 v-for 指令，循环渲染出商品的 UI 结构：

 效果图：【此时我把编译模式的cid=5，改为了query=热，这样数据才比较多，便于比较】

 

 2》为了防止某些商品的图片不存在，需要在 data 中定义一个默认的图片：

 

3》美化商品列表的 UI 结构：

 

最终效果图：