前言

只有光頭才能變強。

文字已收錄至我的GitHub倉庫,歡迎Star:https://github.com/ZhongFuCheng3y/3y

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

(我沒正正式式寫過前端,所以如果文章有錯的地方希望可以在評論區友善交流~)

一、交代背景

我一直都知道我現在的這個系統是前後端分離的,我的介面只會返回JSON出去,但我不曾關心前端是怎麼處理我的JSON資料的(以及他是怎麼跑通和執行的)

在某一天,我在查介面的時候,習慣F12,想直接看一下這個請求返回的JSON資料是什麼。但是一看,在network返回的是html格式:

於是,我就很好奇啊,就看一下這個介面是不是我想象中的那個。於是就去找我的介面,看一下是不是真的返回JSON(我還專門Debug了一下,看看是不是真請求到這個介面上了):

得出的結果是:我的介面的確是返回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原始碼轉成抽象語法樹,然後再將抽象語法樹生成位元組碼。如果發現某個函式被多次呼叫或者是多次呼叫的迴圈體(熱點程式碼),那就會將這部分的程式碼編譯優化。說白了就是:對熱點程式碼做編譯,非熱點程式碼直接解析。

總結: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。

三、前後端分離入門

回顧一下自己學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上開發的[email protected]知乎陳龍

舉個例子:隨著發展,前端的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歸屬在後端還是前端?

看得不過癮?推薦一下我認為不錯的文章和資料:

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

樂於輸出乾貨的Java技術公眾號:Java3y。公眾號內有200多篇原創技術文章、海量視訊資源、精美腦圖,關注即可獲取!

覺得我的文章寫得不錯,點贊