一 传统的开发模式
前后端分离前我们的开发协作模式一般是这样的:
![图片[1]-不懂前后端分离?-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/09/1726347718438_0.png)
前端写好静态的HTML页面交付给后端开发。静态页面可以本地开发,也无需考虑业务逻辑只需要实现View即可。
后端使用模板引擎去套模板,同时内嵌一些后端提供的模板变量和一些逻辑操作。
然后前后端集成对接,遇到问题,前台返工,后台返工。
然后在集成,直至集成成功。
这种模式的问题
在前端调试的时候要安装完整的一套后端开发工具,要把后端程序完全启动起来。遇到问题需要后端开发来帮忙调试。我们发现前后端严重耦合,还要要求后端人员会一些HTML,JS等前端语言。前端页面里还嵌入了很多后端的代码。一旦后端换了一种语言开发,简直就要重做。
像这种增加了大量的沟通成本,调试成本等,而且前后端的开发进度相互影响,从而大大降低了开发效率。
二 前后端分离的开发模式
前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。
1. 客户端和服务端采用RESTFul API的交互方式进行交互
![图片[2]-不懂前后端分离?-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/09/1726347718438_1.png)
2. 前后端代码库分离
![图片[3]-不懂前后端分离?-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/09/1726347718438_2.png)
在传统架构模式中,前后端代码存放于同一个代码库中,甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时,都必须把整个项目导入到开发工具中。
前后端代码库分离,前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端,能支持前端的独立开发和测试。而后端代码中除了功能实现外,还有着详细的测试用例,以保证API的可用性,降低集成风险。
3. 并行开发
![图片[4]-不懂前后端分离?-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/09/1726347718438_3.png)
在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发,其中前端工程师在开发完成之后可以独自进行mock测试,而后端也可以使用Postman等接口测试软件进行接口自测,然后前后端一起进行功能联调并校验格式,最终进行自动化测试。
分离后,开发模式是这样的
![图片[5]-不懂前后端分离?-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/09/1726347718438_4.png)
![图片[6]-不懂前后端分离?-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/09/1726347718438_5.png)








