前后端的分离

Posted 2021-02-03 mayun0504

对于大部分应用，已经不需要从后端读取html页面或者模板，前端完全可以根据数据自行渲染页面/模板，这样，前后台交互就可以简化为数据的增删改查。利用AJAX技术，实现页面局部刷新，促使了前后台分离的可能性。

那么，如何利用前后端分离开发模式，开始一个项目呢?

1. 产品文档

产品经理会先设计好整个产品的业务模块和流程，并给出产品文档，包括UI交互，流程图，模块划分等等。
这个时候，产品，前端，后端，测试需要一起评审文档，可能需要多次评审才能确定设计方案。

2. 前端提供接口定义

第二个阶段是前后台同时开发时期。后端同学在设计数据库和表结构的时候，前端同学应该熟悉交互文档和整个业务在表现层上的流程，并且根据页面的展现方式，给出合理或者期望的数据模型（一般是JSON数据结构） 。

比如，需要哪些接口？接口API是只读的还是可修改的？接口入参是什么？接口出参是什么？......这些问题，以往都是由后端同学考虑并定义的。但是，实际上，前端同学是最熟悉交互操作的，前端同学期望的API也是最符合页面需求的，当然，如果某个接口涉及到其他业务模块时，它的复杂性可能就无法在页面上体现出来。然而，无论如何，前端同学是应该，也能够在接口定义上提供合理，富有建设性意见的方案。

因此，第二阶段，前端需要给后端同学提供一份接口定义清单。

3.后端给出接口文档，并通过review

阶段二前端同学提供的接口设计清单，毕竟只是建议，真正的接口还需要后端定义和实现。所以，第三阶段，后端需要提供正式的API文档，并且，前端同学参加review，确保所有的API（入参，出参，和HTTP请求方法）都被双方认可。

4. 前后端同步开发

API文档确定后，前后台就能够同时开发了。这时，又可能分为两种情况。

(1) 后端已经定义好接口并且发布，但是，返回值都为假数据，不支持修改操作。前端同学利用已发布的API进行测试。
(2) 后端没有发布任何接口，前端同学自行mock数据（利用本地json文件，或者在线的一些mock工具，比如easy mock等模拟数据），然后边写页面边测试。

5. 联调阶段

当后端业务代码已经完成，前端页面和数据交互部分完成，前后端就可以进行联调了。这个阶段，是磨合期，肯定会出现很多问题，也需要双方协商去解决。

当后台接口变更时，必须同步更新API文档，并第一时间通知前端同学，保证前台接口调用也同步更新。

同时，测试人员可以介入，针对接口进行单元测试。注意，这时只是针对接口的黑盒测试，不要涉及任何UI操作。

6. 冒烟测试和其他安全性测试

当联调阶段完成后，也就是开发人员（前端和后端）认为已经没有bug的情况下，项目再交由测试人员进行冒烟测试。同时，有需要的话，同时安排安全性测试。

几轮测试，几轮bug fixing之后，项目就可以上线了。

小结

可以看到，前后端分离开发模式可以让分工更明确，提高生产效率，加速项目开发和迭代，也能够让API文档化，便于后期维护。