区别:前后端不分离中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,即后端需要控制前端的展示,前端与后端的耦合度很高。前后端分离中,后端仅返回前端所需的数据,不再渲染 HTML 页面,不再控制前端的效果,前端与后端的耦合度相对较低。

image.png

一、前后端分离的概念

1、前后端分离

  • 前后端分离是一种架构模式,说通俗点就是后端项目里面看不到页面(JSP | HTML),后端给前端提供接口,前端调用后端提供的 REST 风格接口就行,前端专注写页面(html|jsp)和渲染(JS|CSS|各种前端框架);后端专注写代码就行。
  • 前后端分离的核心:后台提供数据,前端负责显示

1、软件架构模式

最熟悉 MVC 设计模式,Model—View-Controller 模型-视图-控制器

  • 它是怎么工作的?通俗来说:你在页面输入一个网址(请求-Request),这个网址跑到哪里去了呢?就去调用接口
    (REST 风格),这个接口其实就是访问后端的一段代码(方法),后端有很多方法。
  • 如何确定访问的是哪个方法?就是接口定义好的,比如:177.25.26.7/idp/user/login,这里面的 idp 就表示一
    个服务(一个工程),user 表示一个类,login 表示具体要调用的那个方法,你一旦回车,就直接调用了后端这个方法,后端这个方法就去数据库(MySQL|Oracle|其他)取数据,数据库表中每一行数据就表示一个对象,也就是一个 JavaBean,最终用 pojo 方式存到集合框架 (List|Map|Set|等)中,方法把这个集合返回,那么调用这个接口的结果就是会响(Response)给你一个结果集,前端就拿到了这个数据,然后通过页面(html|Jsp)展现出来,这个用户看到的就是 View 层做的事情。

2、前后端分离的原因

在以前,听说 TDD (Test-driven development,测试驱动开发) 可以改善代码的质量,我们便实施了 TDD;接着,听说 BDD (Behavior-driven development,行为驱动开发) 可以交付符合业务需求的软件,我们便实施了 BDD;后来,听说 DDD (Domain-driven design,领域驱动设计) 可以分离业务代码与基础代码,我们便实施了 DDD。今天,听说了前后端分离很流行,于是我们就实施了前后端分离——这就是传说中的 HDD(Hype-driven Development,热闹驱动开发)。
过程: TDD -》 BDD -》 DDD =》 HDD

3、前后端分离的优点

前后端分离则可以很好的解决前后端分工不均的问题,将更多的交互逻辑分配给前端来处理,而后端则可以专注于其本职工作,比如提供 API 接口,进行权限控制以及进行运算工作。而前端开发人员则可以利用 nodejs 来搭建自己的本地服务器,直接在本地开发,然后通过一些插件来将 api 请求转发到后台,这样就可以完全模拟线上的场景,并且与后台解耦。前端可以独立完成与用户交互的整一个过程,两者都可以同时开工,不互相依赖,开发效率更快,而且分工比较均衡。
总结优点如下:

  • 提升开发效率
  • 完美应对复杂多变的前端需求
  • 增强代码可维护性

二、前后端分离和前后端不分离的区别

1、前后端不分离

  • 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。
  • 这种应用模式比较适合纯网页应用,但是当后端对接 App 时,App 可能并不需要后端返回一个 HTML 网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端 App 应用,为了对接 App 后端还需再开发一套接口。

2、前后端分离

  • 在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染 HTML 页面,不再控制前端的效果。至于前端用户看到什么效果,从后端请求的数据如何加载到前端中,都由前端自己决定,网页有网页的处理方式,App 有 App 的处理方式,但无论哪种前端,所需的数据基本相同,后端仅需开发一套逻辑对外提供数据即可。
  • 在前后端分离的应用模式中 ,前端与后端的耦合度相对较低。
  • 在前后端分离的应用模式中,我们通常将后端开发的每个视图都称为一个接口,或者 API,前端通过访问接口来对数据进行增删改查。