精选文章

​什么是前后端分离

2021-07-01 09:53:50 | 来源:中培企业IT培训网
在介绍前后端分离的模式时,我们先了解一下MVC模式。前后端分离需要满足什么条件?它的好处是什么?这些都需要我们思考。前后端分离对大家来说应该还是有点陌生的。它的内容更应该值得我们去了解和学习。这个世界的复杂性是大家都知道的,学习是无止境的。

1. 什么是MVC模式

MVC模式诞生于上世纪七八十年代,至今仍存在于很多应用之中,比如Java中的Struts、Spring MVC等架构。这是一种经典的设计模式,全名为Model-View-Controller,即模型-视图-控制器。

(1) Model(模型)表示应用程序核心,表示企业数据和业务规则。

(2) View(视图)显示数据(数据库记录),视图是用户看到并与之交互的界面。

(3) Controller(控制器)处理输入(写入数据库记录),控制器接受用户的输入并调用模型和视图去完成用户的需求,它只是接收请求并决定调用哪个模型构件去处理请求,然后再确定用哪个视图来显示返回的数据。

使用MVC应用程序被分为三个核心部件:模型、视图、控制器。它们各自处理自己的任务,最典型的MVC就是JSP+servlet+javabean的模式。

2. MVC模式的优点和缺点

MVC模式的诞生让开发更高效,让代码耦合度尽量减少,让应用更部分的职责更加清晰。

但是MVC框架也是有不足:

(1) 每次用户的操作请求必须流程为:控制器-模型-视图,用户才能看到最终的界面;

(2) 视图的呈现必须由模型来调研;

(3) 渲染视图的过程在服务端来完成,最终呈现出来的是带有模型的视图页面,性能无法得到很好的优化。

为了使数据展现过程更加直接,并且提供更好的用户体验,需要对MVC模式进行改进,首先从浏览器发送AJAX请求,然后服务端接受请求并返回JSON数据返回给浏览器,最后在浏览器端进行渲染,如图:

如果将浏览器一端视为前端,而服务器一端视为后端的话,如图所示:

则经过改进后的模型,我们可以使用REST实现,前端关注界面展现,后端关注业务逻辑,分工明确,职责清晰。

3. 什么是REST

REST:REpresentational State

Transfer = 直接翻译:表现层状态转移。这是一个”无状态”的架构模式,因为在任何时候都可以由客户端发出请求到服务端,最终返回自己想要的数据,当前请求不会受到上次请求的影响。所以,REST也被人们看做是一种“轻量级”的SOA实现技术,因此在企业级应用与互联网应用中都得到了广泛应用。

现在我们展示一个关于前后端分离的REST示例方便理解:

比如一个用户访问饿了么的外卖网站,该网站对其所销售的各个商家的店铺或者商品进行详细分类。当用户登陆该饿了么外卖平台后,他首先需要在饿了么外卖平台选择其所需要寻找的商家或者商品分类,进而列出属于该分类的各个物品。

从业务逻辑的角度来说这个流程很简单,但实际上浏览器向后台发了多个请求:页面逻辑加载时将首先得到所有的商品分类,并将这些分类显示在页面中。在用户选择了一个分类的时候,页面逻辑将发送一个请求得到该分类的详细信息,并发送一个请求来得到该分类的列表,而服务器将返回所有的类别。

二.前后端分离的好处是什么

如果没有前后端分离,则随着业务的拓展,前端代码越来越复杂,如:

(1) 无法统一协作模式,代码充满了约定;

(2) JS跟CSS,依赖于厚度按产出的HTML;

(3) 有的数据来自AJXA,有的数据印在DOM上;

(4) 有的业务逻辑在前端,有的在model层,更多的是在view层。

其次前后端依旧高度耦合:

(1) 前端依赖服务端开发环境;

(2) 在服务端View层高度耦合;

(3) 沟通成本很高;

(4) 职责不清晰。

还有无法良好的支持跨终端

(1) 业务逻辑散落在应用中;

(2) 渲染逻辑强依赖后端页面;

(3) 只能用responsive design硬来。

最终高度耦合的前后端分工:

(1) 沟通成本上升;

(2) 维护成本上升;

(3) 无法正确的快速响应变化;

(4) 代码的腐败只是迟早的问题。

而前后端分离之后:

(1) 后端只提供数据,处理业务逻辑,代码跑在服务器上;

(2) 前端接收数据,返回数据,处理渲染逻辑,代码跑在浏览器上。

这样分工明确。

三.什么情况下可以前后端分离

1. 页面交互比较复杂;

2. 前端的渲染比较频繁;

从以上的信息我们可以了解到:前后端的好处是可以提高办理业务的效率的。前后端分离之后是为了分工可以更明确。想要了解更多前后端的信息,请继续关注中培教育。


预约领优惠