最近疫情严重，只能天天宅在家里当死宅。最近闲来无事开始了解Web前后端发展史，算是给自己做后端开发进行知识补充吧。从未分离时代到前后端分离时代，Web开发发生了非常大的变化。目前来说，基本没人会用MVC的方式开发web，主流开发模式一般是前后端全分离，小型网站仍会采用前后端半分离。作为初学者，我用的是半分离的方式来进行Web开发，毕竟对于小型网站来说，全分离的开发方式代价还是太高了。现在，根据整理的资料和个人理解，稍微写一下前后端未分离、半分离和全分离的发展历程。

在JavaScript 诞生之后，可以用来更改前端 DOM 的样式，实现一些类似于时钟之类的小功能。那时候的JavaScript 仅限于此，大部分的前端界面还很简单，显示的都是纯静态的文本和图片。这种静态页面不能读取后台数据库中的数据，为了使得 Web 更加充满活力，以 PHP、JSP、ASP.NET 为代表的动态页面技术相继诞生。

PHP（PHP：Hypertext Preprocessor）最初是由 Rasmus Lerdorf 在 1995 年开始开发的，现在PHP 的标准由 PHP Group 维护。PHP 是一种开源的通用计算机脚本语言，尤其适用于网络开发并可嵌入 HTML 中使用，其主要目标是允许网络开发人员快速编写动态页面。

JSP（JavaServer Pages）是由 Sun 公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求，从而动态生成 HTML、XML 或其他格式文档的 Web 网页的技术标准。JSP 技术是以 Java 语言为基础的。

随着这些动态服务器页面技术的出现，页面不再是静止的，页面可以获取服务器数据信息并不断更新。此时，后端的各种 MVC 框架逐渐发展起来，以 JSP 为例，Struct、Spring 等框架层出不穷。以 Google 为代表的搜索引擎以及各种论坛相继出现，使得 Web 充满了活力。

简单概括，在前后端耦合架构中，所有的静态资源和业务代码统一部署在同一台服务器上。服务器接收到浏览器的请求后，进行处理得到数据，然后将数据填充到静态页面中，最终返回给浏览器。

在这个前提下，前端能做的工作就只是简单地将 UI 设计师提供的原型图实现成静态的 HTML 页面，后端开发再“套用”前端开发的模板进行页面拼接。而后端过得也不轻松，因为页面交互逻辑开发的工作量都集中在后端，分配严重不均。并且开发时，前后端相互依赖很严重，需要改动时，要让前端修改静态页面，后端再修改逻辑，开发效率慢，代码难以维护。

使用MVC框架开发： 所有的客户端请求都被发送给作为控制器的Servlet，它接收请求，并根据请求信息将它们分发给适当的JSP来响应。同时，Servlet还根据JSP的需求生成JavaBeans的实例并输出给JSP环境。JSP可以通过直接调用方法或使用UseBean的自定义标签得到JavaBeans中的数据。需要说明的是，这个View还可以采用Velocity、Freemarker等模板引擎。使用了这些模板引擎，可以使得开发过程中的人员分工更加明确，还能提高开发效率。

在这个时期，首先是有以下的开发方式： 这种方式已经逐渐淘汰。主要原因有两点： 1.前端在开发过程中严重依赖后端，在后端没有完成的情况下，前端无法干活。 2.会JSP、Velocity或Freemarker等模板引擎的前端开发人员越来越少。

因此进化出了另一种开发方式，这种方式现在很多小型传统软件公司还在使用： 但是这种开发方式和它前身的开发方式有着同样的缺点：

1.前端无法单独调试，开发效率低。

2.前端不可避免会遇到后台代码。比如说JSP中的EL表达式和JSTL标签，难为前端。这种方式的耦合性太强，就算用了Freemarker等模板引擎，前端也不可避免地要去重新学习该模板引擎的语法，无谓增加了前端的学习成本。

3.JSP本身局限所导致的性能问题。一是第一次请求JSP，必须要在WEB服务器中编译成Servlet，造成第一次运行会比较缓慢的结果；二是每次请求JSP都要访问Servlet再用输出流输出HTML页面，效率比直接使用HTML低下；三是JSP是同步加载的方式，如果页面中有很多内容，页面响应会很慢。

到了前后端半分离阶段，我们其实仍在使用MVC框架，比如后端的Spring框架或者前端的reacts框架都是MVC框架。前后端半分离大致来说就是，前端通过前端框架完成页面设计，后端负责数据处理和接口实现。前后端的交流过程大致是前端网页端口被使用时，向后端发送网络请求并传输数据，后端根据网络请求的内容进行数据处理并通过json格式传输数据给前端。 这个阶段，前端是完全没有后端代码的，除了接口的变量使用和服务器地址。后端开发也不需要等前端完成之后才能继续，在后端没有完成之前，前端可以通过假后端等手段对页面进行测试。

这样看起来前后端的联系不是很大，那为什么说是半分离的呢？因为不是所有页面都是单页面应用。在多页面应用的情况下，前端因为没有掌握Controller层，所以需要和后端讨论页面是要同步输出还是异步JSON渲染等问题。而且在这个时期，通常也是一个工程师搞定前后端所有的工作，因此在这个阶段只能算半分离。

在这个时代，前端的范围被扩展，Controller层也被认为是属于前端的一部分。前端负责View和Controller层，后端只负责Model层和Service层。但是Controller毕竟一直是用后端代码写的，前端人员对相关代码肯定是不太熟悉的。为了解决这个问题，NodeJS横空出世，提供了一个跟前端交互的API。对前端开发来说只要会JS语言，就能轻松的使用NodeJS，这对网页开发来说无疑是一种便利。 NodeJS路由的实现逻辑是把前端静态页面代码当成字符串发送到客户端（例如浏览器），简单理解可以理解为路由是提供给客户端的一组API接口，只不过返回的数据是页面代码的字符串而已。

NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景，这也是为什么一般是大型企业才会使用前后端分离的模式进行网页开发，小网站仍使用以前的模式开发。毕竟没有过时的技术，只有合适的技术。

用NodeJS来作为桥梁架构服务端API输出的JSON能带来优异性能。后端处于性能和别的原因，提供的接口所返回的数据格式也许不太适合前端直接使用，前端所需的排序功能、筛选功能以及到了视图层的页面展现，也许都需要对接口所提供的数据进行二次处理。这些处理虽然是可以放在前端来执行，但如果数据量一大，便会浪费浏览器性能，更会降低页面渲染速度，影响用户体验。因而如今增加NodeJS中间层是一种良好的解决方案。

增加NodeJS中间层之后，浏览器（Webview）便不再直接请求服务端的API，而是浏览器先去请求服务端的NodeJS，由NodeJS对服务端的API发起HTTP请求，NodeJS收到服务端的API响应返回的JSON后就去渲染HTML页面，然后NodeJS直接将HTML页面flush到浏览器。这样，浏览器得到的就是普通的HTML页面，不再用发AJAX去请求服务器之后再在浏览器进行页面渲染了。 增加NodeJS中间层最大的优势便是适配性提升。在这个移动互联网时代，一个网站如果没有移动端的适配是很难生存的。一般对前端来说，会给PC端、Mobile、App端各自研发一套前端，后端也要根据不同的前端设计不同的端口，但后端大部分的业务逻辑是一样的，这无疑会徒增工作量。如果Controller层在后端手里，后端为了这些不同端页面展现逻辑，自己维护这些Controller，模板无法重用，徒增与前端沟通成本。如果增加了NodeJS层，每种前端的界面展示逻辑由NodeJS层自己维护。产品经理在中途如果想要改动界面，可以由前端自己维护，无需后端操心。前后端各司其职，后端专注于自己的业务逻辑开发，前端专注于产品效果开发。这样就实现了更彻底的前后端分离。

从最初的静态页面，到现在多平台高并发的大流量网站，Web开发一直在高速发展着。以前最早学习计算机就是从简单的html静态网页设计开始的，那个时候的网站还是由各种简单的贴图和链接拼接而成。到上大学正式系统性学习计算机之后，现在和别人一起进行小型网站的开发。虽然还只是很简单的网站，但了解一下Web前后端的发展历史还是很有必要的，这可以使我们知道自己正在进行的网站开发任务、正在使用的框架和技术到底是为什么要这样做，我们为什么会使用这样的方式和模式去进行网站开发。当我们对这些事情了然于胸之后，如果有一天换一种开发模式也不会茫然无措。