vue项目里前后端接口联调总结

如何实现前后端接口联调

首先,我们已经知道,目前的前后端分离的架构应用分为两种情况:

  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, // 是否跨域
pathRewrite: {
‘^/api’: ‘/static/mock’
}
}
}

如果你想在公司的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后端数据

因为现在唯一的一台服务器还是在后端程序猿那里,所以此时你还是可以写绝对路径(域名+请求路径),利用shost文件来改变域名映射实现联调。

最后,不管是在大公司还是在小公司,都需要知道,并不是说你将dist文件打包发给后端就完事了,就不需要了解leader后面操作的点击部署、合并分支的事儿了,技术时时刻刻在更新,固步自封,迟早的要被淘汰的。

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

加载评论框需要翻墙