前后端分离

前后端分离需要考虑以下几个问题：

• 表单提交之后，前端的URL就被后台控制了
  一切提交表单都不能直接submit，要把表单数据通过ajax提交，而不能form.submit
  ajax提交表单的方式把url的控制权保留在了前端手中
• 前后端分离之后，如何让多个html页面共用header，footer等公共部分
  通过组件（component）的方式，组件之间构成了一个树形结构。
• 前后端分离之后，URL如何跳转
  前后端分离之后，整个前端就变成了SPA（单页面应用），就像一个手机APP一样，只有一个index.html，一切路由都是由前端js通过history控制的。

传统的网站开发方式是MVC，一切html界面都必须是由后端来控制显示的，一切html页面皆是模板。不能直接访问模板，而必须通过后端Servlet来访问模板。掌握这条准则，就能在后端游刃有余。

在前后端分离中，前端就像一个Android手机。Android手机发出的HTTP完全是AJAX方式的。
传统的表单提交通过action来控制表单提交的目标URL，提交之后，URL跳转的权限就完全交给后端了。

前后端分离可以从四个方面进行理解：

1、交互形式

2、代码组织方式

3、开发模式

4、数据接口规范流程

一、交互形式

在前后端分离架构中，后端只负责按照约定的数据格式向前端提供可调用的API即可。前后端之间通过HTTP请求进行交互，去前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。

二、代码组织方式

在传统的架构模式中，前端代码存放于同一个代码库中， 甚至是同一工程目录下。页面中还夹杂着后端代码。前端工程师进行开发时，都必须把整个项目导入到开发工具中。

前后端分离模式在代码组织形式上有两种：

半分离：

前后端代码共用一个代码库，但代码存放在两个工程中。后端不关心或很少关心前端元素的输出情况，前端不能独立开发和测试，项目中缺乏前后端交互测试的用例。

全分离：

全后端代码库分离，前端代码中有可进行Mock测试（通过构造虚拟测试对象以简化测试环境的方法）的伪后端，能支持前端的独立开发和测试。而后端代码除了功能实现外，还有着详细的测试用例，以保证API的可用性。

三、开发模式

传统MVC架构：

整体没有进行前后端分离。

项目开发阶段，前端工程师负责编写HTML，完成前端页面的设计，然后使用模板技术将前端代码转换成Smarty脚本，同时内嵌一些后端提供的模板变量和一些逻辑操作。

部署阶段，将全部代码进行打包，和后端代码部署到同一个服务器上，同时会进行简单的动静态分离部署。

此时，应用开发流程如下图所示：

前后端分离架构：

实现前后端分离架构之后前端工程师只需要编写HTML、JS、CSS等前端资源，然后通过HTTP请求调用后端提供的服务接口即可，除了开发阶段的分离，在运行阶段也会进行分离部署。

前后端分离架构开发流程如下：

优点：前后端分工明确，并行开发。

四、数据接口规范流程

在开发阶段前后端共同商定好数据接口的交互形式和数据格式。然后前后端并行开发，前端工程师独自进行mock测试，后端使用接口测试平台进行接口自测。然后前后端一起进行功能联调并校验格式，最终进行自动化测试。

五、优点

为优质产品打造精益团队

提高开发效率

完美应对复杂多变的前端需求

增强代码的可维护性

五、应用场景

页面布局复杂，使用了主题和样式；需要有较高的页面渲染效果；前端页面中包含复杂业务逻辑；页面需要渲染的数据量较大；

六、结语

前后端分离不仅仅是前后端开发的分工，而是在开发期进行代码存放分离、前后端开发职责分离，前后端能够独立的进行开发测试。在运行期进行应用部署分离，前后端之间通过HTTP请求进行通信。前后端分离的开发模式与传统的模式相比，能为我们提升开发效率、争强代码的可维护性，让我们有规划的打造一个前后端分离的精益开发团队，更好的应对越来越复杂多变的WEB应用开发需求。