前言
隨着公司技術革新，Node.js逐漸應用在新技術體系中，從2009年發佈至今Node.js逐漸成熟和日趨穩定。一般的做法都是將原本屬於後端的一部分相對於業務不是很重要的功能遷移到Node.js上面來，也有一些公司將Node.js作爲前後端分離的一個解決方案去施行。國內最早淘寶網完成了前後端分離，也提供了一個很大的開發導向。
前端分離之前生今世
在最初的web開發中，行業主要將瀏覽器作爲前後端的分界線，將瀏覽器中爲用戶進行頁面展示的部分稱之爲前端，而將運行在服務器，爲前端提供業務邏輯和數據準備的所有代碼統稱爲後端。
由於前後端分離這個概念相對比較年輕，很多程序猿都是隻聞其聲，不見其形，所以可能對它產生一些誤解，誤以爲前後端只是一種web開發模式，只是在web開發期進行了前後端開發工作的分工就是前後端分離。
前後端分離不只是開發模式，而是web開發的一種架構模式。在開發階段，前後端工程師約定好數據交互接口，實現並行開發和測試。在運行階段前後端分離模式需要對web應用進行分離部署，前後端之前使用HTTP或者其他協議進行交互請求。然而作爲一種架構模式，我們在實施的過程中主要對以下四個方面來進行比較和重新認識。
前後端分離大概可以從四個方面來理解：
- 交互形式
- 代碼組織方式
- 開發模式
- 數據接口規範流程
一、交互形式
在前後端分離架構中，後端只需要負責按照約定的數據格式向前端提供可調用的API服務即可。前後端之間通過HTTP請求進行交互，前端獲取到數據後，進行頁面的組裝和渲染，最終返回給瀏覽器。
二、代碼組織方式
在傳統架構模式中，前後端代碼存放於同一個代碼庫中，甚至是同一工程目錄下。頁面中還夾雜着後端代碼。前後端工程師進行開發時，都必須把整個項目導入到開發工具中。
而前後端分離模式在代碼組織形式上有以下兩種:
(1) 半分離
前後端共用一個代碼庫，但是代碼分別存放在兩個工程中。後端不關心或很少 關心前端元素的輸出情況，前端不能獨立進行開發和測試，項目中缺乏前後端 交互的測試用例。
(2)分離
前後端代碼庫分離，前端代碼中有可以進行Mock測試(通過構造虛擬測試對象以簡化測試環境的方法)的僞後端，能支持前端的獨立開發和測試。而後端代碼中除了功能實現外，還有着詳細的測試用例，以保證API的可用性，降低集成風險。
三、開發模式
我們之前的架構屬於傳統的MVC架構，整體沒有進行前後端分離，在項目的開發階段，前端工程師負責編寫HTML，完成前端的頁面設計並套頁面，然後再使用模板技術將寫好的前端代碼轉換爲Smarty腳本，同時內嵌一些後端提供的模板變量和一些邏輯操作。應用運行期，將全部代碼進行打包，和後端代碼部署到同一服務器上，同時會進行簡單的動靜態分離部署。
應用的開發流程:
提出需求 —> 前端開發頁面 —> 翻譯成模板 —> 前後端對接 —> 集成遇到問題 —> 前端返工 —> 後端返工 —> 二次集成 —> 集成成功 —> 交付上線
前後端分離之後，則變成如下流程：
提出需求 —> 設計接口約定數據 —> 前後端並行開發 —> 前後端集成 —> 前端調整頁面 —> 集成成功 —> 交付上線
四、數據接口規範流程
在開發期間前後端共同商定好數據接口的交互形式和數據格式。然後實現前後端的並行開發，其中前端工程師再開發完成之後可以獨自進行mock測試，而後端也可以使用接口測試平臺進行接口自測，然後前後端一起進行功能聯調並校驗格式，最終進行自動化測試。
需要進行前後端分離的場景
任何一項技術以及架構都不是適用於任何場景，前後端分離同樣也是如此。雖然前後端分離架構能帶來許多的好處，但前提是建立在開發團隊合適的基礎上的。
試用場景：
- 頁面佈局複雜，使用了主題和樣式。
- 需要有較高的頁面渲染效果
- 前端頁面中包含複雜業務邏輯
- 頁面需要渲染的數據量較大
如何做到前後端分離
前端的技術框架是: vue全家桶 + Node.js + Express
首先，先分清楚前後端的工作:
前端的工作：實現整一個前端頁面以及交互邏輯，以及利用ajax與nodejs服務器（中間層)交互。
後端的工作：提供API接口，利用redis來管理session,與數據庫交互。
- 一般來說，要實現前後端分離，前端就需要開啓一個本地的服務器來運行自
己的前端代碼，以此來模擬真實的線上環境，並且，也是爲了更好的開發。因爲你在實際開發中，你不可能要求每一個前端都去搭建一個java(php)環境，並且在java環境下開發，這對於前端來說，學習成本太高了。但如果本地沒有開啓服務器的話，不僅無法模擬線上的環境，而且還面臨到了跨域的問題，因爲你如果寫靜態的html頁面，直接在文件目錄下打開的話，你是無法發出ajax請求的(瀏覽器跨域的限制),因此，你需要在本地運行一個服務器，可是又不想搭建陌生而龐大的java環境，怎麼辦法呢？nodejs正好解決了這個問題。在我們項目中，我們利用nodejs的express框架來開啓一個本地的服務器，然後利用nodejs的一個http-proxy-middleware插件將客戶端發往nodejs的請求轉發給真正的服務器，讓nodejs作爲一箇中間層。這樣，前端就可以無憂無慮的開發了 - 由於前後端分離後，前端和後臺同時開發時，就可能遇到前端已經開發好一個頁面了，可是卻等待後臺API接口的情況。比如說A是負責前端，B是負責後臺 , A可能用了一週做好了基本的結構，並且需要API接口聯調後，才能繼續開發，而此時B卻還沒有實現好所需要的接口，這種情況，怎麼辦呢？在我們這個項目裏，我們是通過了mock來提供一些假數據，我們先規定好了API接口，設計出了一套API文檔，然後我們就可以通過API文檔，利用mock(http://mockjs.com)來返回一些假數據，這樣就可以模擬發送API到接受響應的整一個過程，因此前端也不需要依賴於後端開發了，可以獨立開發，等到後臺的API全部設計完之後，就可以比較快速的聯調。
爲什麼要引入Node.js作爲中間層?
在這個項目裏，我們將Node.js作爲中間層，那麼，爲什麼我們要特地引入Node.js呢？直接用java做不就行了嗎？
• 我覺得引入Node.js主要是爲了分層開發，職責劃分，Node.js作爲前端服務器，由前端開發人員負責，前端開發人員不需要知道java後臺是如何實現的，也不需要知道API接口是如何實現的，我們只需要關心我們前端的開發工作，並且管理好Node.js前端服務器，而後臺開發人員也不需要考慮如何前端是如何部署的，他只需要做好自己擅長的部分，提供好API接口就可以；
• Node.js本身有着獨特的異步、非阻塞I/O的特點，這也就意味着他特別適合I/O密集型操作，在處理併發量比較大的請求上能力比較強，因此，利用它來充當前端服務器，向客戶端提供靜態文件以及響應客戶端的請求，我覺得這是一個很不錯的選擇。