浅谈MVC与前后端分离

时间:2022-12-11 07:47:52

1MVC

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

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

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

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

浅谈MVC与前后端分离

 

2、MVC的缺点

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

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

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

 

3、改进的MVC模式

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

浅谈MVC与前后端分离

 

4、REST

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

浅谈MVC与前后端分离

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

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

REST本质上是使用URL来访问资源种方式。比较常见的URL请求方式是GETPOST,但在REST中又提出了几种其它类型的请求方式,总共有6POST、DELETEPUT、GETHEADOPTIONS。前四种正好与CRUDCreate-Retrieve-Update-Delete,增删改查)四种操作相对应

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

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

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

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

  前端 后端
model JSON、XML、HTML数据等 数据库、文件等
view 模板引擎模板片段等 HTML模板
controller JS业务逻辑、HTTP请求交互(Ajax, JSONP, Websocket)  HTTP请求路由、搜索引擎、数据分析、文件服务

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

后端