Web前后端分离

第一篇博客：见谅

用自己的通俗语言讲web工程的前后端分离：

只是从自己的角度去分析，我眼中的前后端分离（可能不对）

首先要明白我们服务器和浏览器之前传输和接受的是什么：

静态文件(html，css，js 等格式这样的文件) 就如同，你的浏览器能够直接打开桌面text文档，html文件和图片的文件

这就是问题关键，我们所谓的动态页面，是在浏览器接受了这些html 、css 和 js之后 ，浏览器(内核)去解析这些文件建并加载

然后动态的效果和渲染就出来了，所有的渲染和特效，是在客户端完成。

这里引用网上其他地方对servlet和jsp的关系来更加讲解这一点：

Servlet是一个特殊的Java程序，它运行于服务器的JVM中，能够依靠服务器的支持向浏览器提供显示内容。JSP本质上是Servlet的一种简易形式，JSP会被服务器处理成一个类似于Servlet的Java程序，可以简化页面内容的生成。Servlet和JSP最主要的不同点在于，Servlet的应用逻辑是在Java文件中，并且完全从表示层中的HTML分离开来。而JSP的情况是Java和HTML可以组合成一个扩展名为.jsp的文件。有人说，Servlet就是在Java中写HTML，而JSP就是在HTML中写Java代码，当然这个说法是很片面且不够准确的。JSP侧重于视图，Servlet更侧重于控制逻辑，在MVC架构模式中，JSP适合充当视图（view）而Servlet适合充当控制器（controller）

浏览器url输入login.jsp 这时候发生的过程是，客户端请求一个文件资源路径 ，因为jsp是特殊servlet ，其本质就是相当于，servlet中直接写html返回字符串，最后jsp，经过服务端jvm编译之后，走java的逻辑代码，将数据提前渲染在文件中，然后返回浏览器（客户端）html类型的文件。这就相当于访问servlet再用输出流输出的html页面，效率没有直接使用html高（是每次访问访问都会输出流）

半分离(前端资源代码和java程序代码还是在一个容器中)

前后端半分离，前端负责开发页面，通过接口（Ajax）获取数据，采用dom操作对页面进行数据绑定，最终是由前端把页面渲染出来。这也就是其他博客里说的，Ajax与SPA应用（单页应用）结合的方式。其结构图如下：

前端使用angular，vue ，react，编译打包，将代码放到web项目中。目前个人涉及的也是这种模式。但从分离的角度思考，个人没有涉及很深，至于网上的大牛说这样的分离会有缺点时：资源消耗严重，在业务复杂的情况下，一个页面可能要发起多次http请求才能将页面渲染完毕。移动端建立http请求消耗多少资源过多。个人之前写过一个大坑的页面（基于angular）下拉框的联动，因业务需求有一个五级联动的下拉框，每个下拉框又要自己的下拉，数据是后端接口拿过来，因此每次加载到这个也页面的时候超慢，每个下拉框点击之后，又走一次后端查询下个下拉框，导致页面渲染速度脱层。

分离（前端工程工程单独部署）

前端工程单独部署，运行在node环境下，与java层完全剥离 ，更偏向于数据交互，部分逻辑在node上实现，架构分离的更纯粹，此处不做过多描述0.0