前后端分离

作者: Ferrari1001 | 来源:发表于2018-03-20 20:27 被阅读30次

背景知识

一、三层架构之MVC模型

  MVC是一种经典的设计模式。
[1]M代表的是model,即模型层,表示企业数据和业务规则,拥有最多的处理任务,一般用于封装数据,如,java中的pojo对象,亦或是java Bean,其包含成员属性以及getter/setter方法;
[2]V代表的事View,即视图层,Java中一般通过JSP页面或者HTML的方式进行展示;
[3]C代表的是Controller,即控制层,是模型层和视图层的粘合剂,起到核心控制的作用。例如:用户发送一个HTTP请求,此时该请求首先会被控制层捕获,进而控制层去调用Service服务获取数据并将其封装在模型层,最后将模型返回给视图层并进行展示。大致流程图如图所示:


image.png
image.png

二、MVC模型存在的弊端

[1] 每次请求必须经过“控制器->模型->视图”这个流程,用户才能看到最终的展现的界面,这个过程似乎有些复杂;
[2]实际上视图是依赖于模型的,换句话说,如果没有模型,视图也无法呈现出最终的效果;
[3]渲染视图的过程是在服务端来完成的,最终呈现给浏览器的是带有模型的视图页面,性能无法得到很好的优化。

三、MVC模型简化,实现前后端分离

  为了使数据展现过程更加直接,并且提供更好的用户体验,Roy Fielding博士在2000年写的一篇关于软件架构风格的论文,提出Representational State Transfer的思想,即现在所说的REST风格。核心思想就是首先从浏览器发送AJAX请求,然后服务端接受该请求并返回JSON数据返回给浏览器,最后在浏览器中进行界面渲染。其结构图如图所示: image.png

  我们将浏览器看做前端,服务器看做是后端的话,那传统的MVC模型就得到简化,实现了前后端的分离, 其结构图如图所示:


image.png
这样的好处是:
[1]复杂的业务逻辑与数据生成,只有在站点数据层处写了一次,没有代码拷贝;

[2]底层service接口发生变化,只有站点数据层一处需要升级修改;
[3]底层service如果有bug,只有站点数据层一处需要升级修改;
[4]站点展现层可以根据产品的不同形态,传入不同的参数,调用不同的站点数据层接口。
除此之外,产品追求绚丽的效果,并对设备兼容性要求高,不再困扰Java工程师,由更专业的FE对接;一点点展现的改动,不再需要Java工程师们重新编译,打包,上线,重启tomcat;约定好json接口后,Java和FE分开开发,FE可以用mock的接口自测,不再等待一起联调。

总之,采用REST分格的架构可以使得前端关注界面展现,后端关注业务逻辑,分工明确,职责清晰。

相关文章

  • 2019-01-11前后端分离

    什么是前后端分离? 为什么前后端分离? 前后端分离的优势? 未分离时期 MVC: 早期JSP+SERVLET中的结...

  • 前后端分离

    什么是前后端分离 前后端分离中前端负责页面路由控制,页面展示,后端处理数据,通过json进行传输。前后端分离并非仅...

  • vivo 商城前端架构升级—前后端分离篇

    本文主要以 vivo 商城项目的前后端分离经验,总结前后端分离思路,整理前后端分离方案,以及分离过程中遇到的问题及...

  • Spring Boot+Vue概述(一)

    前后端分离 前后端分离就是将⼀个应⽤的前端代码和后端代码分开写,为什么要这样做?如果不使⽤前后端分离的⽅式,会有哪...

  • 前后端分离

    方案一 简易前后端分离 前后端分离原则,简单来讲就是前端和后端的代码分离,也就是技术上做分离,我们推荐的模式是最好...

  • 六大接口管理平台,总有一款适合你的!

    前后端分离绕不开的接口测试 先聊一聊前端和后端分离的优点。前后端分离优点如下: 真正的实现前后端解耦,前端服务器使...

  • 使用nginx解决跨域问题

    1.跨域解释 1.1 怎么知道我遇到了跨域问题 如果项目没做前后端分离,是不会有跨域问题的。前后端分离的项目中,前...

  • 前后端分离架构与小程序的环境切换

    前后端分离架构 随着前端应用的越来越复杂,前后端分离架构成为了主流。前后端分离之后,前端并不依赖后端的模板和路由,...

  • 基于Flask开发的前后端分离租房项目(一)

    一、明确前后端分离和前后端不分离的概念: 我的理解:前后端不分离的概念是后端要控制前端的数据显示和模板渲染(dja...

  • 前后端分离开发模式下的接口规范

    1 背景 此处我不解释为什么要前后端分离、前后端分离的优缺点等问题,采用前后端分离开发模式就变成了这样, 前后端分...

网友评论

    本文标题:前后端分离

    本文链接:https://www.haomeiwen.com/subject/fmebqftx.html