为什么要进行前后端分离?

111zq 111zq     2023-02-22     514

关键词:

一、认识前后端分离

可能很多人会有误解,认为web应用的开发期进行了前后端开发工作的分工就是前后端分离。但其实前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。

二、为什么要进行前后端分离

在以前传统的网站开发中,前端一般扮演的只是切图的工作,只是简单地将UI设计师提供的原型图实现成静态的HTML页面,而具体的页面交互逻辑,比如与后台的数据交互工作等,可能都是由后台的开发人员来实现的,这也就导致了前后端工作分配不均。这样做不仅仅开发效率慢,代码也难以维护。而前后端分离的话,则可以很好的解决前后端分工不均的问题,将更多的交互逻辑分配给前端来处理,而后端则可以专注于其本职工作,像提供API接口,进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器,直接在本地开发,然后通过一些插件来将api请求转发到后台,这样就可以完全模拟线上的场景,并且与后台解耦。前端可以独立完成与用户交互的整一个过程,两者都可以同时开工,不互相依赖,开发效率更快,而且分工比较均衡。

三、实现前后端分离

前后端分离大概可以从四个方面来理解:

 

1.交互形式

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

  2.代码组织方式

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

  3.开发模式

实现前后端分离架构之后,前端工程师只需要编写HTMLjsCSS等前端资源,然后通 过HTTP请求调用后端提供的服务即可。除了开发期的分离,在运行期前后端资源也 会进行分离部署。前后端分离之后,开发流程将如下图所示。

 技术分享图片

通过上面的流程图,不难发现,在开发模式上,前后段分离不仅仅只是工程师的分工开发,更重要的意义在于实现了前后端的并行开发,简化了开发流程

4.数据接口规范流程

在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发,其中前端工程师再开发完成之后可以独自进行mock测试,而后端也可以使用接口测试平台进行接口自测,然后前后端一起进行功能联调并校验格式,最终进行自动化测试。

 技术分享图片

四、前后端分离的好处

1. 适配性提升

我们其实在开发过程中,经常会给pc端、mobileapp端各自研发一套前端。其实对于这三端来说,大部分端业务逻辑是一样的。唯一区别就是交互展现逻辑不同。如果controller层在后端手里,后端为了这些不同端页面展示逻辑,自己维护这些controller,徒增和前端沟通端成本。

2. 响应速度提升

我们有时候,会遇到后端返回给前端的数据太简单了,前端需要对这些数据进行逻辑运算。那么在数据量比较小的时候,对其做运算分组等操作,并无影响。但是当数据量大的时候,会有明显的卡顿效果。这时候,node中间层其实可以将很多这样的代码放入node层处理、也可以替后端分担一些简单的逻辑、又可以用模板引擎自己掌握前台的输出。这样做灵活度、响应度都大大提升。

3. 性能得到提升

大家应该都知道单一职责原则。从该角度来看,我们请求一个页面,可能要响应很多看后端接口,请求变多了,自然速度就变慢了,这种现象在mobile端更加严重。采用node作为中间层,将页面所需要的多个后端数据,直接在内网阶段就拼装好,再统一返回给前端,会得到更好的性能

javaweb项目放弃jsp?为什么要前后端解耦?为什么要前后端分离?

前戏前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端... 查看详情

带头大哥777:为什么要前后端分离?

 一、前戏前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多... 查看详情

[刘阳java]_为什么要前后端分离

前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例... 查看详情

前后端分离实践

...于层出不穷的问题,甚至会有团队质疑,一体化好好的,为什么要前后端分离?说到底,并不是前后分离不好,只是可能不适合,或者说……设计思维还没有转变过来……一体式Web架构示意前后分离式Web架构示意为什么要前后端... 查看详情

前后端分离

一丶为什么要实现前后端分离:前后端分离有什么好处按照项目开发来说:1.实现前后端分离可以使项目更快的研发完成,2.加快了项目的时间传统开发形式: 前后端分离开发:在开发阶段,当有新的需求时,前后端工程师约定好接... 查看详情

你是如何看待前后端分离的?

...分离式web架构。一体式Web架构示意前后分离式Web架构示意为什么要做前后端分离,它到底有什么好处?  前后端的分离也实现了前后端架构的分离,带来的好处有:    整个项目的开发权重往前移,实现真正的前后端解藕... 查看详情

前后端分离浅析

什么是前后端分离?前后端为什么要分离?前后端怎么样分离的?前后端分离给我们前端技术人员的开发带来什么样的好处?下面我就带着这些问题,来简单谈谈我了解到的前后端分离情况。 在讲前后端分离之前,让我们先... 查看详情

我们为什么要尝试前后端分离(代码片段)

这不是一篇纯技术文章,而是一篇分享我个人在前后端分离路上收获的点点滴滴的文章,以此来为准备尝试前后端分离或者想了解前后端分离的童鞋做一个大体的讲解。 尝试与改变如果你没有尝试过前后端分离的工作流程,... 查看详情

什么是前后端分离?为什么分离

参考技术A在不使用vue,react,anglar这类的框架的情况下,前后端分离应该如何做?需求是这样:前端写html页面(非单页面应用),index首页about关于我们newslist新闻列表newsdetail新闻详情productlist产品列表productdetail产品详情后台只提... 查看详情

为什么要前后端分离?前后端分离的好处和坏处是什么?

刚入职新公司,新公司的前端技术栈除了支付宝小程序,其他项目都是jquery+html写的。领导想让我推一下vue+vue-cli+webpack,前后端项目的想法,我正在做整理资料,我便想到了前后端分离项目的必然性的特点,和传统技术的优势;... 查看详情

前后端分离介绍(代码片段)

我们为什么要尝试前后端分离尝试与改变如果你没有尝试过前后端分离的工作流程,那么可以先试想一下这样的流程改变:把流程从 PM:“我要这个功能”后端:“这个先找前端做个模板”前端:“模板做完了”后端:“我... 查看详情

前后端分离

...口,或者API,前端通过访问接口来对数据进行增删改查。为什么要有前后端分离多端适应前后端开发职责不清模板到低是前端写还是后端写?如果前端写,前端就要懂后端模板语言如果后端写,那么后端就要懂前段html,css,js甚至更多... 查看详情

转载java前后端动静分离,javaweb项目为什么我们要放弃jsp?

...toutongyang/article/details/50878214 今天看到两篇文章,讲解为什么web开发启用jsp,确实挺有道理,整理如下: 使用jsp的痛点:1.jsp上动态资源和静态资源全部耦合在一起,服务器压力大,因为服务器会收到各种静态资源的http请... 查看详情

前后端分离实践—如何解决跨域问题

...可参考淘宝前后端分离实践淘宝前后端分离系列文章我们为什么要尝试前后端分离这里主要分享前后端分离后,如何解决跨域问题服务端Rails作为一个R 查看详情

转载javaweb项目为什么我们要放弃jsp?为什么要前后端解耦?为什么要动静分离?

转载至[http://blog.csdn.net/piantoutongyang/article/details/50878214],仅供自己参考。看了他的整篇文章,整理出下面的重点:使用jsp的痛点:1.jsp上动态资源和静态资源全部耦合在一起,服务器压力大,因为服务器会收到各种静态资源的http... 查看详情

前后端分离与不分离,一点点理解

1>为什么要前后端分离?现有开发模式的使用场景前后端职责不清开发效率的问题对前端发挥的局限2>前后端分离会带来什么变化?  1.彻底解放前端    制作页面的时候,不需要后台配置服务器环境,可以自己配置路由,前... 查看详情

前后端分离

...View和Controller层。后端:负责Model层,业务处理/数据等。为什么要增加一层NodeJS?现阶段我们主要以后端MVC的模式进行开发,这种模式严重阻碍了前端开发效率,也让后端不能专注于业务开发。 解决方案是让前端能控制Control... 查看详情

不懂前后端分离?这篇就够

...行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。1.客户端和服务端采用RESTFulAPI的交互方式进行交互2.前后端代码库分离在传统架构模式中,前后端代码存放... 查看详情