9.1 历史的回顾与技术演化

9.1.1 前后端不分的岁月

前后端未分离时代，页面逻辑处理以及页面渲染全部由后端完成，最具代表性的就是我们使用了很长时间的 JSP 技术。它简化了 Servlet 的编写难度，将 HTML 和 Java 代码结合在一起，刚开始的时候，确实提高了生产力，但是时间久了，JSP 的问题越来越明显，他的开发和维护效率都极为低下。
image.png
JSP Servlet的结构图

它的工作过程大致就是所有的请求都被发送给作为控制器的Servlet，它接受请求，并根据请求信息将它们分发给适当的JSP来响应。同时，Servlet还根据JSP的需求生成 JavaBeans 的实例并输出给JSP环境。JSP可以通过直接调用方法或使用 UseBean 的自定义标签得到 JavaBeans 中的数据。

MVC 三层框架在前后端不分的年代也得到了广泛的应用。用户发起请求至服务端控制层（Controller），控制层通过调用模型处理器（Model）以及渲染视图（View）并最终将页面返回给客户端。
image.png

MVC 架构（前后端未分离模式）

如图所示，视图与模型均放在后端处理，致使前端代码无法独立上线运行。前端工程师完成 HTML 等静态代码开发之后，将页面代码传递给后端工程师。后端工程师来完成上线发布操作。整个开发流程如下图所示，前后端工程师开发流程相互牵制，整体开发效率较低。

image.png
前后端未分离模式下系统开发流程

此种架构，要求后端研发关注前端 HTML、CSS 代码等。前端无法单独调试（基本上前端就是负责制作静态页面），前后端无法并行开发，后期维护成本极高。

9.1.2 前后端分离的兴起

在移动互联网兴起后，很多软件系统都要在多个平台上线，Android、iOS、小程序、公众号、PC 等各个平台都要展示。不可能针对不同的设备开发一套后端，应该是多个前端共用同一个后端，这时就不能采用传统的前后端不分的方式来开发后端程序了。正是这样的业务需求，促进了前后端分离的发展。

前后端分离以后，后端不再写页面，只提供 JSON 数据接口（XML数据格式现在用的比较少），前端可以是移动端App、各种平台的小程序，也可以是 PC 端的应用，前端负责解析 JSON 之后的展示，功能跳转等都是通过前端来实现。

9.2 前后端分离的技术支撑

目前主流的客户端（前端）主要包含 PC 浏览器以及移动应用 APP。这些客户端不但可以展示数据，并且还可以存储数据。通过客户端的数据存储可以实现某些场景的离线访问，尤其是对于用户的重要数据且更新频次较低的数据，离线存储的意义非常明显。

服务器端（后端）技术体系包括 JAVA、C#等程序开发语言，MySQL、MongoDB 等数据库技术，Tomcat、IIS 等 Web 服务器技术,JSF、JMQ 等处理分布式应用的中间件技术。

9.3 后端开发的技术特点

在前后端分离以后，软件工程师之间的分工协作方式有所变化，开发方式当然也会随着一起变化。但是这种变化其实是非常细微的，很容易上手的。

9.3.1 后端工程师面临的变化

1. 工作内容的变化

前后端分离后对 Java 程序员的要求变低了，如果是前后端不分，后端工程师必须掌握 Web 前端开发的技能。因为在前后端不分的开发方式中，后端工程师一定是要前端代码的，不可能只写 Java 代码。

前后端分离之后，Java 程序员只需要专注于后台业务逻辑，对外接收前台传来的参数，根据参数给出不同的响应即可，基本上不需要写前端代码。

2. 接口设计的变化

前后端不分的时候，很少会涉及到接口设计，以 Spring MVC 为例，你可能返回的始终是 ModelAndView 一类的东西，前后端分离之后不再需要返回页面，后端主要是返回 JSON 数据，所以关键是设计好各种接口。

一个比较好的实践方案是设计满足 RESTful 规范的接口，语义明确，简洁明了，看到 URL 就知道接口的作用。

3. 开发流程的变化

前后端分离之后，前端不可能等后端开发好接口之后再去开发。一般在开发之前，整个项目组需要先设计好一个接口文档，一般可以采用 Swagger 来做接口文档（SpringBoot整合Swagger2，甚至于可以不用维护接口文档）。文档中约定了接口的详细信息，前后端分别按照既定的接口规范去开发，在尚未开发完成时，可以借助 Mock 来进行测试。

前端则使用模拟数据进行测试，开发完成之后，前后端接口联调，完成测试。

9.3.2 后端工程师不变的工作特点

除了前后端交互方式发生变化之外，后端工程师其他方面的工作都是不变的。

前后端分离一般并不会影响后端技术架构，SSM、Spring Boot、Dubbo、微服务，这些技术架构既可以支撑前后端不分的项目，也可以支撑前后端分离的项目。

最关键的，技术的根本不变。对于 Java 开发来说Spring Boot、Spring Security、Redis、Nginx、MySQL （Mariadb）、各种加密技术等等，都还是必须掌握的内容。

9.4 对前后端分离项目的提示

9.4.1 准备足够有前端开发能力的工程师

在采用传统开发风格的团队中，前端开发工作往往提供静态 HTML 页面，通常美工设计即可完成，其余工作都属于后端开发人员的范围。前后端分离以后，后端开发工程师的负担减轻了、研发效率得到大幅度的提高，但此时需要有足够数量工程师有前端开发能力。

9.4.2 前后端职责分配要完整而明确

有些人认为采用前后端分离之后，前后端只需要通过指定 API 进行交互即可，前端负责页面渲染和路由分配，后端提供 API 。这其实是忽视了大量关键工作，职责分配和细节处理需要相应文档规定，缓存机制、图片上传下载、数据校验、语言国际化等要有有明确的选择和设计。

9.4.3 后端 API 应符合 RESTFul 风格

很多项目采用了前后端分离模式后，后端 API 仍然采用以往的传统风格，这是不合理的。RESTFul 风格的 API 应该是前后端分离的最佳实践。RESTFul 推荐每个 URL 能操作具体的资源，而且能准确描述服务器对资源的处理动作，通常服务器对资源支持 get/post/put/delete/ 等，用来实现资源的增删改查。前后端分离的话，这些 API-URL 是对接的桥梁，采用 RESTFul 接口地址含义才更清晰、见名知意。

9.4.4 前后端既独立又协作的工作模式

前后端分离后，无论是 API 接口的对接还是测试工作，都涉及到前后端人员的沟通，有的项目采用前后端分离后，前后端协作模式配合力度低，互相等待，开发效率低下，反而不如传统的开发模式。例如：当后端 API 没有编写完成时，前端无法进行调试，这就导致了前端会被后端阻塞的情况。其实像这种互相等待的模式需要改进， Mock Server 可能可以解决一些问题。

9.5 如何实施前后端分离项目

实施前后端分离项目，大方向就是后端专注于控制层（ RESTFul API） 、服务层和数据访问层的设计开发，而前端则专注于控制层和视图层的内如。

前后端分离模式应该是这样：

  • 项目设计阶段，前后端架构负责人将项目整体进行分析，讨论并确定 API 风格、职责分配、开发协助模式，确定人员配备；设计确定后，前后端人员共同制定开发接口。
  • 项目开发阶段，前后端分离是各自分工，协同敏捷开发，后端提供 RESTFul API，并给出详细文档说明，前端人员进行页面渲染。前端的任务是发送API请(GET,PUT,POST,DELETE 等)获取数据（json，xml）后渲染页面。
  • 项目测试阶段， API 完成之前，前端人员会使用 Mock Server 进行模拟测试，后端人员采用 JUNIT 进行 API 单元测试，不用互相等待；API 完成之后，前后端再对接测试。当然并不是所有的接口都可以提前定义，有一些是在开发过程中进行调整的。
  • 项目部署阶段，利用 nginx 做反向代理，即 Java + nodejs + nginx 方式进行。

    9.6 对前后端分离的评价

创新之路不会止步，无论是前后端分离模式还是其他模式，都是为了更方便的解决需求，前后端分离不是终点，只是软件开发方式演变大潮下的一站，未来的路还很长，还有很多东西需要去学习。持续的学习、跟随变化，这是每个从事软件行业的人都应该去做的。

版权说明：本文由北京朗思云网科技股份有限公司原创，向互联网开放全部内容但保留所有权力。