1. 背景
系统架构的发展可以概括为三个阶段，即前后端未分离阶段、前后端半分离阶段和前后端完全分离阶段。
另一方面，前后端分离的开发架构可以有效提高项目开发效率、维护效率和管理效率，在开发过程中前后端代码进行独立的开发和修改，最终通过接口的调用完成功能对接。而项目管理人员可以更好的规划项目开发周期，为项目敏捷开发、快速迭代奠定良好的基础。
为了更好地适应大型分布式架构、微服务架构和多终端服务应用场景，前后端之间的逐渐解耦是技术发展的必然趋势。在下文中会针对前后端系统架构的三个发展阶段分别进行详细介绍，对比各阶段之间的优劣性，让读者对这三个阶段有更清晰的认识。
2、前后端未分离阶段
在前后端未分离的模式中，前端的页面效果都是由后端来控制，前端发出请求，由后端渲染页面，具体情况如下图所示：
而前后端未分离模式时期最常用的便是MVC（Model-View-Controller）框架，其原理如下图所示：
MVC框架在上个世纪70年代问世，对于当时来说，一个较为清晰的前后端交互模型，以及较高重用性，直到今天它依然被人们使用，可见其还是有一定的优越性。
图3. 前后端半分离
-
前端浏览器请求，CDN返回HTML页面；
-
HTML中的JS代码以Ajax方式请求后台的Restful接口；
-
接口返回Json数据，页面解析Json数据，通过DOM操作渲染页面；
-
后端将数据拼装为JSON，通过接口供前端使用。
4. 将DOM字符串插入页面中web view渲染出DOM结构；
WEB工作流程中的步骤是在用户端进行，减轻了服务端的一部分工作。但是数据的展示及页面的加载等与用户的设备性能由很大的关联性。也就是说，如果用户设备足够好，资源加载快，用户体验好。反之，则相反。
然而，在这种架构下，还是存在明显的弊端的。最明显的有如下几点：
4. 资源消耗严重，在业务复杂的情况下，一个页面可能要发起多次HTTP请求才能将页面渲染完毕。
正是因为如上缺点，我们才亟需真正的前后端分离架构。
4、分离时代
随着前后端彻底的分离后，开发权重前移，前端开发人员不必再受到后端数据模板的局限，后端开发人员的职责也进一步明确，不再对数据的展现逻辑进行处理，前后端可以在约定好接口之后实现高效并行开发。
前后端分离框架比传统基于web的应用开发框架具有更加高效灵活等特点，并且还减轻了服务器端的负载。在传统的基于Web的软件开发过程中，前后端的分界线通常为浏览器，一般认为在浏览器中处理与用户进行交互展示的部分为前端；将在服务器运行，并且为前端提供业务逻辑和数据的部分等代码称为后端。
在传统的MVC框架结构下，前端与后端之间的耦合度高，改动任何一个前端页面都会引起控制层、模型层和视图层进行相应改变，开发效率大大降低，从而项目的扩展开发受到限制。同时，由于前端请求的是完整HTML页面，在网络带宽有限的情况下，会导致用户界面卡顿，因此也增加了服务器后端解析的负担。
图4. 前后端完全分离
前后端分离项目架构是一种新型的Web应用架构模式，前后端在开发阶段规定好数据的交互格式，实现开发和测试并行，同时，在运行阶段分离部署前后端项目，通信交互请求则继续使用HTTP或者其他协议。
近几年来，随着React、Vue、Angular等前端框架的迅速发展和广泛应用，前后端分离技术的性能和优势也得到了充分肯定，其应用规模与技术方案也越来越成熟。与传统的Web开发结构不同，前后端分离架构针对静态资源的请求，同样是直接定位并返回，但客户端向服务器请求的不再整个动态页面，而是以Ajax请求的形式，通过向后台发送API进行请求，后端只负责读写数据库并响应前端API数据请求。
客户端异步获取API数据后，通过JavaScript动态修改页面内容切换用户视图。这样一方面减轻了服务器端动态生成HTML视图的负担，另一方面，由于用户视图的切换仅依赖于JavaScript的执行，无需考虑网络带宽的延迟，因此大大提升了Web应用的操作交互效率。
与此同时，后端只提供API服务而不考虑前端的实现问题，所以可以在同一套后端API的基础上建立多个前端，包括Android端、IOS端、Web端及PC端等。对于前端来说，可以借助React Native、Codorva等框架开发Hybrid应用，实现同一套代码开发，多终端下部署。
5、总结
本文分享自微信公众号 - Java后端（web_resource）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
相关文章
