本文探究如何在傳統後端開發的基礎上進一步實作前後端分離 （配套 項目 + Webpack多頁面應用腳手架）
一、前言
目前主流開發有大前端和傳統後端開發
1. 大前端開發
遵循RESTful Api，實作前後端分離。前端負責資料渲染、路由跳轉和權限等，并需要SEO（搜尋引擎優化）；後端提供接口。
2. 傳統後端開發
采用後端模闆渲染， 不需要SEO。往往需要前端人員傳遞靜态頁面後，後端人員才能完全展開工作。
二、更進一步
進一步前後端分離，主要點在于模闆頁面
将模闆頁面也劃分給前端人員，後端人員隻需關注伺服器端開發。
（1）制定後端模闆規則
要在伺服器端模闆渲染的情況下，進行前後端分離，主要問題在于靜态頁面中的模闆變量。将頁面完全傳遞于前端人員開發，那麼後端人員需自定義一套容易讓前端人員接受的模闆變量文法，前端人員在完成靜态頁面後直接使用模闆變量占位符、邏輯判斷和循環等進行改造。
這裡使用Beetl後端模闆引擎，并自定義規則，使其文法類似于前端模闆EJS。
（2）Webpack多頁面應用腳手架
針對頁面中有模闆變量占位符、邏輯判斷和循環等不被浏覽器編譯的字元串（将其作為字元串，在打包時候加入頁面中），搭建Webpack多頁面應用腳手架來配合前端打包生成到後端項目中。将Webpack作為後端項目的一個子項目，如下圖所示。下圖是Webpack多頁面應用腳手架 目錄圖
教練，模闆頁面也交給我ba 打包生成到後端項目中檔案目錄圖（JavaEE 後端），如下。
教練，模闆頁面也交給我ba 教練，模闆頁面也交給我ba
（3）Mock Server
如何前端如何校驗所寫的模闆頁面呢？
模拟後端搭建一個簡易的伺服器，比如mock server。因為是配合後端，是以要模拟後端的運作環境，那就需實作以下幾點：
1. 能渲染模闆，即有對應的模闆引擎；
2. 實作路由請求映射；
3. 能擷取請求中的資料并進行回報。請求得渲染頁面的過程如圖5.5所示。Mock server不僅能配合前端進行開發，也能用于測試時自動化測試。
請求過程如下圖所示。
三、小結
以上在後端模闆渲染下實作前後端分離的關鍵點，同時也是技術難點。雖打通一條窄窄的小路，但仍有很多未知難點和因素。一個已知的操作難點是，前端人員需學習後端模闆規則。前後端對接方面，大前端前後端憑借定義json接口進行對接，然而後端模闆渲染并不能僅憑json接口對接。
在搭建Webpack和梳理開發模式理念的時候，借鑒了業界很多前輩的觀點和思路。在搭建Webpack借鑒了較多的開源架構，然而仍是步步坑，一步步填，最後搭建了适應本系統的多頁面應用腳手架。
在此基礎上又引人深思，能否結合大前端和傳統後端開發的優點形成一種混合形式呢？在需要SEO的情況下使用後端模闆渲染，而異步加載的情況下課選擇前端模闆渲染，那麼就能憑此再近一步進行職責劃分，并針對業務需求進行模闆擇優選擇，進而實作在降低技術難點和減少消耗時間同時提升性能。
本文提及的 Webpack多頁面應用腳手架 和 小項目 ， Have Fun (#^.^#)~
PS：關于Vue或者其他前端架構的SSR（伺服器端渲染）
貌似大部分隻為首屏渲染。