最近學到的先後端分離知識

前言

只有光頭才能變強。

文本已收錄至個人GitHub倉庫，歡迎Star：github.com/ZhongFuChen…

先後端分離這個詞相信你們都聽過，不知道你們是怎麼理解的呢。前陣子看項目的時候，有一段實現硬是沒看懂，下面來給你們說一下一段愚蠢的經歷哈。

(我沒正正式式寫過前端，因此若是文章有錯的地方但願能夠在評論區友善交流~)

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不可能寫後臺怎麼辦?》

有興趣的小夥伴能夠去了解一下，大多數內容仍是挺通俗易懂的：

• www.zhihu.com/question/32…

我在下載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++來編寫的，性能很不錯。

參考資料：

• zhuanlan.zhihu.com/p/27628685
• 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）：

• 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歸屬在後端仍是前端？

看得不過癮？推薦一下我認爲不錯的文章和資料：

• segmentfault.com/a/119000000…
• www.zhihu.com/question/26…
• cnodejs.org/topic/565eb…
• github.com/yalishizhud…

樂於輸出乾貨的Java技術公衆號：Java3y。公衆號內有200多篇原創技術文章、海量視頻資源、精美腦圖，關注便可獲取！

以爲個人文章寫得不錯，點贊！