【前端经典面试题】前后端分离（说一说你理解的前后端分离？）

前言：昨晚面试遇到了这个问题，既然遇到了，找些资料来一起做个总结吧。

1.对前后端分离的误解
  在回答这个问题的时候不要钻到某个具体的技术 ，或者某个具体的框架上面→比如ajax异步请求、vue或react等组件化的开发框架、再或者rest接口规范、API接口数据约定等。从某个具体的技术切入来回答对前后端分离的理解本身就是一种局限的看法，所以在回答这个问题的时候应该从以下几个方面展开。

2.为什么要分离？
  在以往的很长一段时间里，后端开发才是开发团队里的核心，前端开发往往仅由一小撮人甚至交给后端人员兼任。比如JSP开发，大部分是前后端高耦合的，前后端代码放在一起写，各种繁琐的套模板。这种开发方式在以前互联网服务不那么繁荣，web化趋势还不那么明显的年代发挥着巨大作用。随着各种社会服务的信息化程度加深，前端需要展示的内容越来越复杂（比如淘宝页面），JSP这种套模板的技术（仅仅依靠html、css、js、jq等技术的堆积来完成一个复杂的页面展示也变得非常繁杂）再也无法高效的开发。究其本质原因：前端开发没有像后端开发那样实现工程化、模块化、可复用化的思想。所以就会出现前后端开发不协调、效率低、扯皮的问题，这很不利于项目开发。因此项目管理者就想办法来解决这种问题，如何解决？→解耦。在软件领域，任何复杂的问题面前，高内聚、低耦合这种原则几乎总是能见效。所以前后端分离开发出现了，把前端开发的责任从后端开发人员身上拿掉，给前端开发工程师一个单独的岗位和责任领域，将前端也工程化、模块化、项目化。这才是前后端分离开发最开始的来源。这些与vue、react框架没有什么关系，它们充其量只是一种具体实现方式而已。从本质上来看，前后端分离并不是一个技术问题，而是一个工程化考量和项目管理的问题。

3.什么是前后端分离？
  在学习前端开发的时候，会发现前端开发的知识非常琐碎，前端往往是靠东平西凑（面向复制粘贴变成）来试图完成页面效果，开发过程没有java后端开发有逻辑，代码也很难管理。后端开发有各种各样的工具类、jar包、maven依赖、spring框架等，具有工程化模块化思维，可以满足长期演进和迭代的目标。而前端那时候并没有，所以vue.js和react.js等这些前端框架的出现，它们从本质上打破了以前前端开发的游戏规则，这就是前端开发组件化框架（也叫前端开发工程化框架）。这些框架出现后，前端开发也开始像后端一样，遵循一套体系来进行约束性的开发，越来越工程化、组件化、迭代化，变得有章可循。前后端分离核心思想是前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互。

4.如何做到前后端分离？
  从软件开发的四大步说起：设计、开发、测试、部署，真正的前后端分离需要渗透到以上的每一步中。
第一阶段：设计阶段。设计阶段的第一个层面是系统设计，后端系统设计包括后端架构：数据库、中间件、缓存等架构的设计，主要是考虑性能、容量、扩展性、可维护性。前端也应该如此，尤其是当一个网站页面多、复杂的时候，前端架构就也需要做好充分的规划和准备，以满足长期可演进、可迭代的目标。设计阶段的第二个层面是接口设计，前后端交互是通过接口来实现的，所以model层面上的接口约定也就极其重要，包括：接口的请求方式、数据类型、返回数据格式等。接口设计一定要评审到位，避免前后端开发人员因为某个没有约定好的接口扯来扯去。
第二阶段：开发阶段。前后端开发人员按照先前约定好的接口独立开发，互相透明（一旦出现扯皮现象，那就不算是严格独立的前后端开发，因为必定会有一方需要被迫妥协，去修改代码，这就算是还未完全实现解耦）。前端开发用来测试的数据都是从mock中模拟出来的，并不是从后端拿的；而后端开发仅提供一套接口，按照先前提供的评审好的接口约定来提供数据，这一套接口可以提供给很多的前端使用，比如web网页、h5页面、app、微信小程序等。
第三阶段：测试阶段。要保证前后端独立可测试，前端测试包括：页面、跳转、展示、输入、传参、响应等；后端则包括：数据接口的提供、数据格式、校验、异常、数据一致性、权限问题等。
第四阶段：部署阶段。要保证前后端独立可部署。（JSP时代前端html页面、css样式、js效果等都是由后台驱动，即前端都是塞到后端中，然后项目部署。当前端人员需要修改、发版本的时候就需要去求着后端人员帮忙）。前后端分离之后，就不再这样了，前后端发布上线可以完全独立，互相透明。

5.不要盲目使用该技术
  前后端分离确实是很合适复杂项目。但是不能为了做前后端分离而做前后端分离。一个完全的前后端分离需要相当的人力成本、开发成本、工具成本、部署成本等。所以小项目小团队就不合适这种前后端开发，一旦某一点做的不彻底，它就会带来很多负担，所以并不是所有的项目都适合前后端分离。