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

一时失言乱红尘 2021-09-30 15:40 312阅读 0赞

**前言**

> 只有光头才能变强。
> 
> 文本已收录至我的GitHub仓库，欢迎Star：https://github.com/ZhongFuCheng3y/3y

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

(我没正正式式写过前端，所以如果文章有错的地方希望可以在评论区友善交流~)

## 一、交代背景 ##

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

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

![640?wx\_fmt=png][640_wx_fmt_png] 请求的信息

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

![640?wx\_fmt=png][640_wx_fmt_png 1] 接口信息

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

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

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

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

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

## 二、初识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源代码转成抽象语法树，然后再将抽象语法树生成字节码。如果发现某个函数被多次调用或者是多次调用的循环体(热点代码)，那就会将这部分的代码**编译优化**。说白了就是：对**热点代码**做编译，**非热点代码直接解析**。

![640?wx\_fmt=png][640_wx_fmt_png 2] 示意图

总结：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++来编写的。

![640?wx\_fmt=png][640_wx_fmt_png 3] 搬运

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

## 三、前后端分离入门 ##

回顾一下自己学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绑定在一起部署)：

![640?wx\_fmt=png][640_wx_fmt_png 4] 前端和Java部署机器分离

Java接口只返回JSON数据：

![640?wx\_fmt=png][640_wx_fmt_png 5] 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`，此时的请求流程应该是这样的：

![640?wx\_fmt=png][640_wx_fmt_png 6] 架构图

> 浏览器发起的请求经过前端机的Nginx进行**分发**.
> 
> URL请求统一分发到Node Server，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据，然后进行页面的组装和渲染；
> 
> API请求则直接转发到后端服务器，完成响应。

## 最后 ##

好的，现在问题来了：你是觉得`Node.js`归属在后端还是前端？

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

*  https://segmentfault.com/a/1190000009329474
 *  https://www.zhihu.com/question/267014376
 *  https://cnodejs.org/topic/565ebb193cda7a91276ff887
 *  https://github.com/yalishizhude/front-back-separation

推荐阅读：

*  [记一次愚蠢的操作--线程安全问题][--]  
    
 *  [在工作中常用到的SQL][SQL]
 *  [Github上有哪些Java面试/学习相关的仓库推荐?][Github_Java]  
    
 *  [工作中常用到的Linux命令][Linux]
 *  [在公司做的项目和自己在学校做的有什么区别？][Link 1]
 *  [目录|Java3y最全目录][Java3y]

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

**200多篇** **原创** **技术文章** **海量视频资源** **精美脑图** **面试题**

**长按扫码可关注获取**

欢迎关注![640?wx\_fmt=png][640_wx_fmt_png 7]点个再看![640?wx\_fmt=png][640_wx_fmt_png 8]

[640_wx_fmt_png]: /images/20210827/855aa00ecea349c7b5bbfa3afdf2298c.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210827/132eade12e2e4e88a40eac091d27faf7.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210827/406ee0776d0647e2bf7a817c1a875808.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210827/370bee01f85b46b3b9320a435b80088d.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210827/d37d28d067f1421aadf4b74f91a61283.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210827/323f2bafaaf04e8cbf6f3b9af032e84b.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210827/b7705dec9f1c4218b83353c04407c36e.png?wx_fmt=png
[--]: https://mp.weixin.qq.com/s?__biz=MzI4Njg5MDA5NA==&mid=2247485489&idx=1&sn=665029df2cf4ed6731eff2eb6cb564a2&chksm=ebd74930dca0c0266925b862867d4fbb1aa9a378292b3aeb9111b1cecd0e34b2a00d44a9a628&token=58510525&lang=zh_CN&scene=21#wechat_redirect
[SQL]: https://mp.weixin.qq.com/s?__biz=MzI4Njg5MDA5NA==&mid=2247485472&idx=1&sn=5ddf518cb23e7dcbdf697085a9736377&chksm=ebd74921dca0c03769baf0aa76ce44b8e52c61facc12223fb9ff67203e6b1c87f4d1b43e4b29&token=318750789&lang=zh_CN&scene=21#wechat_redirect
[Github_Java]: https://mp.weixin.qq.com/s?__biz=MzI4Njg5MDA5NA==&mid=2247485482&idx=1&sn=e8dbe8e92378b7cc623e8ae9aaf3e8e4&chksm=ebd7492bdca0c03deac964fc41a9bdd41ccc9f1b9caeeb9164bb5417bbb98c2acc1b85334b85&token=242919322&lang=zh_CN&scene=21#wechat_redirect
[Linux]: https://mp.weixin.qq.com/s?__biz=MzI4Njg5MDA5NA==&mid=2247485440&idx=1&sn=85b40c173d66b62b3e870dd0e095c72c&chksm=ebd74901dca0c01727ed2cff30acc5d39948eda5bf4252f1d96526f951591f69edcfccbbad29&token=870729606&lang=zh_CN&scene=21#wechat_redirect
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzI4Njg5MDA5NA==&mid=2247485368&idx=1&sn=59742409160a103eddaa6ca187a77256&chksm=ebd746b9dca0cfaffd61b35a810d806f7eea67c5a0dec820ae65be093d81abf49ac19ab1248b&token=870729606&lang=zh_CN&scene=21#wechat_redirect
[Java3y]: https://mp.weixin.qq.com/s?__biz=MzI4Njg5MDA5NA==&mid=2247485287&idx=2&sn=74d810f0fdd6d2626027e67886c2e557&chksm=ebd74666dca0cf702815918bad38e4dd75d56d285b6da54eb7fadc5eb5d12a6f7c91de465acf&token=870729606&lang=zh_CN&scene=21#wechat_redirect
[640_wx_fmt_jpeg]: /images/20210827/ca727f61acbb4378914332879aa8d67b.png?wx_fmt=jpeg
[640_wx_fmt_png 7]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/iaIdQfEric9TxAghDEtyL0yGWb5bwkkbojspAFsIK81p9GbZ7ibpE1PM7HSBxvSm0BjwYa4v6JIlMIhYMMEDeOdUg/640?wx_fmt=png
[640_wx_fmt_png 8]: /images/20210827/2c16b5fe6ddc4d979062c8fa9c096767.png?wx_fmt=png