引言

前后端分離這個(gè)詞相信大家都聽過，不知道大家是怎么理解的呢。前陣子看項(xiàng)目的時(shí)候，有一段實(shí)現(xiàn)硬是沒看懂，下面來給大家說一下一段愚蠢的經(jīng)歷哈。

(我沒正正式式寫過前端，所以如果文章有錯(cuò)的地方希望可以在評(píng)論區(qū)友善交流~)

一、交代背景

我一直都知道我現(xiàn)在的這個(gè)系統(tǒng)是前后端分離的，我的接口只會(huì)返回JSON出去，但我不曾關(guān)心前端是怎么處理我的JSON數(shù)據(jù)的(以及他是怎么跑通和運(yùn)行的)

在某一天，我在查接口的時(shí)候，習(xí)慣F12，想直接看一下這個(gè)請(qǐng)求返回的JSON數(shù)據(jù)是什么。但是一看，在network返回的是html格式：

于是，我就很好奇啊，就看一下這個(gè)接口是不是我想象中的那個(gè)。于是就去找我的接口，看一下是不是真的返回JSON(我還專門Debug了一下，看看是不是真請(qǐng)求到這個(gè)接口上了)：

得出的結(jié)果是：我的接口的確是返回JSON數(shù)據(jù)，瀏覽器的reponse返回的的確是HTML格式。

于是，我就去找我前端的小伙伴，去問了一下這是怎么搞的。他回復(fù)我說：“在瀏覽器看到返回的是頁(yè)面，那肯定是你們后端干的呀”

我說:“沒有啊，我Java接口返回的是JSON數(shù)據(jù)啊，是不是中途你們用node做了些處理啊？”(我之前聽過Node.js，但僅僅是聽過)

他說：“Node.js也是你們后端的啊?！?/p>

我一聽，啊？Node.js不是屬于前端的嗎？

二、初識(shí)Node.js

在遇到這個(gè)事情之前，其實(shí)我在知乎已經(jīng)看了一個(gè)帖子，話題名是這個(gè)《畢設(shè)答辯，老師說node不可能寫后臺(tái)怎么辦?》

有興趣的小伙伴可以去了解一下，大多數(shù)內(nèi)容還是挺通俗易懂的：

• www.zhihu.com/question/32…

我在下載Node.js的時(shí)候，發(fā)現(xiàn)其簡(jiǎn)介十分簡(jiǎn)潔：

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

---

Node.js? 是一個(gè)基于 Chrome V8 引擎 的 JavaScript 運(yùn)行時(shí)。

然后點(diǎn)進(jìn)去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是解析型語(yǔ)言，我們寫好的JavaScript代碼會(huì)由JavaScript引擎去解析，而V8是JavaScript引擎的一種。

• 在傳統(tǒng)意義上，我們會(huì)認(rèn)為解析器是逐條解析(一邊執(zhí)行一邊解析)，但為了提高JavaScript的解析速度(相當(dāng)于提高用戶體驗(yàn))，在解析的時(shí)候做了點(diǎn)“手腳”。
• V8引擎：為了提高解析的性能，引入了一些“后端”的技術(shù)(不過他本來就由C++編寫的)。它是先將JavaScript源代碼轉(zhuǎn)成抽象語(yǔ)法樹，然后再將抽象語(yǔ)法樹生成字節(jié)碼。如果發(fā)現(xiàn)某個(gè)函數(shù)被多次調(diào)用或者是多次調(diào)用的循環(huán)體(熱點(diǎn)代碼)，那就會(huì)將這部分的代碼編譯優(yōu)化。說白了就是：對(duì)熱點(diǎn)代碼做編譯，非熱點(diǎn)代碼直接解析。

總結(jié)：V8引擎是JavaScript引擎的一種，這個(gè)引擎由C++來編寫的，性能很不錯(cuò)。

參考資料：

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

2.2回到Node.js

瀏覽器為了安全，沒有為JavaScript提供一套IO環(huán)境，而一門后端語(yǔ)言是肯定能進(jìn)行網(wǎng)絡(luò)通信、文件讀寫(IO)的。

后來，有牛逼的人把V8引擎搬到了服務(wù)端上，在V8引擎的基礎(chǔ)上加了網(wǎng)絡(luò)通信、IO、HTTP等服務(wù)端的函數(shù)。取了一個(gè)名字叫：Node.js

• 比如通過libuv庫(kù)來進(jìn)行文件讀取，以及建立TCP/UDP連接。通過xxx庫(kù)解析HTTP請(qǐng)求和響應(yīng)....這些庫(kù)都是由C/C++來編寫的。

所以，Node.js是運(yùn)行在服務(wù)端的，只不過在基礎(chǔ)語(yǔ)言是JavaScript。

三、前后端分離入門

回顧一下自己學(xué)JavaWeb的歷程：

• 剛學(xué)Servlet的時(shí)候，會(huì)在response對(duì)象上寫一些HTML代碼輸出到瀏覽器看效果
• 后來，學(xué)習(xí)到JSP了，就純粹用Servlet做控制，JSP做視圖。
• JSP本質(zhì)上還是一個(gè)Servlet，只不過看起來像HTML文件，在編譯的時(shí)候還是會(huì)變成一個(gè)HttpJspPage類(該類是HttpServlet的一個(gè)子類)
• 再后來，學(xué)到了AJAX技術(shù)，發(fā)現(xiàn)我們完全可以通過AJAX來進(jìn)行交互。AJAX請(qǐng)求Servlet，Servlet返回JSON數(shù)據(jù)回去，AJAX拿到Servlet返回的數(shù)據(jù)進(jìn)行解析和處理。這里壓根就不需要JSP了(純HTML+AJAX)，這算是前后端分離的一種了
• 在開發(fā)上體驗(yàn)：如果完全使用HTML+AJAX的話，會(huì)發(fā)現(xiàn)其實(shí)需要寫非常非常多的JavaScript代碼，而且這些JavaScript代碼都不好復(fù)用。
• 在部署上，還是跟Java一起部署(放在resource下)，沒有將前端單獨(dú)部署。
• 再后來，學(xué)到了一些在常用的模板引擎(比如freemarker)，其實(shí)用起來跟JSP沒多大的區(qū)別，只不過性能要比JSP好不少。
• ...流下不學(xué)無術(shù)的淚水

目前我了解到的前后端分離，首先部署是分離的(至少不會(huì)跟Java綁定在一起部署)：

Java接口只返回JSON數(shù)據(jù)：

關(guān)于前端這幾大框架：angular/vue/react這幾個(gè)我都是沒有寫過的，所以也就不多BB了。我一直想知道的是：前框框架和node是啥關(guān)系。問了一下前端的小伙伴，他回復(fù)是大致這樣的：

前端現(xiàn)在是講究工程化的，工程化用到了node而已(就是打包編譯那些會(huì)用到，項(xiàng)目里面真正跑起來的話是沒有這些東西的)

-----------以下引用摘錄：

Webpack、Less、Sass、Gulp、Bower以及這些工具的插件都是Node上開發(fā)的---@知乎陳龍

舉個(gè)例子：隨著發(fā)展，前端的JavaScript需要依賴的包也非常復(fù)雜，類比于Java我們會(huì)有Maven，而前端現(xiàn)在有npm (包管理)

• 而npm是隨同Node.js一起安裝的。所以前端(vue/angular/react)在開發(fā)環(huán)境下都是離不開Node.js的(編譯、打包等等)

參考資料(為什么要使用 npm)：

• zhuanlan.zhihu.com/p/24357770

3.1 方式一(Nginx+Server)

OK，現(xiàn)在假設(shè)我們用前端(vue/angular/react)開發(fā)完，開發(fā)環(huán)境下將JavaScript編譯/打包完，那我們能得到純靜態(tài)的文件。我們可以直接將純靜態(tài)文件放到Nginx(CDN)等等地方【只要能夠響應(yīng)HTTP請(qǐng)求就行】。

如果請(qǐng)求是調(diào)用后端服務(wù)，則經(jīng)過Nginx轉(zhuǎn)發(fā)到后端服務(wù)器，完成響應(yīng)后經(jīng)Nginx返回到瀏覽器。

3.2 方式二(加入Node.js)

在前邊的基礎(chǔ)上加入Node.js，至于為啥要Node.js，一個(gè)重要的原因就是：加快首屏渲染速度，解決SEO問題

加入Node.js，此時(shí)的請(qǐng)求流程應(yīng)該是這樣的：

瀏覽器發(fā)起的請(qǐng)求經(jīng)過前端機(jī)的Nginx進(jìn)行分發(fā).

URL請(qǐng)求統(tǒng)一分發(fā)到Node Server，在Node Server中根據(jù)請(qǐng)求類型從后端服務(wù)器上通過RPC服務(wù)請(qǐng)求頁(yè)面的模板數(shù)據(jù)，然后進(jìn)行頁(yè)面的組裝和渲染；

API請(qǐng)求則直接轉(zhuǎn)發(fā)到后端服務(wù)器，完成響應(yīng)。

最后

好的，現(xiàn)在問題來了：你是覺得Node.js歸屬在后端還是前端？

小結(jié)

歡迎關(guān)注頭條號(hào):JAVA大飛哥

覺得收獲的話可以點(diǎn)個(gè)關(guān)注收藏轉(zhuǎn)發(fā)一波喔，謝謝大佬們支持！

私信本頭條號(hào)：發(fā)送：“免費(fèi)資料”就可以獲取微服務(wù)、分布式、高并發(fā)、高可用，性能優(yōu)化丶源碼分析等等一些技術(shù)資料

最后，每一位讀到這里的Java程序猿朋友們，感謝你們能耐心地看完。希望在成為一名更優(yōu)秀的Java程序猿的道路上，我們可以一起學(xué)習(xí)、一起進(jìn)步！都能贏取白富美，走向架構(gòu)師的人生巔峰!

總結(jié)

以上是生活随笔為你收集整理的servlet里面为什么有时候覆_为什么新来的经理强烈推荐？前后端分离知识，学到了...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。