Vue项目的接口联调
2019-03-01 17:10
120 查看
- 之前我们在项目中获取的
ajax
数据其实不是从后端获取的数据,而是我们通过一个接口mock
模拟的假数据,当我们前端的代码已经编写完毕,后端的接口也已经写好的时候,就需要把我们前端编写的数据清掉,去尝试使用后端提供的数据。即需要前后端实现一个接口联调。 - 首先把
static
目录下的mock
数据都删掉,联调的时候我希望我的组件访问服务器PHP
提供的数据:
- 打开
config
目录,找到index.js
,我们之前的proxyTable
设置是在开发环境下,如果我访问api
开头的这个路径,他会帮助我们把这个路径的请求转发到localhost:8080
的端口上,这是我们前端服务器的一个端口,这时我们想要访问后台服务器的端口上,后台服务器也在我们的本地,只不过他的服务器端口号在默认的80端口号上:
当我们改变了config
里面的内容,需要重启一下服务器。 - 但是在实际应用中有可能后端的服务器不在我们的本地,在另一个后端开发人员的电脑上,或是一个内网或外网的服务器上,我们这个代理就不能写
localhost
这种形式了,可以去写一个内网的IP地址或者是外网的域名:
- 实现
vue
上的前后端联调,只需要专注于proxyTable
的配置就好了。
相关文章推荐
- vue 项目如何引入微信sdk,使用微信分享接口
- vue项目的webpack设置请求模拟数据的接口方法
- webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法
- vue项目根据不同环境区分接口地址
- 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
- vue项目如何根据访问的链接地址,配置接口地址
- vue+axios 开发环境与生产环境配置请求接口,本地开发和线上开发有多个请求地址怎么处理?上线后自动获取ip,不需改请求地址可运用多个项目中
- vue项目接口管理
- vue 项目如何引入微信sdk接口的方法
- vue项目webpack中Npm传递参数配置不同域名接口
- vue项目中axios请求网络接口封装的示例代码
- 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- vue项目axios请求接口,后端代理请求接口404,问题出现在哪?
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- vue项目中请求接口的使用
- vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
- vue项目每30秒刷新1次接口的实现方法
- Django Rest Framework 电商项目 7-6 Vue和JWT接口调试和django自定义用户验证
- 在vue-cli搭建的项目中增加后台mock接口的方法