为什么前后端分离了，你比从前更痛苦？

╰半夏微凉° 2022-02-19 08:39 183阅读 0赞

**一、你有没有遇到过：**

前端代码刚写完，后端的接口又变了。

接口文档永远都是不对的。

测试工作永远只能临近上线才能开始。

**二、为什么前后端分离了，你比从前更痛苦？**

[前后端分离][Link 1]早已经不是新闻，当真正分离之后确遇到了更多问题。要想解决现在的痛，就要知道痛的原因：

**2.1、为什么接口会频繁变动？**

设计之初没有想好。 这需要提高需求的理解能力和接口设计能力。

变动的成本较低。

德国有句谚语：“朝汤里吐口水。” 只有这样，才能让人们放弃那碗汤，停止不合理的行为。前后端同学坐在一起工作的时候效率会有提升，当后端同学接口变化时，只需要口头上通知一下即可，我们没有文档，我们很敏捷啊。没错，我们需要承认这样配合开发的效率会很高，但是频繁的变动会导致不断返工，造成了另一种浪费，这种浪费是可以被减少，甚至是被消除的。

**2.2、为什么接口文档永远都是不对的？**

[接口文档在定接口时][Link 2]起到一定作用，写完接口就没有用了。后面接口的频繁变化，文档必定会永远落后于实际接口，维护文档的带来了一定的成本却没能带来价值。除非对外提供的接口，否则文档谁来看呢？没人看，用处又在哪？

有些公司干脆丢掉接口文档，说我们要拥抱敏捷。

所以接口文档落后的原因在于没有给我们带来价值。

**2.3、为什么测试工作永远只能临近上线才能开始？**

一个需求，后端开发 4 天，前端开发 4 天，联调 4 天，留给测试同学只有2天时间甚至更少，测不完只能带 bug 上线。

![1240][]

在开发阶段测试同学无法介入，接口在变，前端也在变， “提测” 之前只能喝茶，“提测” 之后又忙的要命。

自动化？想都别想，空有一身好本领，在 “拥抱变化” 之后只能手工测试。偶尔还要拉上前台美眉客串一下测试小妹。手工测试枯燥乏味，乏味的工作就容易出错，而且还不能快速重复，无法对测试过的功能快速回归。

**三、怎么破？**

解决以上问题要让接口文档发挥价值，提高变动接口的成本，测试尽早介入。

接口文档发挥出价值，就要赋予契约的意义，就如同签字画押谁也不许变，来约束我们只认契约不认人。

契约应该由前端同学来驱动，前后端共同协商。由于前端同学与 UX 接触比较紧密，更了解页面所需的数据以及整体的 User Journey，前端同学驱动会更加合理。

契约敲定之后要帮助我们生成 Mock Server（后面我们会介绍一个工具），前后端同学就要依照契约各自开发。Mock Server 可暂时替代后台服务，帮组前端开发，同时，测试同学也可以依照契约文档来编写测试脚本，使用 Mock Server 进行脚本验证。

![1240 1][]

当后端接口发生变化除了口头通知以外必须修改契约，前端同学和测试同学才能各自修改。如此一来修改契约的成本变高，人们在定契约时则会更加慎重，也会促使我们提高接口的设计能力。

看到图中没有 “联调” 的环节，并不是画错了，而是 “联调“ 不再是一项工作，在部署后只需要更改代理的配置即可。甚至使用现代前端框架（如，Vue 或者 React）只要在开发时配置一下，之后都不需要调整任何代码。

“提测” 呢？测试一直都在进行，也就不再有一个 ”提测“ 的环节，无论前后端任意一方完成开发，测试同学都可以进行测试。

理论终于扯完了，说起来容易做起来难啊，需要工具来帮助我们。接口描述的工具有很多，比较知名的 Swagger 和 Raml，我个人更倾向于 Raml 。

![strip][]

描述工具生成文档还不够，还要生成 Mock Server，如果描述工具和 Mock Server 是分离又带来了额外的工作，好在有她——raml-mocker。

**四、raml-mocker**

raml-mocker 是一个基于 Raml 使用 Nodejs 开发的 Mock Server 工具，使用 Raml 描述接口中设置 response 的 example 指令即可，raml-mocker 会解析 Raml 文件，并启动一个 Mock Server，将 example 的内容[返回给浏览器][Link 3]。

**4.1、开始**

初始化项目

![1240 2][]

安装

![1240 3][]

启动 mock server

![1240 4][]

**测试**

![1240 5][]

生成 API 可视化文档

![1240 6][]

此功能使用了raml2html。

**4.2、配置 .raml-config.json**

![1240 7][]

controller: controller 目录路径，在高级篇中会有更详细说明

raml: raml 文件目录

main: raml 目录下的入口文件

port: mock server 服务端口号

plugins: 插件

**4.3、入门篇：Mock Server**

raml-mocker 只需要在response 添加 example:

![1240 8][]

books\_200.json

![1240 9][]

通过 curl 请求：

![1240 10][]

就会得到 example 的数据，唯一不足是无法根据参数动态返回不同数据。别急，请往下看。

**4.4、高级篇：动态 Server**

如果静态的 Mock 数据不能满足你的需求，Raml-mocker 还提供了动态的功能。

在 raml 文档中添加 (controller) 指令，即可添加动态的 Server，如：

![1240 11][]

在文档中 (controller) 表示 controller 目录下 user.js 中 getBook 函数。

controller/user.js

![1240 12][]

Raml-mocker 是在 expressjs 基础上进行开发，req、res 可以参考 express 文档。

webApi 会返回文档中的配置：

![1240 13][]

如此，raml-mocker 提供了更多可扩展空间，我们甚至可以在 controller 中实现一定的逻辑。

**4.5、插件**

Raml-mocker [提供了插件][Link 4]机制，允许我们在不使用 controller 指令的时候对 response 的内容进行处理，例如使用 Mockjs。

.raml-config.json

![1240 14][]

/plugins/mock.js

![1240 15][]

**五、总结**

[前后端分离][Link 1]可以让我们的职责更清晰，打破前端发挥的局限，工作解耦之后能更好的提高开发效率。然而因为没有规划好开发流程，导致了我们没有发挥出其应有的价值，造成了更多的浪费。

raml-mocker 能够帮助我们在工具上解决一定的问题，更重要的是持续改进的思想，只有团队的思想是统一的才有可能达到快速交付。

希望能对你有所帮助，谢谢！

***扩展阅读***

[前后端分离与不分离的本质区别！][Link 1]

[趣图：前端 VS 后端][VS]

[某小公司 RESTful、共用接口、前后端分离、接口约定的实践][Link 2]

[MySQL 主从复制与读写分离概念及架构分析][MySQL]

[一位程序猿面试蚂蚁金服后端的经验总结！][Link 5]

[HashMap为什么是线程不安全的][HashMap]

来源：https://my.oschina.net/xbl/blog/2246297

文章来源网络，版权归作者本人所有，如侵犯到原作者权益，请与我们联系删除

![1240 16][]

[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485934&idx=3&sn=37c8d94d271d4f6fe46d04461ec2febb&chksm=fe795836c90ed1207d7ed96f2de05b744c8b0c124101ad0cd31ea54026f3288422f71e1ea729&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247486178&idx=2&sn=6b9b6d22e9f1d5482e8ee42f7409ec1c&chksm=fe795b3ac90ed22c197a8d94ca4d4970f4ff2abeabb08a50dd6a4d20110e846d025f871fb278&scene=21#wechat_redirect
[1240]: /images/20220219/66175bdd081448928c3d6cbb358c347e.png
[1240 1]: /images/20220219/1b896cbccd844b44a2cce92f0af9bdd7.png
[strip]: /images/20220219/af7702b562694903bf227ec559f643e0.png
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485614&idx=1&sn=92b78fe39a34ccf25e6c7c59bf0af3fd&chksm=fe795976c90ed06080ba219d9e4db8db0b39f180c14d0fbcdebb367a2d928c89bef7f5dea82e&scene=21#wechat_redirect
[1240 2]: /images/20220219/e906927e0b694ff18ad33077625908cf.png
[1240 3]: /images/20220219/f5154375c8f34884be48d137459dfa15.png
[1240 4]: /images/20220219/1273a174c54b471099e5e41c9ed2aaa8.png
[1240 5]: /images/20220219/ee736546878d47c4a0aae35edd4e3961.png
[1240 6]: /images/20220219/f67d95db9e12470f8aa9b1dcf636c54a.png
[1240 7]: /images/20220219/c25b9d29b7a042938b1f2c3e8143e5a3.png
[1240 8]: /images/20220219/8e1cb65816b643dab191472de198ef13.png
[1240 9]: /images/20220219/920e5380db47426b942ff7480ddf76a3.png
[1240 10]: /images/20220219/7623807ffef14df59df01fc093494fb0.png
[1240 11]: /images/20220219/ab4530215bbe4934b6d5a1109e878e2b.png
[1240 12]: /images/20220219/24c87804ac2647d5ab0eb90c50a0390f.png
[1240 13]: /images/20220219/b1667f28785940ee9f001737598520cf.png
[Link 4]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247486104&idx=2&sn=4f723fe67852176baea3786e90a6216f&chksm=fe795b40c90ed256d582ee7927d0d6bd493b833c1b50bf1ad0033f94a17be1014378cea5a4cd&scene=21#wechat_redirect
[1240 14]: /images/20220219/cd8b0b4d2e5c4a1298f1f0d0b70ac738.png
[1240 15]: /images/20220219/a89c123271d3477c85ce14420df90a53.png
[VS]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485352&idx=5&sn=f05a4c179147341e491774ef5287e36e&chksm=fe795670c90edf66e065f6fbf0e0360973b3adc34802e01515ba80809d63164edc24464b3c34&scene=21#wechat_redirect
[MySQL]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485345&idx=3&sn=4eeb061255f02014270612742c674473&chksm=fe795679c90edf6f9301409088778b535e61432d80f24c47e01391c6660725dd2232bc150d6e&scene=21#wechat_redirect
[Link 5]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247484691&idx=2&sn=9a55bda7c247ca47e46eb514515e5861&chksm=fe7954cbc90eddddca95982a1c8ef30f82f4ba562024f1c1e8d1e597994143dc7245512f74e9&scene=21#wechat_redirect
[HashMap]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247486248&idx=2&sn=133a15feed2b02799db7c1536f84edc2&chksm=fe795af0c90ed3e6ca010164434c26a23f1245bcd7b4c3b8e40324a5337c8d713a9f6608772a&scene=21#wechat_redirect
[1240 16]: /images/20220219/a1a0b4d7007f475c8b8864f42a03f270.png

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关前后端分离

、前后端分离的好处（1）彻底解放前端（2）提高工作效率，分工更加明确。（3）局部性能提升（4）降低维护成本 2、前后端分离的概念后台只需要提供API接口，

灰太狼/ 2023年06月03日 02:53/ 0 赞/ 54 阅读

相关前后端分离，是为了彼此更好

一、被误解的前后端分离在Web应用开发过程中，业界对前后端的分界线似乎一直都没有确定的概念，不过大多数人以浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称为前

本是古典何须时尚/ 2022年07月13日 01:58/ 0 赞/ 212 阅读

相关前后端分离

转自：https://www.jianshu.com/p/21775989ec46 自从AJAX大行其道，前后端分离开发模式已是大势所趋，这里笔者针对对前后端分离开发模式谈谈

红太狼/ 2022年05月29日 02:51/ 0 赞/ 510 阅读

相关前后端分离，是为了彼此更好

一、被误解的前后端分离在Web应用开发过程中，业界对前后端的分界线似乎一直都没有确定的概念，不过大多数人以浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称为前

忘是亡心i/ 2022年05月28日 06:55/ 0 赞/ 168 阅读

相关前后端分离

前端客户端,后端服务器端,spring cloud实现为服务之间的通讯.类似于zookeeper跟dubbox,通过用js掉api前后端交互.![watermark_ty

淡淡的烟草味﹌/ 2022年04月10日 06:10/ 0 赞/ 459 阅读

相关为什么前后端分离了，你比从前更痛苦？

一、你有没有遇到过：前端代码刚写完，后端的接口又变了。接口文档永远都是不对的。测试工作永远只能临近上线才能开始。二、为什么前后端分离了，你比从前更痛苦？ [前

╰半夏微凉°/ 2022年02月19日 08:39/ 0 赞/ 184 阅读

相关为什么要前后端分离？

一、引言前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型

痛定思痛。/ 2022年01月26日 23:57/ 0 赞/ 290 阅读

相关说实话：前后端分离后，比从前更痛苦了

点击上方 [Java后端][Java]，选择设为星标优质文章，及时送达 ![format_png][] 作者 | 谢小呆呆呆链接 | https://ww

电玩女神/ 2021年08月19日 13:51/ 0 赞/ 293 阅读

相关为什么要前后端分离？

![640?wx\_fmt=png][640_wx_fmt_png] 作者：互扯程序来源：互扯程序广而告之：由于此订阅号换了个皮肤，系统自动取消了读者的公众号置顶

╰+攻爆jí腚メ/ 2021年08月01日 00:07/ 0 赞/ 500 阅读

相关想和你聊聊前后端分离！

点击上方“Web项目聚集地”，选择“置顶”公众号重磅干货，第一时间送达![640?wx\_fmt=jpeg][640_wx_fmt_jpeg] 前言本文作者松哥，著有

淡淡的烟草味﹌/ 2021年07月31日 15:50/ 0 赞/ 416 阅读