在做任何项目或者架构之前,我们都需要去先确定几件事情,比如技术选型、开发模式等,都是需要去做斟酌和确定的。本期我们来探讨一下前后端分离的这种开发模式。
早期传统 Java Web 开发
在探讨前后端分离开发模式之前,我们先来看一看早期传统 Java Web 的一种开发模式。
首先我们有用户,用户会访问浏览器,随后请求才会到达我们的后端。在我们的后端里面,那么这是一个单体项目,并且它是一个 war 包。在这个包里面它包含了一些相应的内容,比如 Servlet,也就是 MVC 的这一层架构的后端代码。当然也包含一部分前端代码,比如 JS、CSS 以及 HTML,但是 HTML 其实是 JSP。它是由 JSP 渲染而来的,它会渲染成 HTML,它的这个渲染的过程是在我们的后端去做的,也就是说只要有用户来访问我们的这个服务器,所有用户请求后所得到的页面,它全部都是在服务器去进行一个渲染的,对于我们的服务器是有一定的压力的。
如果在前期一开始用户量比较少的情况下,基本上是没有什么问题,一旦我们的用户越来越多,比如上万、百万的时候,我们所有页面都在服务器去渲染的话,这对于我们的服务器会造成非常大的性的影响。要去注意在我们做传统 Java Web 开发的时候,我们浏览器里面请求到所有的页面都是通过 URL 去进行跳转的。
前后端单页面交互,MVVM 开发模式
前后单页面的一种交互,也就是 MVVM 开发模式,是在前端的。
首先用户会访问浏览器,当然浏览器会请求到我们的后端。在这里面我们后端所有的一些内容其实都是以一个接口形式所存在的,但是浏览器所访问到的内容都是一些静态页面。这些静态页面都是一些 H5 的页面。这些静态资源全部都在我们的一个静态资源服务器,也就是 Nginx。在早期可能会用到 Apache 服务器,现如今我们都会使用非常主流的反向代理服务器,也就是 Nginx。
我们的用户访问到我们的页面以后,这些页面会发起一些请求,这些请求就是用户请求,它是会请求我们的后端,我们的 Servlet 的这一端,也就是 MVC 模式。后端代码全部都是在另外一台服务器,这台服务器的就是一个 Tomcat,静态资源和我们的后台的一些动态代码就做了一层分割,就是分开来,这个就是一个前后端分离的一种开发模式。
在我们的前端和后端进行交互的时候,他们之间其实是通过 Restful 这样的一种请求,就是 Restful Web Service,通过这种方式去请求到之后,会获得一些相应的数据,它们之间的一个数据交互形式全部都是以 JSON 的形式去进行交互的。
这个是用户通过浏览器去进行访问,现如今我们很多用户在使用手机的时候,手机端也是非常主流的一个客户端,我们会有一些页面,如果我们的页面兼容 H5,也能够在手机浏览器上去进行打开的,所以我们手机也是可以通过 H5 的形式去访问到 Nginx 里面所有的一些静态页面的。
还有一种方式是手机 APP,不管你是小程序、IOS 还是 Android,只要在我们手机端上有相应的客户端软件,我们也可以发起请求来访问到我们的服务器的。手机端和我们服务器之间的通讯,它也是通过 Restful 去进行通信,然后交互也是通过 JSON。不管我们的客户端的样式有多种对于我们后端来讲的话,后端只需要一套代码去维护就可以了,不需要复制多份去进行开发,我们只需要去针对不同的客户端去做一些接口上的微调就可以了。
使用前后端分离有很多的好处的,这样子做可以使得分工明确,前端和后端开发人员他们的效率可以提升一个档次,使得各自领域的开发人员术业有专攻。并且我们的团队也是只有了前端归前端,后端归后端,不同团队所关注的内容都是不一样的,后端代码只需要一套就可以了,团队是可以进行并行开发的。换成之前的传统开发模式,所有人都是偶合在一起,并且我们是相互阻塞的,我们必须完成上一个接口才能够对接下一个页面。在前后端分离的这种开发模式里面,其实也有一些小问题,比如沟通,因为团队多了,人也多了,我们一定会少不了沟通。另外,我们在发布的时候,一般是各自发布的,稍微会有一些复杂,需要做到版本的一些统一。
前后端也分离了,如果会产出一些 bug,我们也可以精准定位,理清我们的边界。有些 bug 是前端的就是前端,也不会踢给后端啊,就不会造成这种踢皮球的现象。另外,需要注意,我们所有的一些静态资源文件全部都是部署在 Nginx 里面的,这种方式就是一个前后端分离模式。
再强调一下,前后端分离不仅它是一种开发模式,也是一种架构模式,可以称之为是前后端分离架构。
使用前后端分离的时候,我们是需要去注意我们的前端和后端项目是要区分开来的,前端和后端的项目是两个不同的项目,放在两个不同的服务器,并且各自也需要去独立地去部署,都有两套不同的不一样的代码库,而且会有两个不同的开发团队共同的去进行开发和维护。这个就是我们所需要去理解的前后端分离开发模式。