本文旨在让你理解清楚什么是前后端分离，前后端分离有何价值，并且通过代码带你认识前后端分离架构。

一. 前后端不分离时代

分析前后端分离，则先看看前后端不分离是什么样子的，有对比才能更好理解。

互联网刚发展时期，技术花样比较少，目的明确且简单，围绕和解决的更多是可用性方面的问题，即如何让一个网站跑起来，当然也就没有什么前后端分离这么时髦的概念了，虽然那时候做前端的人差不多出生了，但是前端这个概念还没被创造出来。随着WEB技术发展，各种后台MVC框架雨后春笋般开始席卷，在这个时代，像MFC，JSP+Servlet+javabean均是被开发者普遍使用，这类框架属于在可用性的基础上加了一些规范，人们相继欢呼叫好。在9012年的今天，目前的技术发展背景下看MVC确实有很多问题，但是在当时什么都没有的情况下，这算是很大的进步，就像你在迷路的沙漠里看到了前人留下的脚印一样，最起码有一条人走过的路了。这类框架的数据的流转链路也很简单，一般都是后端服务从DB获取数据，然后后端服务再渲染成HTML文件，输出给浏览器，浏览器直接解析HTML文件就算完事。也基本没有太多用户体验这回事，只要用户能看到数据便惊呼“beautiful”。

优点：

1. 相比于在此之前毫无规范的应用开发来说，MVC制定规则，让视图层和业务层分离，算是向着解耦前进了一大步，在一个模型被开发出来后，多个视图便可以重复使用它，提升了很大的效率。

缺点：

1. 业务代码和给用户展示视图代码都在一起，牵一发而动全身，而且前后端依赖性很强，前端视图层开发基本不能脱离开后端独立开发的。

2. 此类项目基本都是一个人完成的，人员要求也比较高，接触过模板渲染引擎的同学就知道，在这里调试前端样式是比较难受的，开发体验很差。

3. 后期维护将无从下手，可以看看下面两张图来体现这种糟糕的场面。

这是谁TM煮的饭，这个东西到底是什么？

实例

使用Nodejs的koajs作为后端框架，通过ejs模板引擎进行组装HTML文件，返回给前端，代码结构相对简单。

代码地址:https://github.com/FantasyGao/Practice-book/tree/master/front-back-separate/part1

二. 异步请求带来的半分离时代

AJAX全称Asynchronism JavaScript And XML，异步的JavaScript和XML。

技术革新越来越快，AJAX技术在浏览器开始被实现，前后端混在一起开发让焦头烂额的程序员开始思考新的开发方式，思考如何合理的使用这种新的请求方式去改善当前的开发方式 。这一次的变革是开发体验与用户体验并行的思考结果，既管前又管后的程序员们想摆脱此时这种焦头烂额的困境。在用户层面，也不再以单纯的“能用就行”这种思维看待互联网世界。不断的思考下，随之一种新的WEB架构被设计出来，后端程序员们不再主动拉取数据填充HTML渲染模板。而前端程序员利用浏览器的Ajax技术，主动拉取数据后填充网页，然后交由浏览器渲染页面后展示给用户，此时在用户角度来看，不在因为加载局部区域内容而刷新整个页面，体验也逐步上升。

优点：1. 前后端基本解耦，后端接口也可以最大限度的被复用，后续前后端进行升级成本也较小。2. 程序员职责划分清晰，相互之间均可以独立开发功能，最后对接联调上线。3. 在用户体验上，相比于传统的MVC使得页面能够局部以异步的方式去渲染，而不是用户等待服务端渲染整个页面才可以做交互 。
缺点：1. 前后端在代码层面并没有完全的解耦，前端静态模板这一层依旧由MVC中的视图层来控制，前端需要新增路由和页面时，需要后端新增视图层。2. 相比于之前一人搞定的MVC来说，分离后增加了前端视图与后端数据的联调工作。3. 由于页面需要前端浏览器渲染，搜索引擎爬取网站时并有客户端存在，即也不会真正的渲染，所以也带来SEO的问题，像门户类网站SEO还是相当重要的。4. 增加了多次HTTP请求，相对于后端组装完成后直接吐出HTML文件，此种方式势必会多出多个新的请求来获取后端提供的业务数据。

实例

使用Nodejs的koajs作为后端框架，将html模板文件放进统一的views模板文件夹下，需要后端指定前端路由与各自的模板文件，实质是可在客户端渲染的多页面的应用。

代码地址:https://github.com/FantasyGao/Practice-book/tree/master/front-back-separate/part2

三. 单页面下的全分离时代

单页面应用，一个简单布局的独立的静态网页，即可以是服务端渲染也可以是客户端渲染。

随着移动互联网的到来，追求极致的用户体验成了新时代的课题。用户不在被“能用就行”买单，而是“你不好用，我不用你”的思维来看待互联网应用，此时单页面的客户端渲染应用加异步请求数据的优势逐步被放大，单页面在客户端跳转并不会加载新的模板文件，而是始终在一个页面上定位跳转，用户操作也能快速的相应，自此借助单页面单模板的形式，WEB应用在前后端从代码和部署上均可以完全分离开。

单页面应用的跳转本质是浏览器本身实现了控制页面当前展示位置之间的关系，实现方式时浏览器监听页面hash值的变化，一旦链接发生改变，页面也将调整对于hash下，从而不去重新请求模板文件加载页面。前端仅需要一个模板文件，此时若要新添加页面时也不需要后端来参与，前后端代码也完全解耦。正常的架构是这样的，前后端分别独占仓库，利用nginx进行转发，预先设定后端请求均是/api开头的，当用户请求到达服务器时，先判断路径是否/api开头，如果是则转发至接口服务，否则进入前端项目下，返回html模板给前端渲染。

优点：

1. 前后端开发完全解耦，功能迭代可以同时推进，开发体验也得到改善，同时在开发时人员也能够更加专注做自己擅长的事，把自己所负责的模块做到专精。

2. 在用户体验层面，单页应用的切换与异步数据的局部加载效果让用户可以有更好的体验，通过技术来提升用户体验，从而转化为价值。

缺点：

1. 单页应用的实现是异步加载数据，然后客户端进行渲染展示，但是搜索引擎并不能进行数据渲染，从而导致了SEO的问题，需要通过其他形式完成SEO的优化操作。

2. 由于客户端的配置是未知的，当页面内容多，网页及其复杂时，部分客户端则会出现卡顿，渲染异常等一些问题，例如常见的首屏加载速度慢。

实例

使用Nodejs的koajs作为后端框架，将前端项目放在frontend文件下，与后端完全独立，前端使用webpack开发，将生成的静态HTML模板放在其dist下，由于没有nginx配置，这里在app.js中进行路由判断，将/api服务转进后端系统中，其余请求均去frontend/dist/index.html下请求前端静态模板文件。

代码地址:https://github.com/FantasyGao/Practice-book/tree/master/front-back-separate/part3

四. 用户体验与前端工程

BFF（Backend For Frontend）称之为用户体验适配层，即后端为了前端能提示用户体验的而引入的一层内。

当用户体验被最大化的发掘时，用户体验不再是单单一个前端程序员的事情，是整个应用都要考虑的内容，后端在保证正常可用的前提下，也要考虑用户的使用体验，如何让用户更满意成了全部技术人的追求，BFF（用户体验层）在这个背景下诞生了。最早出现这种以前端维护一个中间层来提升用户体验是在2014年，在淘宝前端团队推出的中途岛框架被提出。

中途岛架构利用JavaScript既能在前端又能在服务端运行的特点，作为一个桥梁的角色在前后端中被使用起来，让前端开发者来决定页面是服务端渲染还是客户端渲染，当应用处于首屏内容较多的时候，就在Nodejs里面组装生成HTML静态文件，前端直接解析渲染，而不必浏览器获取数据渲染，应用不是首屏的时候，就可以通过AJAX以异步形式请求数据过来在浏览器端进行渲染后呈现给用户，也可以顺利解决SEO的问题。

优点：

1. 首屏可以通过中间层进行服务端渲染，提示页面加载速度，从而提示用户体验。

2. 中间层可以进行分布式业务背景下大量业务数据的聚合与裁剪操作，由前端自己控制服务端返回的数据格式，从而可减少客户端的请求数量减少资源浪费。

3. 因为服务端渲染的引入，成功规避了因为客户端渲染带来的SEO问题。

缺点：

1. 开发者的专业要求提升，前端不在只是浏览器的内容，所以前端开发者需要更高的专业素质，既要能完成前端页面上的内容，还要可以在服务端上开发Nodejs。

实例

使用Nodejs的koajs作为后端业务框架，前端使用以express为用户体验适配层，即可以进行业务数据接口的聚合裁剪，也可以做服务端渲染操作，前端代码使用nuxtjs来构建，使用vue的语法完成服务端与客户端的开发，开发体验很棒。

代码地址:https://github.com/FantasyGao/Practice-book/tree/master/front-back-separate/part4

参考：

https://blog.csdn.net/fuzhongmin05/article/details/81591072

https://zhuanlan.zhihu.com/p/20534796

https://www.cnblogs.com/rjzheng/p/9185502.html

https://mp.weixin.qq.com/s/IYddaaw2ps1wR2VT1dZWPg

如上内容均为自己总结，难免会有错误或者认识偏差，如有问题，希望大家留言指正，以免误人，若有什么问题请留言，会尽力回答之。如果对你有帮助不要忘了分享给你的朋友或者点击右下方的“在看”哦！也可以关注作者，查看历史文章并且关注最新动态，助你早日成为一名全栈工程师！