最近学到的先后端分离知识

前言

只有光头才能变强。

文本已收录至个人GitHub仓库，欢迎Star：https://github.com/ZhongFuCheng3y/3y

先后端分离这个词相信你们都听过，不知道你们是怎么理解的呢。前阵子看项目的时候，有一段实现硬是没看懂，下面来给你们说一下一段愚蠢的经历哈。

(我没正正式式写过前端，因此若是文章有错的地方但愿能够在评论区友善交流~)

1、交代背景

我一直都知道我如今的这个系统是先后端分离的，个人接口只会返回JSON出去，但我未曾关心前端是怎么处理个人JSON数据的(以及他是怎么跑通和运行的)

在某一天，我在查接口的时候，习惯F12，想直接看一下这个请求返回的JSON数据是什么。可是一看，在network返回的是html格式：

因而，我就很好奇啊，就看一下这个接口是否是我想象中的那个。因而就去找个人接口，看一下是否是真的返回JSON(我还专门Debug了一下，看看是否是真请求到这个接口上了）：

得出的结果是：个人接口的确是返回JSON数据，浏览器的reponse返回的的确是HTML格式。

因而，我就去找我前端的小伙伴，去问了一下这是怎么搞的。他回复我说：“在浏览器看到返回的是页面，那确定是大家后端干的呀”

我说:“没有啊，我Java接口返回的是JSON数据啊，是否是中途大家用node作了些处理啊？”(我以前听过Node.js，但仅仅是听过)

他说：“Node.js也是大家后端的啊。”

我一听，啊？Node.js不是属于前端的吗？

2、初识Node.js

在遇到这个事情以前，其实我在知乎已经看了一个帖子，话题名是这个《毕设答辩，老师说node不可能写后台怎么办?》

有兴趣的小伙伴能够去了解一下，大多数内容仍是挺通俗易懂的：

• https://www.zhihu.com/question/327657434/answer/704249816

我在下载Node.js的时候，发现其简介十分简洁：

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

---

Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时。

而后点进去Chrome V8引擎，再看了一下介绍：

V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others.

---

V8是Google的开源高性能JavaScript和WebAssembly引擎，用C ++编写。它用于Chrome和Node.js等。

看了介绍，一脸懵逼，这是啥玩意啊。下面我来解释一下

2.1 V8引擎是什么？

众所周知，JavaScript是解析型语言，咱们写好的JavaScript代码会由JavaScript引擎去解析，而V8是JavaScript引擎的一种。

• 在传统意义上，咱们会认为解析器是逐条解析（一边执行一边解析），但为了提升JavaScript的解析速度（至关于提升用户体验），在解析的时候作了点“手脚”。
• V8引擎：为了提升解析的性能，引入了一些“后端”的技术(不过他原本就由C++编写的)。它是先将JavaScript源代码转成抽象语法树，而后再将抽象语法树生成字节码。若是发现某个函数被屡次调用或者是屡次调用的循环体(热点代码)，那就会将这部分的代码编译优化。说白了就是：对热点代码作编译，非热点代码直接解析。

总结：V8引擎是JavaScript引擎的一种，这个引擎由C++来编写的，性能很不错。

参考资料：

• https://zhuanlan.zhihu.com/p/27628685
• https://zhuanlan.zhihu.com/p/73768338

2.2回到Node.js

浏览器为了安全，没有为JavaScript提供一套IO环境，而一门后端语言是确定能进行网络通讯、文件读写(IO)的。

后来，有牛逼的人把V8引擎搬到了服务端上，在V8引擎的基础上加了网络通讯、IO、HTTP等服务端的函数。取了一个名字叫：Node.js

• 好比经过libuv库来进行文件读取，以及创建TCP/UDP链接。经过xxx库解析HTTP请求和响应....这些库都是由C/C++来编写的。

因此，Node.js是运行在服务端的，只不过在基础语言是JavaScript。

3、先后端分离入门

回顾一下本身学JavaWeb的历程：

• 刚学Servlet的时候，会在response对象上写一些HTML代码输出到浏览器看效果

• 后来，学习到JSP了，就纯粹用Servlet作控制，JSP作视图。

  • JSP本质上仍是一个Servlet，只不过看起来像HTML文件，在编译的时候仍是会变成一个HttpJspPage类（该类是HttpServlet的一个子类）

• 再后来，学到了AJAX技术，发现咱们彻底能够经过AJAX来进行交互。AJAX请求Servlet，Servlet返回JSON数据回去，AJAX拿到Servlet返回的数据进行解析和处理。这里压根就不须要JSP了(纯HTML+AJAX)，这算是先后端分离的一种了

  • 在开发上体验：若是彻底使用HTML+AJAX的话，会发现其实须要写很是很是多的JavaScript代码，并且这些JavaScript代码都很差复用。
  • 在部署上，仍是跟Java一块儿部署(放在resource下)，没有将前端单独部署。
• 再后来，学到了一些在经常使用的模板引擎（好比freemarker)，其实用起来跟JSP没多大的区别，只不过性能要比JSP好很多。
• ...流下不学无术的泪水

目前我了解到的先后端分离，首先部署是分离的(至少不会跟Java绑定在一块儿部署)：

Java接口只返回JSON数据：

关于前端这几大框架：angular/vue/react这几个我都是没有写过的，因此也就很少BB了。我一直想知道的是：前框框架和node是啥关系。问了一下前端的小伙伴，他回复是大体这样的：

前端如今是讲究工程化的，工程化用到了node而已(就是打包编译那些会用到，项目里面真正跑起来的话是没有这些东西的)

-----------如下引用摘录：

Webpack、Less、Sass、Gulp、Bower以及这些工具的插件都是Node上开发的---@知乎陈龙

举个例子：随着发展，前端的JavaScript须要依赖的包也很是复杂，类比于Java咱们会有Maven，而前端如今有npm （包管理）

• 而npm是随同Node.js一块儿安装的。因此前端(vue/angular/react)在开发环境下都是离不开Node.js的(编译、打包等等)

参考资料（为何要使用 npm）：

• https://zhuanlan.zhihu.com/p/24357770

3.1 方式一(Nginx+Server)

OK，如今假设咱们用前端(vue/angular/react)开发完，开发环境下将JavaScript编译/打包完，那咱们能获得纯静态的文件。咱们能够直接将纯静态文件放到Nginx(CDN)等等地方【只要可以响应HTTP请求就行】。

若是请求是调用后端服务，则通过Nginx转发到后端服务器，完成响应后经Nginx返回到浏览器。

3.2 方式二（加入Node.js)

在前边的基础上加入Node.js，至于为啥要Node.js，一个重要的缘由就是：加快首屏渲染速度，解决SEO问题

加入Node.js，此时的请求流程应该是这样的：

浏览器发起的请求通过前端机的Nginx进行 分发.

URL请求统一分发到Node Server，在Node Server中根据请求类型从后端服务器上经过RPC服务请求页面的模板数据，而后进行页面的组装和渲染；

API请求则直接转发到后端服务器，完成响应。

最后

好的，如今问题来了：你是以为Node.js归属在后端仍是前端？

看得不过瘾？推荐一下我认为不错的文章和资料：

• http://www.javashuo.com/article/p-cjiwchry-dr.html
• https://www.zhihu.com/question/267014376
• https://cnodejs.org/topic/565ebb193cda7a91276ff887
• https://github.com/yalishizhude/front-back-separation

乐于输出 干货的Java技术公众号： Java3y。公众号内 有200多篇原创技术文章、海量视频资源、精美脑图， 关注便可获取！

以为个人文章写得不错，点赞！