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

前言

隻有光頭才能變強。

文本已收錄至我的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上開發的---@知乎陳龍

舉個例子：随着發展，前端的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多篇原創技術文章、海量視訊資源、精美腦圖，關注即可擷取！

覺得我的文章寫得不錯，點贊！

更多的文章可往：文章的目錄導航