前后端分离需要考虑以下几个问题:
- 表单提交之后,前端的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应用开发需求。