zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

Vue列表项目数据开发 请求 发送 展示
2023-09-14 09:01:59 时间

使用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遍历接口返回的数据列表:
在这里插入图片描述