Vue项目的接口联调

之前我们在项目中获取的ajax数据其实不是从后端获取的数据，而是我们通过一个接口mock模拟的假数据，当我们前端的代码已经编写完毕，后端的接口也已经写好的时候，就需要把我们前端编写的数据清掉，去尝试使用后端提供的数据。即需要前后端实现一个接口联调。
首先把static目录下的mock数据都删掉，联调的时候我希望我的组件访问服务器PHP提供的数据：

打开config目录，找到index.js，我们之前的proxyTable设置是在开发环境下，如果我访问api开头的这个路径，他会帮助我们把这个路径的请求转发到localhost：8080的端口上，这是我们前端服务器的一个端口，这时我们想要访问后台服务器的端口上，后台服务器也在我们的本地，只不过他的服务器端口号在默认的80端口号上：

当我们改变了config里面的内容，需要重启一下服务器。
但是在实际应用中有可能后端的服务器不在我们的本地，在另一个后端开发人员的电脑上，或是一个内网或外网的服务器上，我们这个代理就不能写localhost这种形式了，可以去写一个内网的IP地址或者是外网的域名：

实现vue上的前后端联调，只需要专注于proxyTable的配置就好了。

Vue项目的接口联调相关推荐

Vue 项目对接接口数据
<el-form :model="detail" :rules="rules" ref="form" v-if='flag'>& ...
05_02_拉钩教育课程管理系统项目前后端接口联调
任务三前后端项目接口联调 1.联调准备 1.1 运行后台项目 clean 清空项目的编译文件 compile 重新编译项目将项目部署到 tomcat 项目名为: lagou_edu_home 端口 ...
公司项目里如何进行前后端接口联调
最近我的朋友Jack进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是Jack非常熟悉的vue全家桶,后端用的是Java语言. 在前后端开发人员碰面之后,协商确定好了前端需要的数据接口(扯 ...
vue项目构建实战基础知识：SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除...
一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为单页应用程序或单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法
因为项目测试的需要,我需要给测试人员一个项目的测试环境版本和生产环境版本,两个版本的区别就是请求的接口地址不一样而已,一开始,我是在webpack配置了不同的命令,让测试去打包,比如:使用npm ru ...
vue与php接口对接,怎样使用vue项目中api接口
这次给大家带来怎样使用vue项目中api接口,使用vue项目中api接口的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 在axiosconfig目录下的axiosConfig.jsimpor ...
vue项目接口地址暴露_vue组件暴露和.js文件暴露接口操作
1.将同一类型的组件放在一个文件夹下 2.在此文件夹下创建一个index.js 3.在index.js中导入组件,并把他们暴露出去 1.写法一 import studentCourse1 from ' ...
建立项目接口文档_分享：一步一个脚印，vue入门之使用mockjs搭建vue项目测试服务器...
在以前的文档中,我们构建了vue项目的整体架构,详见vue入门:vue项目架构设计起步,现在我们主要对其中的mock server 进行完善. 一.概述前后端分离的项目优点之一就是可以前后端并行开发 ...

Vue项目的接口联调

Vue项目的接口联调相关推荐

最新文章

热门文章