Spring Boot实战系列《二》：白话理解前后端分离

在学习之前，我对 “前后端分离” 产生一些误解，误以为前后端分离只是一种web应用开发模式，只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离？

而实际上其实 前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。

说通俗点就是以后你在后端项目里面看不到页面代码（JSP|HTML），后端给前端提供接口，前端调用后端提供的REST风格接口就行，前端专注写页面（html|jsp）和渲染（JS|CSS|各种前端框架）；后端专注写代码就行。

前后端分离的核心：后台提供数据，前端负责显示。

从以下四个方面来看前后端分离。

如图：

在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。

如图：

前后端未分离模式：

前后端代码存放于同一个代码库中，甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时，都必须把整个项目导入到开发工具中。

而前后端分离模式有以下两种:

半分离状态：

前后端共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端
交互的测试用例。

全分离状态：

前后端代码库分离，前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端，能支持前端的独立开发和测试。而后端
代码中除了功能实现外，还有着详细的测试用例，以保证API的可用性，降低 集成风险。

在实现前后端分离架构之后，前端工程师只需要编写HTML、js、CSS等前端资源，然后通 过HTTP请求调用后端提供的服务即可。除了开发期的分离，在运行期前后端资源也 会进行分离部署。

如图：

在开发模式上，前后段分离不仅仅只是工程师的分工开发，更重要的意义在于实现了前后端的并行开发，简化了开发流程。

在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发，其中前端工程师再开发完成之后可以独自进行测试，而后端也可以使用接口测试平台进行接口自测，然后前后端一起进行功能联调并校验格式，最终进行自动化测试。

如图：

以上四个模块分析了前后端分离的大致情况，从目前应用软件开发的发展趋势来看：

越来越注重用户体验，随着互联网的发展，开始多终端化。

大型应用架构模式正在向云化、微服务化发展。

主要通过前后端分离架构来提升这些需求，同时也对开发人员来说应用代码将会变得整洁清晰，不论是代码阅读还是代码维护都会比以前轻松。

分析完前后端分离的好处和传统模式的不同以后，那么怎么实现前后端分离呢？

前后端的工作：

前端的工作：实现整一个前端页面以及交互逻辑，以及利用ajax与nodejs服务器（中间层)交互。

后端的工作：提供API接口，利用redis来管理session,与数据库交互。

前后端分离项目架构如下:

举个栗子，要实现前后端分离：

照样直接看官网吧。我是个实在人，哈哈…
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

• 引入nodejs主要是为了分层开发，职责划分，nodejs作为前端服务器，由前端开发人员负责，前端开发人员不需要知道java后台是如何实现的，也不需要知道API接口是如何实现的，我们只需要关心我们前端的开发工作，并且管理好nodejs前端服务器，而后台开发人员也不需要考虑如何前端是如何部署的，他只需要做好自己擅长的部分，提供好API接口就可以；
• nodejs本身有着独特的异步、非阻塞I/O的特点，这也就意味着他特别适合I/O密集型操作，在处理并发量比较大的请求上能力比较强，因此，利用它来充当前端服务器，向客户端提供静态文件以及响应客户端的请求，我觉得这是一个很不错的选择。

1. 作为静态文件服务器，当用户访问网站的时候，将index.html以及其引入的js、css、fonts以及图片返回给用户。

2. 负责将客户端发来的ajax请求转发给后台服务器。