导读

  • 什么是前后端分离
  • 为什么要前后端分离
  • 如何做到前后端分离
  • 设计阶段
  • 开发阶段
  • 测试阶段
  • 部署阶段
  • 总结
什么是前后端分离

顾名思义,前后端分离的核心,就是让前端开发者和后端开发者各自独立,即前端开发者只写前端,后端开发者只写后端,二者不需要太多的言语沟通,就能合作完成一个项目。

前后端开发者,均采用"REST风格"开发。简单的讲,就是发送的http请求要支持POST、DELETE、PUT、GET四种请求方式。因为这四种方式,分别对应增删改查四种操作,具体是:POST对应“增”,DELETE对应“删”、PUT对应“改”,GET对应“查”。前端页面通过AJAX调用后端的Restful API接口并使用json数据进行交互。

前后端开发者,共同维护一个“数据格式”,这个“数据格式”在java中就是很常见的 实体类。以java为例,前后端共同维护的这个“实体类”,既是前端接收的格式,也是后端返回的格式。

前后端分离架构叫什么 前后端分离是如何做的_前端开发

前后端不分离

大家如果自学过前段开发的话,应该会有什么感觉?就是,前端开发这东西怎么这么琐碎?

东西非常零碎,很多人学习的时候都是东拼西凑的吧,面向复制粘贴编程copy html 代码,copy js copy css 样式,东拼西凑的,反正就是靠往上堆积。

来试图完成你要的页面和效果。你感觉这个就是没有java 开发,那么有逻辑那么好管理,前段开发可能很多人都是在涉及代码片段,这是东拼西凑复制粘贴来的。

完成代码复用的,但是后端开发了不一样了,有各种各样的什么工具类?jar包,maven 依赖,很明显后端开发有一种那种工程化的思维。

但是前端的时候却没有,所以像vue react 这些前端框架的途径,它们是从本质上颠覆了前端开发的游戏规则。

它们叫做前端开发组件化框架。因为自此开始,大家开始都遵循一套体系来进行约束性的开发。

前端开发也越来越工程化,组件化越来越有章可循的,而且前端代码也更好复用了,自从有了诸如像Vue.js还是react.js 这种。

组件化开发框架的出现。别人写的各种各样的按钮,现成的按钮,现成的菜单,性能的布局组件,主题直接拿过来用,蚂蚁金服的那套ui 组件,这类的。 随着node 出现,前端开发也可以借助node 来开发各种各样的工具来辅助开发,比如包管理器,各种各样的预编译工具,这也是前两天发迈入工程化迭代化、可复用化的一个很重要的方面。。

那前后端分离到底要如何去实施呢?或者说到底怎么样去做才是一个比较优雅的前后端分离呢?

前后端分离架构叫什么 前后端分离是如何做的_前端开发_02


前后端分离架构叫什么 前后端分离是如何做的_后端开发_03


前后端分离架构叫什么 前后端分离是如何做的_后端开发_04

为什么要做前后段分离

做前后端分离这件事,有一个就是社会上现在很多的公司和团队一个大的误区就是为了做前后端分离而去做前后端分离。所以这件事情必须要从历史渊源来说起。以前很长一段时间里,在一个搞开发公司里其实后端开发工程师是比较有门面的,后端开发也是所谓的叫有技术含量的,也是项目和公司的核心团队。或者说自己自学的呢都是后端开发的内容。那个时候前端开发肯定也是有。
那个时候前端开发人员?根本就没有什么话语权,只是一小撮人散步在团队的各个角落,更多的是在很多团队里,前端开发其实都是后端开发工程师的兼任的。

随着整个社会信息化程度的加深,在各种各样的什么服务,都web化以后,其实很多前端展示的东西都变得非常的复杂?
前端复杂之后呢,像jsp 这种套模板的技术,它没有办法高效的去开发,因为需求复杂之后,原生的那些html ,js, css 的。
在构建这些复杂页面的时候呢,就会变得非常的繁杂,就是本质原因。还是因为前端那个时候没有工程化,模块化和可复用化的思维来做。因为那个时候的前端,没有一个像后端,比如像Spring这样的工程化的参考框架。

所以这个时候开发必然就会出现各种各样的不协调,还有一些效率低和互相推卸的问题。所以从公司项目管理的角度来看,这种开发模式就会非常影响开发效率。

所以项目管理者就会开始想办法来解决这个问题。在软件领域,在任何复杂问题的前面。都要提到
高内聚低耦合这种原则,所以前后端的事情分开来做。我们要把前端开发的责任从后端开发工程师身上拿掉。

要给前端开发工程师一个单独的岗位和领域。不能让总是使用野生的开发模式,不然一天到晚去copy html 代码段,js代码段。
css 样式试错,调试等等,前段也需要工程化项目化的思维来做。这才是前后端分离开发模式最开始的来源

后来的vue.js,react.js,他们都只是后来的一个具体的实现方式。所以说来说去,从本质上来看,前后端分离。
他本身不是一个什么技术问题,而是一个工程化和项目管理的问题。

如何做到前后端分离

简化来讲应该有四大部。
设计开发、测试和部署。所以真正的前后端分离应该渗透到以上的每一个不同层面上去,这才能算得上是真正的情况。

设计阶段

首先第一个阶段设计阶段,设计的第一个层面当然是系统设计,嗯后端系统设计比较好理解,包括什么后端架构,系统架构设计,数据库中间件的缓存,这些架构的设计。

考虑性能容量,扩展性,可维护性这个东西,那前端也应该如此,假如说你这个网站页面极多,非常复杂,这是个前端项目架构。

也得做好充分的规划和准备,一定要满足一个长期可演进可迭代的目标。这个其实在设计上也得考虑。

当然设计的第二个层面就是这个接口设计,前后端分题之后,前后端系统通过接口进行交互,这个是肯定的。这个时候呢模型层面这个接口约定极其重要,包括什么接口的请求方式。

数据类型呢还有一些数据的格式,这个东西我觉得一定要评审到位,不然在未来你开发写代码过程中,你会发现前后端开发工程师永远是为了某个接口扯来扯去。

开发阶段

第二个阶段当然就是所谓的这些开发阶段,前后端各自按照时间约定的接口独立去开发,我觉得一旦前后端开发人员为了某个接口的事情出现纠纷,我觉得这个开发其实称不上严格独立的这种前后端开发。

因为这还不是有耦合,前端现在在诸如像vue等等这些当下火热,这种组件化框架的帮助。
他确实可以独立的去驱动页面独立的开发,数据呢也可以从事先规划好的。叫mock就去拿了。这数据全是模拟出来的,完全不需要依赖于实时的后端接口。
,把后端呢也只需要把你的接口写好,按照之前约定好的这个接口约定来提供数据就可以了。不管后端用Spring boot还是Django都和前端没有关系,而且前后端分离之后呢,后端一套接口可以提供给很多类型的前端使用,比如web网页。
比如呢手机的app,再比如说微信小程序。

测试阶段

然后第三个阶段就测试阶段,基本上要保证的是前后端独立可测试。
那前端主要就是什么页面呢?跳转,展示,输入。还有一些传参响应数据的展示 ,那后端这个主要保证数据接口的提供。数据格式校验呢异常情况,数据的什么一致性问题,还有一些权限问题等等,这是测试。

部署阶段

最后一个阶段也特别的关键。
那就是所谓的叫部署上线阶段,前后端分离之后,前后端项目独立可部署。这个非常重要,这在以前那个jsp 模板时代。
html 页面css 样式,还有js 的效果,全是后台来驱动的,那个时候所谓的这个叫项目部署负责,就是发版本上线,其实指的也是后端项目的部署。
因为前端的东西是塞到后端项目里去,一起做,一起部署上线,前端要改一个东西发版本,那你也得去求着后端来做,但是前后端分离之后呢,事情就不一样了。
前端所有的事情呢都可以全部单独去做,前端项目呢也可以去单独独立的部署,而且呢前后端发布上线可以完全独立,双方可以按照各自的这个版本规划来发版本,前端发版本呢不受后端约束。后端发版本前端也可以完全不知道

后端项目可以通过类似JenKins系统去做这种持续发布一键部署。

总结

最后一个问题是,前后端说你确实是很适合复杂项目,看起来很好,那他真的就没有缺点了吗?
这个问题呢就要回到刚开始我们所讨论的问题了,就是为什么会有强的分解这件事情的出现,把很多公司为了强化端分离而去做前后端分离。
前后端分离需要成本的,尤其是你想做一个彻彻底底的前后端分离,不管你是人力成本,开发成本,工具成本,还是什么部署成本其实都是不小的,
有些小团队或者说小项目你如果不顾自己的实际需求来强行前后端分离开发只会给自己找麻烦。因为你只要前后端分离某一点,做的不彻底,他就会带来非常多的负担,而不是便利性的。所以说呢并不是所有项目都适合前后端分离一样。
一句话,前后端分离的问题本质是就两个字"解耦",这从来不是新概念,解决复杂系统最有效的办法就是分专业提炼知识建立理论,把各自的问题说清楚,然后各个专业协同起来才能解决整个系统性问题。