技能共享前后端别离常识

原标题：技能共享：前后端别离常识

前后端别离这个词信任咱们都听过，不知道咱们是怎样了解的呢。前阵子看项目的时分，有一段完结硬是没看懂，下面来给咱们说一下一段愚笨的阅历哈。

(我没正正式式写过前端，所以假如文章有错的当地期望可以在谈论区友善沟通~)

一、告知布景

我一向都知道我现在的这个体系是前后端别离的，我的接口只会回来JSON出去，但我不曾关怀前端是怎样处理我的JSON数据的(以及他是怎样跑通和运转的)

在某一天，我在查接口的时分，习气F12，想直接看一下这个恳求回来的JSON数据是什么。可是一看，在network回来的是html格局：

恳求的信息

所以，我就很猎奇啊，就看一下这个接口是不是我幻想中的那个。所以就去找我的接口，看一下是不是真的回来JSON(我还专门Debug了一下，看看是不是真恳求到这个接口上了)：

接口信息

得出的结果是：我的接口的确是回来JSON数据，浏览器的reponse回来的的确是HTML格局。

所以，我就去找我前端的小伙伴，去问了一下这是怎样搞的。他回复我说：“在浏览器看到回来的是页面，那肯定是你们后端干的呀”

我说:“没有啊，我Java接口回来的是JSON数据啊，是不是半途你们用node做了些处理啊?”(我之前听过Node.js，但仅仅是听过)

他说：“Node.js也是你们后端的啊。”

我一听，啊?Node.js不是归于前端的吗?

二、初识Node.js

在遇到这个工作之前，其实我在知乎现已看了一个帖子，话落款是这个《毕设辩论，老师说node不行能写后台怎样办?》

有爱好的小伙伴可以去了解一下，大多数内容仍是挺通俗易懂的：

https:///question/327657434/answer/704249816

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

Node.js

is a Java runtime built on Chrome's V8 Java engine.

Node.js

是一个依据 Chrome V8 引擎 的 Java 运转时。

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

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

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

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

2.1 V8引擎是什么?

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

在传统意义上，咱们会以为解析器是逐条解析(一边履行一边解析)，但为了进步Java的解析速度(相当于进步用户体会)，在解析的时分做了点“四肢”。

V8引擎：为了进步解析的功能，引入了一些“后端”的技能(不过他原本就由C++编写的)。它是先将Java源代码转成笼统语法树，然后再将笼统语法树生成字节码。假如发现某个函数被屡次调用或者是屡次调用的循环体(热门代码)，那就会将这部分的代码编译优化。说白了便是：对热门代码做编译，非热门代码直接解析。

示意图

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

参考资料：

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

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

2.2回到Node.js

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

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

比方经过libuv库来进行文件读取，以及树立TCP/UDP衔接。经过xxx库解析HTTP恳求和呼应….这些库都是由C/C++来编写的。

转移

所以，Node.js是运转在服务端的，只不过在根底言语是Java。

三、前后端别离入门

回忆一下自己学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的话，会发现其实需求写十分十分多的Java代码，并且这些Java代码都不好复用。

在布置上，仍是跟Java一同布置(放在resource下)，没有将前端独自布置。

再后来，学到了一些在常用的模板引擎(比方freemarker)，其实用起来跟JSP没多大的差异，只不过功能要比JSP好不少。

…流下目不识丁的泪水

现在我了解到的前后端别离，首要布置是别离的(至少不会跟Java绑定在一同布置)：

前端和Java布置机器别离

Java接口只回来JSON数据：

Java接口都只回来JSON格局的数据

关于前端这几大结构：angular/vue/react这几个我都是没有写过的，所以也就不多BB了。我一向想知道的是：前框结构和node是啥联系。问了一下前端的小伙伴，他回复是大致这样的：

前端现在是考究工程化的，工程化用到了node罢了(便是打包编译那些会用到，项目里边真实跑起来的话是没有这些东西的)

----以下文字摘抄

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

举个比如：跟着开展，前端的Java需求依靠的包也十分复杂，类比于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)开发完，开发环境下将Java编译/打包完，那咱们能得到纯静态的文件。咱们可以直接将纯静态文件放到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归属在后端仍是前端?

责任编辑：