浅谈MVC与前后端分离

矫情吗；* 2022-06-18 05:25 1106阅读 0赞

1、MVC

MVC是一种经典的设计模式，Model-View-Controller，即模型-视图-控制器。M主要负责数据与模型，V主要负责显示，C主要负责交互与业务。

1) 模型是用于封装数据的载体，其本质是一个普通的Java Bean，包含一系列的成员变量及其getter/setter方法；

2) 视图而言，更加偏重于展现，在Java中可通过JSP来充当视图，或通过纯HTML进行展现，目前的主流是纯HTML；

模型和视图需要通过控制器来进行粘合，如用户发送一个HTTP请求，此时该请求首先会进入控制器，然后控制器去获取数据并将其封装为模型，最后将模型传递到视图中进行展现。

![Center][]

2、MVC的缺点

1) 每次请求必须经过“控制器->模型->视图”流程，用户才能看到展现的界面；

2) 视图是依赖于模型的，如果没有模型，视图也无法呈现出最终的效果；

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

3、改进的MVC模式

为了使数据展现过程更加直接，提供更好的用户体验，对MVC做了改进：首先从浏览器发送Ajax请求，然后服务端接受该请求并返回JSON数据返回给浏览器，最后在浏览器中进行界面渲染。

![Center 1][]

4、REST

将浏览器视为前端，而服务器视为后端，可以将改进的MVC模式简化为前后端分离模式：

![Center 2][]

改进的MVC模式中，输入的是Ajax请求，输出的是JSON数据，REST就能实现此功能。

REST，即Representational State Transfer，表述性状态转移，轻量级的Web服务，习惯将其称为RESTful Web Services，简称REST服务。

REST本质上是使用URL来访问资源种方式。比较常见的URL请求方式是GET与POST，但在REST中又提出了几种其它类型的请求方式，总共有6种：POST、DELETE、PUT、GET、HEAD、OPTIONS。前四种正好与CRUD（Create-Retrieve-Update-Delete，增删改查）四种操作相对应。

REST是面向资源的，这里提到的资源，实际上就是我们常说的领域对象，在系统设计过程中，我们经常通过领域对象来进行数据建模。

REST是一个无状态的架构模式，因为在任何时候都可以由客户端发出请求到服务端，最终返回自己想要的数据，当前请求不会受到上次请求的影响。也就是说，服务端将内部资源发布REST服务，客户端通过URL来访问这些资源。

后端MVC：客户端发送请求 \-> 服务器触发controller -> 服务器进行model各种操作 \-> 服务器根据model数据渲染view -> 服务器回复请求，包含了整个view的HTML -> 客户端重新渲染整个页面，重新计算所有CSS，重新执行所有JS，重新请求所有的资源。

前端MVC：客户端根据用户的行为修改客户端model -> 客户端更新和该model相关的view -> 客户端model发送sync请求到服务器，只包含改变了哪些数据 \-> 服务器审核数据改动是否合法，只需回复是否修改成功 \-> 客户端收到成功，什么都不用做；不成功，则把刚才改的View改回来，然后通知用户。前端流行的MVVM就是对于前端MVC结构的一次重新定义。

<table> 
 <tbody> 
 <tr> 
 <td>&nbsp;</td> 
 <td>前端</td> 
 <td>后端</td> 
 </tr> 
 <tr> 
 <td>model</td> 
 <td>JSON、XML、HTML数据等</td> 
 <td>数据库、文件等</td> 
 </tr> 
 <tr> 
 <td>view</td> 
 <td>模板引擎、模板片段等</td> 
 <td>HTML模板</td> 
 </tr> 
 <tr> 
 <td>controller</td> 
 <td>JS业务逻辑、HTTP请求交互（Ajax, JSONP, Websocket)&nbsp;</td> 
 <td>HTTP请求路由、搜索引擎、数据分析、文件服务</td> 
 </tr> 
 </tbody> 
</table>

前后端MVC的对比：前端MVC需要向服务器端传递和接收的数据量都少很多，前端要做的等待和渲染工作也少很多，这意味着更好、更快的用户体验和更低的服务器端负载，因为基本上只需要在数据库上提供一个RESTful API即可。

[Center]: /images/20220618/670ddb876daa4266bf414852a3af5b78.png
[Center 1]: /images/20220618/c489a462002149b8aa9b77c356778640.png
[Center 2]: /images/20220618/72b53946c1f54cd0ac7547ad786fd890.png