vue菜鸟从业记：公司项目里如何进行先后端接口联调

最近个人朋友王小闰进入一家新的公司，正好公司项目采用的是先后端分离架构，技术栈是王小闰很是熟悉的vue全家桶，后端用的是Java语言。

在先后端开发人员碰面以后，协商肯定好了前端须要的数据接口（扯那么多，其实也就是关于json数据的字段的定义），而后先后端程序猿就嗨皮地并线开发去了。

先后端联调前夕

个人朋友王小闰他们这家公司作本地旅游项目的，安排到他手上的活儿是该旅游项目的webapp工程。

项目动工伊始，一切都得从头来作。在公司没日没夜的开发了一天以后，王小闰在没有借助vue-cli官方提供的脚手架工具下，徒手从零开始，搭建了一套基于公司特定要求的vue项目的工程架构目录。（关于如何从零开始搭建vue项目的脚手架工程，后面我会单独写一个系列）。

前端项目环境搭建好以后，就正式进入了项目首页的业务编码工做。王小闰又没日没夜的敲了一天代码以后，首页header区域、轮播图以及导航图标的页面布局和逻辑开发都实现了，此时他想调用后端数据测试下流程，可是后端程序猿尚未将该数据的接口开发出来，没办法，个人朋友王小闰此时只能在本地模拟点假数据，逼格高点的说法叫mock数据。

捣鼓半天，首页的mock数据终于弄好了，以下图所示：

可是如今有一个问题让王小闰很困惑，他的axios写的url路径是与后端程序猿商量好的绝对路径（域名+请求路径+请求参数），由于这是之后真正的请求路径，因此我朋友王小闰又不想先写本地相对路径，后期再来修改，万一后端程序猿开发的慢了，鬼知道到时候有多少接口须要修改，因此他就迷茫不知所措了。

其实，仔细看看，这就是先后端分离中的mock数据和接口联调的问题。要想弄懂其中原因，下面让咱们分几点来聊聊。

什么是先后端接口联调

以前开发写代码的时候，全部的ajax数据都不是后端返回的真实数据，而是咱们本身经过接口mock模拟的假数据，当前端的代码编写完毕，后端的接口也已经写好以后，咱们就须要把mock数据干掉，尝试使用后端提供的数据，进行先后端的一个调试，这个过程咱们就把它称之为先后端的接口联调。

为何要联调

本地的mock数据是王小闰本身写的，确定符合前端需求，可是后端接口首先须要测试通不通，还须要测试数据格式对不对，还有后端有没有填写足够的数据，好比写列表页，前端想分页，若是后端就写了两条测试数据，你咋整？

因此，王小闰须要根据后端对接口的调整，不断地来回切换url，这样岂不是还在受后端的影响，还谈什么毛线的先后端分离，名不副实嘛！

如何实现先后端接口联调

首先，咱们已经知道，目前的先后端分离的架构应用分为两种状况：

• 1. 先后端彻底分离，先后端分别拥有本身的域名和服务器。
• 2. 先后端开发分离，可是部署时是一个域名和一台服务器。

虽然架构能够采用先后端分离，可是部署有可能就不同了，这和项目的大小，公司的状况等等都有关系了，一个百八十人用的小系统，还得两台服务器两个域名，你不觉着浪费吗？

两种不一样的部署状况直接致使了前期在设计联调方案的时候就不一样了。

若是大家公司的项目在部署时是两台服务器对应两个域名，恭喜你，这是最nice的方案，也是联调最舒服的方式。

可是，我朋友王小闰呆的这家公司是一家刚起步的小公司，确定是怎么节省成本怎么来，问事后端，才知道他们公司是属于第二种状况，也就是开发时先后端分离，部署时是一个域名和一台服务器。知道这个以后，他就明白接下来该怎么操做了。

王小闰以前在项目根目录static文件夹下新建了一个mock文件夹，里面写了一些json文件，当咱们作联调的时候，这些mock数据就没用了，咱们要把mock数据切换成后端提供给咱们的真实的数据。

当个人朋友王小闰把static文件夹下的mock数据删除以后，在运行项目，发现报错了，浏览器告诉他，你访问的mock下面的index.json文件找不到404。

咱们平时本地前端开发环境dev地址大可能是 localhost:8080，然后台服务器的访问地址就有不少种状况了，好比 后端程序猿本地IP（127.0.0.1:8889），或者外网域名，当前端与后台进行数据交互时，天然就出现跨域问题（后台服务没作处理状况下）。axios不支持jsonp, 因此咱们就要使用http-proxy-middleware中间件作代理。

如今经过在前端修改 vue-cli 的配置可解决： vue-cli中的 config/index.js 下配置 dev选项的 {proxyTable}:

proxyTable: {
    '/api': {
        target: '127.0.0.1:8889',  // 真实请求的地址
        changeOrigin: true,  // 是否跨域
    }
}
复制代码

若是你想在公司的vue项目中实现先后端联调，不须要再使用相似于fiddler charles的抓包代理工具了，你只须要使用proxyTable这个配置项，把你须要请求的后端的服务器地址写在target值里就OK了。

解决完跨域问题后，接下来王小闰该想一想怎么在一台服务器一个域名下进行联调的问题了。比较常见的作法是前端在本地修改，本地查看，测试好了之后上传到服务器，看看线上环境可不能够，OK的话一切都好；不行就本地接着改，而后在上传。

联调完以后，如何将前端打包的项目文件发给后端，这里也须要注意两点：

（1）css、js和图片等静态文件

这时候的静态文件在开发阶段不须要任何考虑，按照你喜欢的相对路径或者相对于项目的根路径的形式写就好了，由于迟早还得交给后端。可是，须要注意：

若是你采用 相对项目根路径的书写方式来写你的静态文件路径 时，必定要先和后端商量好，未来项目部署的时候他会把你的前端整个项目放在哪里？若是不是根目录下，你就挂了。好比：你的reset.css的路径是 /exports/styles/common/reset.css ，后端把你前端项目放在了根目录下的 frontEnd 文件夹下， reset.css 文件就报404了。

若是后端采用的java，你须要特别注意的是， tomcat的根目录 并非 webapps 文件，然后端项目默认是部署在 webapps/ROOT 文件下的，因此你若是使用了相对项目根路径的书写方式来写你的静态文件路径时，对不起又是404了。

（2）ajax后端数据

由于如今惟一的一台服务器仍是在后端程序猿那里，因此此时你仍是能够写绝对路径（域名+请求路径），利用hosts文件来改变域名映射实现联调。

闰土有话说

看这篇文章的童鞋，无论你是在大公司仍是在小公司，都须要知道，并非说你将dist文件打包发给后端就完事了，就不须要了解leader后面操做的点击部署、合并分支的事儿了。

基础命令、拉取分支、构建编译包、copy生产包到服务器、备份资料、启动脚本、灰度发布、等等流程其实都是颇有必要了解的。

要否则最开始没有这些基础设施、基础组件，谁来搭建+运行呢，毕竟仍是须要第一批吃螃蟹的人.

即便大公司，也有小团队的，有的小团队不必定遵循大公司那一套自动化部署教程，也有本身玩本身的轮子+工具。

就算是大公司， 若是基础架构组的工具作好了，可是没有总监以上的大佬面向公司推广， 这些基础设施不必定能面向公司内部使用。

基础设施、基础组件可以面向公司内部大量使用，离不开公司高层领导的支撑、固然也有基础设施团队的辛苦开发、还须要有使用基础组件的机遇和业务场景。

总结：就像我以前文章里讲过的，当你处在先后端分离的大浪潮下，作前端的要将眼光放在整个项目上，统筹全局，不要偏安一隅，待在前端的小角落里独自玩耍。

一句话，格局要放大，步子要迈开，而后才是低头前行。

---

更多文章我会第一时间更新在公众号<闰土大叔>里面，欢迎关注~