前后端分离是指将一个web 系统的动态内容和静态内容进行分离,包括其开发、部署等。
比如传统的 MVC 架构,HTML、JS、CSS… 等前端代码和 Java、spring、mybatis… 等后端代码是在同一个项目中进行开发、部署的。那前后端分离后,就可以分多个项目进行开发、部署、多个前端、多个后端,通过 http restful api 接口的形式进行交互。
那么为什么要进行前后端分离,怎么个分离法呢,分离后怎么进行数据交互呢?
一、前后端为什么要分离?
在当今互联网时代,移动应用和网页应用的发展极大地推动了前后端分离开发模式的兴起。传统的后端渲染方式已经不能满足用户对高性能和优质用户体验的需求,于是前后端分离逐渐成为了一种主流的开发模式。
1、传统MVC开发模式的痛点
- 运行存在效率问题:JSP必须在Servlet容器中运行(如Tomcat)。在请求JSP时也需要进行一次编译过程,最后被编译成Java类和class文件,这些都会占用JVM的内存空间。JSP和Java语言关联,在解耦上无法与HTML页面相媲美。
- 开发人员分工不明确:MVC开发模式工作流程通常是前端工程师编写HTML页面,后端工程师再将HTML页面转换为JSP页面进行逻辑处理和数据展示。在某些紧急情况下,会出现前端工程师调试后端代码,后端工程师调试前端代码现象,分工不明确且沟通成本大,需要前后端一起协调工作。这一点一线工程师应该都深有体会。
- 不利于项目推进:前后端代码耦合度高,模块优化空间小,修改任何前端或后端代码都需要重新发布。前后端开发工程师只能串行工作,无法并行推进项目,项目开发效率低。
- 无法满足业务需求:前端仅限于浏览器的web应用,无法满足公司业务发展的需要(如Android原生APP、iOS原生APP、微信小程序等)。
2、什么是视图渲染?
这里面提到了传统的后端渲染方式已经不能满足用户对高性能和优质用户体验的需求,那么什么是传统的后端渲染方式呢?
现在有很多人都把“渲染”说成“呈现”,其实这种说法是不正确的,Web页面从服务器到浏览器的整个呈现过程实际上分为三步:
第一步:通过视图引擎对视图文件进行解释,将视图文件中的代码转换成HTML标记,这一步叫做渲染;
第二步:将渲染后的HTML标记传递给客户端浏览器,这一步是页面的传递;
第三步:浏览器接收到HTML后对其进行处理并呈现为Web页面,这一步才叫做呈现。
由此可见,渲染是把页面的非HTML代码(控件、页面代码等)转换成HTML标记,这一步工作是由服务器完成的。而呈现是将HTML显示成Web页面,这一步工作是由浏览器完成的。渲染和呈现是整个页面处理过程的两个不同阶段,更不能把这两步工作混谈为只有“呈现”这一步。
3、什么又是渲染引擎?
视图引擎是为浏览器实际生成HTML输出的组件,视图引擎负责为每个请求返回HTML,并且它通过将视图模板和由控制器传递进来的数据进行融合来准备其输出。
也可以这样理解:从客户端(Client)输入数据,数据存储在数据库中(DB),视图(View)结合数据库中的文档集合(Document)生成列表,如下图(我觉得这张图理解起来容易):
还有就是上面提到的视图模板,个人觉得视图模板,就是上图中的view框里面的内容,当然不是这么简单的几列,现在很多公司提供各种视图模板,其实就是提供一种写好的多列、带有一些上一页、下一页按钮的页面,这些页面只是有了呈现数据的框架,如果用了或者买了这些模板,按照提供的页面填充数据就好了,其中的一些css或者其他东西都已经在模板里面写好了。
二、前后端怎么个分离法呢?
前后端分离就是说开发分离、部署分离。可以理解成多个开发项目,然后通过http rest api接口进行数据传递。
前后端分离开发模式是一种软件开发方法,其中前端和后端的开发是相互独立的,各自负责不同的功能和逻辑。在这种模式下,前端和后端的代码分别处于不同的项目或代码库中,并通过网络接口进行通信。
在前后端分离开发模式中,前端通常是指用户界面和用户交互相关的部分,如网页或移动应用的界面和用户输入验证。前端开发使用的技术栈通常包括HTML、CSS、JavaScript等。而后端则负责处理数据逻辑、业务逻辑和数据库操作等功能。后端开发使用的技术栈通常包括编程语言(如Java、Python、Node.js等)、框架(如Spring Boot、Django、Express等)以及数据库(如MySQL、MongoDB等)。
通过前后端分离开发模式,可以实现前后端开发的并行进行,提高开发效率。而且,前后端分离也有利于团队协作,不同团队可以专注于各自的开发领域,减少开发的耦合性。此外,通过接口的方式进行通信,可以使前端和后端灵活独立地进行部署和扩展。前后端分离开发模式提供了一种灵活、高效、可扩展的方式来构建现代化的Web应用程序。
三、前后端分离的注意事项
前后端分离后,开发、部署分成了不同的项目,双方经过接口传递数据,那就存在沟通的问题了,后端改了要及时跟前端沟通。因此存在以下注意事项:
- 前端开发资源是否充足:传统MVC是以后端为主的开发模式,前端人员仅提供静态HTML页面,但采用前后端分离开发模式则会减轻后端开发人员压力,而增加前端开发人员的工作量。
- 软件迭代周期需要慎重估算:对于中小型团队,采用前后端分离开发模式,增加了接口制定流程和前后端联调流程,可能会延长迭代周期。
- 并不是所有项目开发都需要前后端分离开发模式:如果项目比较简单或一个项目需要快速开发上线,就可以采用传统的MVC开发模式进行快速迭代。
- 前后端开发人员的沟通成本:前后端分离后,无论是 API接口的对接还是测试工作,都涉及前后端人员的沟通和协作。
参考资料:
https://www.cnblogs.com/one-xiaoqiang/p/17743078.html
https://zhuanlan.zhihu.com/p/572184941