网站文件下载系统,直接翻译网页的软件,制作自己网站有什么用,wordpress中国网站模板最近我的朋友王小闰进入一家新的公司#xff0c;正好公司项目采用的是前后端分离架构#xff0c;技术栈是王小闰非常熟悉的vue全家桶#xff0c;后端用的是Java语言。在前后端开发人员碰面之后#xff0c;协商确定好了前端需要的数据接口(扯那么多#xff0c;其实也就是关… 最近我的朋友王小闰进入一家新的公司正好公司项目采用的是前后端分离架构技术栈是王小闰非常熟悉的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, // 是否跨域 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后端数据因为现在唯一的一台服务器还是在后端程序猿那里所以此时你还是可以写绝对路径(域名请求路径)利用hosts文件来改变域名映射实现联调。土哥有话说看这篇文章的童鞋不管你是在大公司还是在小公司都需要知道并不是说你将dist文件打包发给后端就完事了就不需要了解leader后面操作的点击部署、合并分支的事儿了。基础命令、拉取分支、构建编译包、copy生产包到服务器、备份资料、启动脚本、灰度发布、等等流程其实都是很有必要了解的。要不然最开始没有这些基础设施、基础组件谁来搭建运行呢毕竟还是需要第一批吃螃蟹的人.即使大公司也有小团队的有的小团队不一定遵循大公司那一套自动化部署教程也有自己玩自己的轮子工具。就算是大公司 如果基础架构组的工具做好了但是没有总监以上的大佬面向公司推广 这些基础设施不一定能面向公司内部使用。基础设施、基础组件能够面向公司内部大量使用离不开公司高层领导的支撑、当然也有基础设施团队的辛苦开发、还需要有使用基础组件的机遇和业务场景。总结就像我之前文章里讲过的当你处在前后端分离的大浪潮下做前端的要将眼光放在整个项目上统筹全局不要偏安一隅待在前端的小角落里独自玩耍。一句话格局要放大步子要迈开然后才是低头前行。- END -本号没有留言功能动动手指转发、在看是对我最大的鼓励记得把公号加星标会第一时间收到通知。原创不易如果觉得有点用希望可以随手转发或者”在看“拜谢各位老铁。
