先后端分离与不分离的区别，二者的优点

先后端不分离：

      在先后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端须要控制前端的展现，前端与后端的耦合度很高。

       这种应用模式比较适合纯网页应用，可是当后端对接App时，App可能并不须要后端返回一个HTML网页，二仅仅时数据自己，因此后端本来返回网页的接口再也不适用于前端App应用，为了对接App，后端还须要再开发一套接口。

 

请求的数据交互以下图：

 

 

 

先后端分离

      在先后端分离的应用模式中，后端仅返回前端所需的数据，再也不渲染HTML页面，再也不控制前端的效果，至于前端用户看到的什么效果，从后端请求的数据如何加载到前端中，都由前端本身决定，网页有网页的处理方式，App由App的处理方式，但如论那种前端，所须要的数据基本相同，后端仅需开发一套逻辑对外提供数据便可。

 

       在先后端分开的应用模式中，前端与后端的耦合度相对较低。

 

       在先后端分离的应用模式中，咱们一般将后端开发的每个视图都称为一个接口，或者API，前端经过访问接口来对数据进行增删改查。

 

对应的数据交互以下：

 

 

一、开发人员分离

 

  之前的JavaWeb项目大多时后端作，既搞前端，又搞后端。后来愈来愈多的公司开始吧先后端的界限分的愈来愈明确，前端工程师只搞前端的事，后端工程师只搞后端的事。

1）后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等。

 

2）对于前端工程师：

 

  把精力放在html5，css3，jquery，angliarjs，bootstrap、reactjs，vuejs，微博pack，less/sass，gulp，nodejs，Google V8引擎，javascripts多线程，模块化，面向对象编程，设计模式，浏览器兼容性，性能优化等。

 

前端追求的是：页面表现，速度流畅，兼容性，用户体验

 

二、开发模式（后端以JAVA为例）

 

之前的方式：

 

1）产品经理/领导/客户提出需求

2）UI作出设计图

3）前端工程师作HTML页面

4）后端工程师将HTML页面套成jsp页面（先后端强依赖，后端必需要等前端的HTML作好才能套jsp。若是html发生变动，就更痛了，开发效率低）

5）集成出现问题

6）前端返工

7）后端返工

8）二次集成

9）集成成功

10）交付

 

新的方式是：

 

1）产品经理/领导/客户提出需求

2）UI作出设计图

3）先后端约定接口&数据&参数

4）先后端并行开发（无强依赖，可先后端并行开发，若是需求变动，只要接口&参数不变，就不用两边都改代码，开发效率高）

5）先后端集成

6）前端页面调整

7）集成成功

8）交付

 

三、请求方式

以前老的方式：

1）客户端请求

2）服务端的servlet或controller接收请求（后端控制路由与渲染页面，整个项目开发的权重大部分在后端）

3）调整service，dao代码完成业务逻辑

4）返回jsp

5）jsp展示一些动态的代码

 

新的老的方式：

1）浏览器发送请求

2）直接到达html页面（前端控制路由与渲染页面，整个项目开发的权重前移）

3）html页面负责调用服务端接口产生数据（经过ajax等等，后台返回json格式数据，json数据格式由于简洁高效而取代xml）

4）填充html，展示动态效果，在页面上进行解析并操做DOM。

 

 

四、先后端分离的优点

 

1)能够实现真正的先后端解耦，前端服务器使用nginx，前端/web服务器放的是css，js，图片等一系列静态资源（甚至你能够将css，教js，图片等资源放在特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器腹足鳄控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用toomcat（把tomcat想象成一个数据提供者），加快总体响应速度。（这里须要使用一些前端工程化的框架，好比nodejs，react，router，redux，webpack）

2）发生bug，能够快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本问题，页面样式问题，所有由前端工程师负责。接口数据出错，数据没有提交成功，应答超时等问题，所有由后端工程师来解决。双方互不干扰。

3）在大并发状况下，能够同时水平扩展先后端服务器

4）减小后端服务器的兵法/负载压力。处理接口之外的其余全部http轻轻所有转移到前端nginx上，接口的请求调用tomcat，参考nginx反响带来tomcat。且除了第一次页面请求外，浏览器会大量调用本地缓存

5）即便后端服务暂时超时，前端页面也会正常访问，只是数据刷不出来。

6）页面显示的东西再多也不怕，由于是异步加载

7）nginx支持页面热部署，不用重启服务器，前端升级更无缝。

8）增长代码的维护性&易读性（先后端耦合在一块儿的代码读起来至关费劲）

9）提高开发效率，由于能够先后端并行开发，而不是像之前的强依赖。

10)在nginx中部署证书，外网使用https访问，而且只开放443和80端口，其余端口一概关闭（防止黑客口扫描），内网使用http，性能和安全都有保障。

11）前端使用大量的组件代码得以复用，组件化，提高开发效率。

 

 

 

 

文章来源：

          http://www.javashuo.com/article/p-vzydswwi-dk.html

          http://www.javashuo.com/article/p-qfrpforv-mr.html