vue商城项目开发:axios发送请求及列表数据展示

使用axios发送get请求

先install一下axios:
在这里插入图片描述

在main.js中全局引入axios:
在这里插入图片描述
仅仅在main.js中引入axios不会生效:
在这里插入图片描述
第二种解决方法如下,也是最常用的:
在这里插入图片描述
使用$http发送请求:
在这里插入图片描述

使用axios发送get请求:
在这里插入图片描述

请求URL优化

将请求URL定义成变量:

axios.defaults.baseURL  //是axios默认的属性

在这里插入图片描述
发起请求时只需要写相对地址即可:
在这里插入图片描述

v-for遍历列表数据

补全列表展示模块html代码:
在这里插入图片描述
展示接口返回的数据:
在这里插入图片描述
使用items接收接口返回的数据:
在这里插入图片描述
v-for遍历接口返回的数据列表:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页