16、axios的使用与数据的mock②(使用proxyTable代理)

简介: 前言:上篇讲了axios的基本使用然后写了个json文件mock了下数据,最后我们安装了express并在webpack.dev.conf.js中配置后成功的在浏览器中访问到了数据。

前言:上篇讲了axios的基本使用然后写了个json文件mock了下数据,最后我们安装了express并在webpack.dev.conf.js中配置后成功的在浏览器中访问到了数据。但是这样访问mock数据的方式未免太过麻烦,所以这章我们用简单的proxyTable代理的方式访问mock数据。
GitHub:https://github.com/Ewall1106/mall

1、设置proxyTable

img_a38446b76691e8fbb2a1f136b44c7c90.png
设置proxytable代理

新增这几条的代码是什么意思呢?

(1)当你请求/api的时候,转发到http://localhost:8080这台端口号为8080的服务器上;

(2)一旦你请求是以/api开头的,就把它替换为/static/mock这个路径;

2、使用axios获取mock数据

好了,知道了新增几行代码的意思,我们就在home.vue页面用这种方式访问下数据

img_dd17c6b253cba5c7f3891d313a2fc794.png
使用axios

3、去浏览器中看看是不是访问成功了

img_93a315aca68b821699bce7c7f31f25e3.png
localhost

没问题,至此,我们通过两种方式从本地获取了数据,接下来就是把数据渲染到页面上了。

目录
相关文章
|
4月前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
1月前
|
JSON 前端开发 JavaScript
《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用
《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用
|
5月前
|
JavaScript 前端开发
前端vue配置多个代理 axios的使用
前端vue配置多个代理 axios的使用
79 0
|
3月前
Vue3 配置代理和使用全局axios请求数据
Vue3 配置代理和使用全局axios请求数据
82 1
|
4月前
|
前端开发 JavaScript API
原来这才是学习axios的正确姿势(安装、使用、跨域代理一站式解决)
Axios 是一个基于 promise 的 异步 ajax 请求库,前端最流行的 ajax 请求库。简单的讲就是可以发送get、post请求,负责与后端交互。
133 1
|
5月前
|
JSON JavaScript 前端开发
vuetify+axios请求json数据实现一个表格功能
vuetify+axios请求json数据实现一个表格功能
42 0
|
5月前
|
JSON 安全 JavaScript
vue2.0 + element-ui 实战项目-axios请求数据(三)
vue2.0 + element-ui 实战项目-axios请求数据(三)
19 0
|
5月前
|
JSON JavaScript 数据格式
Vue框架Element UI教程-axios请求数据(六)
Vue框架Element UI教程-axios请求数据(六)
44 0
|
5月前
|
JSON 前端开发 JavaScript
ajax和axios请求本地json数据对比
ajax和axios请求本地json数据对比
40 1
|
8月前
axios请求后台数据并渲染
axios请求后台数据并渲染
115 0