一、传统开发模式（前后台不分离）

　　概念：传统项目都是单节点项目，即所有的模块都是在一个项目中，然后把前后台代码都编译打包部署到一个web容器中，静态资源和数据库访问都是在一个项目中。

　　开发方式：前台人员开发模板页面，然后将开发好的页面交给后台，后台去套模板，然后进行后台开发，前后台高度耦合，出现一些问题就需要从新将也模板页面打回或者后台人员进行修改。

　　软件运行流程：用户通过url发出请求到服务器，服务器查找数据并且以流的形式生成页面返回到用户。如果页面中有ajax请求，当页面在浏览器总渲染的时候，再次发送ajax请求到服务器请求，当数据完全到页面则当前请求渲染成功。

　　优点：对于小型项目开发比较快，对于浏览器的渲染压力比较小，服务器将页面大部分数据加载好然后返回给浏览器，对于seo也有较好的支持，对于权限管理比较好。

　　缺点：不适合大型项目的分工，一旦有需求的改变，需要前后台同时做出改变，很有可能将所有的代码作废，不支持集群开发，不支持负载均衡。

二、前后台分离开发

　　概念：前台和后台部署在不同的服务器上，开发的时候约定一个接口，然后各自去开发，并且可以单独进行测试用例。在开发的途中前后台可以不相互依赖，并且上线后前后台的耦合度也比较低。

　　类别：目前主流的有三种形式，nginx+server、node.js+server和nginx+node.js+server。

　　1、nginx+server

　　　　工作流程：这是我们目前使用的方式，nginx最为一个转发的服务器，具有动静分离、负载均衡的作用。浏览器发送url请求，所有的请求都经过nginx，如果是静态的资源（html、css等），直接将页面发送给浏览器，浏览器接收页面后进行渲染，页面中的ajax请求再次发送请求，Nginx判断是动态请求，将请求进行转发到web服务器，web服务器访问数据库将数据进行序列化（目前主流是json格式）返回给浏览器，浏览器完成页面渲染。

　　　　优点：开发的时候前端人员部署一个Nginx服务器，开发过程可以不用完全依赖后台，可以做到前台后台同时开发。上线后后台服务也是可以部署多个，能够进行横向的扩展，并且可以配置Nginx进行负载均衡或者使用一致性hash算法增强高可用。

　　　　缺点：对于浏览器的渲染负担加重，并且对于seo支持不好。局部响应时间快。

　　　　配置：Nginx配置 略，后台放开跨域权限

　　　　　　springboot配置（使用java配置方案，也可以用xml形式）：其中allowedOrigins表示哪些域名能够来跨域访问（*表示所有）。

@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter  {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
                .allowCredentials(false).maxAge(3600);
    }
}

　2、node.js+server

　　　　工作流程：目前node.js非常的火，所以使用的也不少，这种架构和第一种Nginx+server非常相似，node.js充当前台和后台的中间层。运行的过程略有不同，首先用户通过url进行请求，node.js将静态页面以及静态页面需要的数据加载好，然后返回给浏览器，这个和传统有点相同，但是可以通过rpc调用web服务，减少浏览器渲染。相当于多加了一个中间层。

　　　　优点：和第一个大致相同。

　　3、node.js+nginx+server　　　

　　　　　　前后端分离之后，我们在原先的架构只上再单独增加了一个Node Server作为中间层，将前端资源部署到Node Server中。Node Server还实现了一层数据代理服务，负责与提供数据的后端服务进行通信。

　　　　并且还在这个基础上增加并使用了前端机（前端机是对所有的请求进行预处理和负载均衡，然后再转发给后端机。）的Nginx服务，浏览器发起的请求经过前端机的Nginx进行分发，URL请求统一分发到Node Server，在Node Server中根据请求类型从后端

　　　　服务器上通过RPC服务请求页面的模板数据，然后进行页面的组装和渲染；API请求则直接转发到后端服务器，完成响应。

结语

前后端分离并非仅仅只是前后端开发的分工，而是在开发期进行代码存放分离、前后 端开发职责分离，前后端能够独立进行开发测试;在运行期进行应用部署分离，前后 端之间通过HTTP请求进行通讯。前后端分离的开发模式与传统模式相比，能为我们 提升开发效率、增强代码可维护性，让我们有规划地打造一个前后端并重的精益开发 团队，更好地应对越来越复杂多变的Web应用开发需求。