一、為什么需要前后端分離
1.1什么是前后端分離
前后端分離這個詞剛在畢業（15年）那會就聽說過，但是直到17年前都沒有接觸過前后端分離的項目。怎么理解前后端分離？直觀的感覺就是前后端分開去做，即功能和職責上的一種划分，前端負責頁面的渲染，部分頁面交互的邏輯，然后通過網絡請求與后端進行數據的交互；后端則着重關注業務邏輯的處理，直接操控數據庫。
1.2前后端未分離前
（1）jsp + servlet 開發模式:
JSP頁面：負責視圖層的渲染及交互，內部可以嵌入java 代碼，在某些場景下開發起來比較方便，但是這種頁面和java代碼混合開發的方式造成邏輯不夠直觀，項目代碼維護起來困難。
Servlet類: 負責接收from表單提交的參數，進行業務層邏輯和頁面導航的處理。但是這種方式需要區分請求的方式，手動把請求的參數拿出來進行封裝。基本上一個請求對應一個servlet，需要在web.xml文件中配置urL映射或者注解的方式。
大體流程：
編寫JSP頁面，引入java常用類庫和JSTL標簽庫，編寫HTML表單，CSS，javascript。
編寫Servlet 方法，重寫service()方法，需要手動獲取請求參數，然后業務邏輯處理。
配置web.xml。在web.xml文件中注冊servlet，配置請求映射(簡單方法：增加注冊)。
（2）jsp + spring mvc開發模式：spring 框架流行起來后，着重關注的是分層設計，即MVC的概念，個人認為jsp+spring 帶來的最大好處是簡化了之前servlet時代編寫web流程的復雜度，各種注解、各種參數自動注入極大提高了java web的開發效率，此時對Jsp頁面有一個共同的約束，即JSP頁面不要在嵌入除標簽外的java代碼，這樣初步把視圖層抽出來。但是這種方式的約束性依然很大，即應用強依賴於java生態。
大體流程：
搭建spring 框架，在web.xml中配置spring mvc的分發器。
編寫jsp頁面，利用各種Jquery插件和前端css框架，也能做出漂亮的交互界面。
編寫spring controller,只需要幾個注解即可和表單的請求匹配，web請求的參數能夠自動注入到controller請求的方法，一個controller可以匹配n多個請求。其中controller可以分為兩種，一種是返回頁面路徑的controller，這個controller可以攜帶Java對象到頁面；另外一種是返回特定格式的json，常用的是json.
（3）模板+spring boot:
spring boot是spirng的一個腳手架，能夠快速搭建spring項目，使用默認配置減少開發者手動的配置，與第三發包的各種整。模板相對於jsp頁面來說，進一步進行視圖層的模塊化，即可以按照頁面的結構進行划分，常用的例如Header,footer,Silder Menu, Center Conter這樣的版塊接口進行划分，把頁面進行分片處理，提高代碼的復用度。
模塊划分如下：
1.3前后端分離后
從上面可以看到java web生態系統不斷的完善和加強，對於絕大多少web系統的開發來說足夠了，那為什么要搞前后端分離？個人認為有以下幾個原因：一個是職責划分需要，頁面開發和業務邏輯開發並行進行來縮短開發周期。二是術業有專攻，隨着頁面的交互、UI要求不斷提升，前端同學在頁面方面的開發更具有專業性。三是前端具有強大的生態系統，有許多現成的組件和框架可以進行大項目的模塊化開發，正則意義上實現交互和邏輯的邏輯和物理上的完全分離。
前端項目+后台接口
1.4前后端分離的優點與缺點
優點：
對於中大型項目，能夠提升開發效率，提高交互和UI效果，縮短開發周期。
前端能夠處理一大部分驗證和交互邏輯，從而減少與服務器間的交互次數，減小服務器處理壓力，並且頁面是由瀏覽器渲染生成。
前端具有強大的組件庫和處理工具，項目更容易跨平台。
降低維護成本。
接口和前端組件能夠復用。
缺點：
需要更多的溝通成本。未進行前后端分離時，由后端同學完成整個項目的開發，前后端分離時需要和前端同學進行接口的溝通和聯調。
對於小、交互性要求不高的項目，進行前后端分離反而效率較低，當然全棧開發除外。
部署流程更復雜。前后端分離一般是兩個項目環境，需要投入更多硬件和運維。
二、前后端分離步驟
2.1 分離前的業務功能划分
職責划分：當從非前后端分離的項目轉到前后端分離的項目，如何確認分離的切入點？首選需要理解前后端的職責，即前端負責頁面構建和交互處理，后端負責接口定義和業務處理。所有頁面上能看到的功能基本都是前端的，所有涉及數據的查詢、保存都是后端的，前端不需要關心數據的輸入和輸出，而關注數據在這個過程中的交互邏輯；后端需要關心頁面如何渲染和交互，而關注輸出數據和接收數據。從上面可以看出職責即是功能的划分。
模塊划分：前后端模塊划分關注點不同。后端模塊划分時一般有兩種方式，第一種是先分層，再按照模塊划分。即先按照全局、工具、控制層、服務層、數據操作層等這種基於MVC的結構進行划分，然后再將控制層、服務層、數據操作層按照業務模塊進行划分。第二種方式按先模塊后結構進行划分，即先按照業務模塊划分不同的結構，然后每個模塊根據需要決定是否進行MVC結構的划分。第一種更適用於中小型項目的構建，第二種更適用於大型項目，能夠對按照業務垂直划分結構，方便部署和擴展。
前端模塊划分基本基於功能的層次結構。第一層一般是全局配置、靜態資源、工具類、視圖、組件並列的結構，第二層是組件的復合結構和視圖的復合結構，第三層是組件的獨立結構。
2.2 前端需要了解的知識點
在進行前后端分離之前需要普及一下前端相關的知識。如下：
javascript：
基本概念：JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。它由ECMAScript(描述該語言的語法和基本對象)、文檔對象模型(DOM,描述處理網頁內容的方法和接口)、瀏覽器對象模型(BOM,描述與瀏覽器進行交互的方法和接口)三部分構成。
生態：這里說的生態即簡單介紹一下JS能夠做些什么。數據可視化，例如D3.js、百度的Echars;移動端應用，例如Cordova、DeviceOne,能夠一次開發多平台發布。服務端：Node.js,常用的框架有Express;桌面應用：NW.js和Electron，他們可以使用HTML和javascript開發桌面一個應用，而且一次開發，多平台運行。其它的還有游戲(WebGL)、AR、VR的應用支持。
MVVM:MVVM是Model-View-ViewModel的縮寫。這個可以和MVC進行對比一下。MVC如下：
MVVM如下：
這里可以看到相對於MVC，MVVM多了一個ViewModel的概念。在前端頁面中，把Model用純Javascript對象表示，View 負責顯示，兩者做到了最大限度的分離。把Model和View關聯起來就是ViewModel。ViewModel負責吧Model的數據同步到View顯示出來，還負責把View的修改同步到Model。想象一下傳統的MVC開發web應用的流程？
Vue: vue 是一個MVVM的漸進式框架，被設計可以自定向上逐層應用。Vue核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或已有項目整合。
Node: Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統。
ES6: es6的全名是ECMAscript 2015。ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標准，已經在2015年6月正式發布了。它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。
Node Express 框架: Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你創建各種 Web 應用，和豐富的 HTTP 工具。使用 Express 可以快速地搭建一個完整功能的網站。Express 框架核心特性：(1)可以設置中間件來響應 HTTP 請求。(2)定義了路由表用於執行不同的 HTTP 請求動作。(3)可以通過向模板傳遞參數來動態渲染 HTML 頁面。
IView: IView 是一個基於Vue 的第三方組件庫，包含了后台開發過程中最基本的組件，組件代碼比較簡潔，文檔和示例比較全。
IView Admin: 一個GitHub開源項目，是基於IView 基礎組件構建的一個后台管理系統，包含了最基本的路由、狀態管理、權限等后台系統共有的功能，可基於此系統進行后台的訂制開發。
2.3 前后端分離項目開發流程
前后端分離的項目開發過程中最重要的就是接口文檔的編寫，它是前后端交互的門戶。
2.4 前端開發方法
了解腳手架(CLI)：腳手架的意思是幫你快速開始一個vue的項目，也就是給你一套vue的結構，包含基礎的依賴庫，只需要 npm install就可以安裝，讓我們不需要為了編輯或者一些其他事情浪費時間 總而言之，就是快速搭建項目的，讓我們可以早點去寫代碼。Vue 官網提供了相應的CLI工具，幫助我們快速搭建項目。
了解構建工具：這里介紹一下webpack。前端項目開發是使用Vue基於組件方式進行的，但是運行時需要生成瀏覽器可以理解的js、css、html文件，那這兩中文件形式的轉換就是webpack的作用，它打包所有資源、打包所有腳本、打包所有圖片、打包所有樣式。
基本插件：Babel: 他是一種用途很多的javascript編譯器，他把最新版的javascript編譯成當下可以執行的版本，簡言之，利用babel就可以讓我們在當前的項目中隨意的使用這些新最新的es6，甚至es7的語法。ESLint: ESLint 是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。
組件設計：
什么是組件？從代碼層面來說一個.vue文件就是一個組件，從功能層面來說組件應該是一個可以復用的功能。組件的特點是當一個組件設計完畢后，后續需要類似的功能，只需要簡單的引用組件，然后做些定制化的配置即可。個人理解組件可以划分兩大類，第一類是基礎組件/原子組件，這類組件是頁面的基礎構成不封，本身不可或者不宜再划分為子組件，例如Button,Table,這類都算是基礎組件，IView基本上是一個基礎組件庫。第二類是復合組件/框架性組件，這類組件是由基本組件經過合理的布局聚合在一起構成的，它擁有許多默認的配置，從而在類似的頁面視圖頁面能夠極大的減小重復代碼。
設計原則：（1）基本思想是組件應該是於業務無關的。設計組件時不應該有任何具體業務邏輯因素的影響。（2）組件時復用代碼和視圖的抽象，多關注不同的頁面，找出共同的接口和不同的特效，抽象出公用的部分。（3）組件應該足夠靈活，后續功能特效的新增，不應該對原有引用組件的地方構成影響。
實例分析（復合組件）：
2.5 前后端交互
保證前后端開發功能的正確性除了詳細的需求文檔和原型設計外，重要的就是接口文檔。接口文檔描述了前后端數據交互的方法、格式。前后端項目分離后，許多之前后端需要處理的工作，都將由前端處理，主要涉及以下：頁面的導航功能，即Vue Router、組件之間公共信息的保存，即Vuex，服務器數據資源的請求，即axios，其它的比較主要的就是權限、安全。
路由：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：(1)嵌套的路由/視圖表;
(2)模塊化的、基於組件的路由配置;(3)路由參數、查詢、通配符;(4)基於 Vue.js 過渡系統的視圖過渡效果;(5)細粒度的導航控制;(6)帶有自動激活的 CSS class 的鏈接
狀態：Vuex是一個專為Vue.js應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化.多個視圖依賴於同一狀態。為什么需要它？在開發應用中組件之間需要進行信息交流，父組件通過Props屬性注入數據，子組件通過感受數據的變化進行相應的邏輯相應。子組件通過自定義事件的方式告知父組件數據發生變化。但是這兩種方式只合適對於嵌套層次不深的組件，並且對於兄弟組件間的狀態傳遞無能為力。因此，我們為什么不把組件的共享狀態抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態或者觸發行為！
資源：這里所說的資源主要是指數據資源，即決定前端是否有權限去訪問數據資源，一般采用攜帶token的方式保證資源的安全性。后端采用自定義token策略或者標准的OAuth 認證策略。
權限：前后端分離后，后端主要控制資源的權限，前端控制頁面的權限。權限控制可以分為兩大類，第一類是視圖權限，即不同的用戶只能看到自己改看到的東西，這個細分為菜單權限和按鈕權限，菜單權限限制了用戶看到的頁面；按鈕權限限制了用戶在頁面能夠進行的操作。第二類是資源權限：即用戶是否用訪問數據資源的權限，這類權限在后台項目中不常見。
菜單權限的實現方法：第一種由前端維護菜單權限，即前端擁有所有的菜單映射，當用戶登錄后，根據用戶的角色對菜單權限進行刷選，類似數據庫表和視圖的關系，這種方式開發成本較低，能夠滿足絕大多數對權限變動頻率低的系統，缺點是有一定的維護成本，功能不夠靈活。第二種是由后端決定菜單權限，即用戶登錄成功后，菜單樹由后端生成直接返回，這樣做是足夠靈活，但是開發、溝通需要付出更多的時間。第三種是混合開發：即靜態權限和動態權限相結合。很多后台系統有一部分菜單是角色公共的后者基本固定角色的，這部分菜單應該由前端預選定義好，對於變動較多的菜單，由后端返回必要信息，進行簡單拼接即可。這種方式的工作量介於第一種和第二種之間。
按鈕權限：按鈕權限一般通過自定義指令實現，即自定義Vue權限指令，根據傳入的角色決定按鈕是否顯示。但是這種只適用於頁面有表單組件的頁面，對於需要動態生成的組件頁面，需要提供一個全局權限查詢方法。
2.5 前端項目部署
部署方式：前后端分離的項目一般有兩種部署方式。第一種是通過build命令將項目打包成靜態資源，然后copy靜態資源到后端項目的靜態目前下，然后通過tomcat服務器進行啟動即可，這種方式不推薦。第二種方式是前后端分別部署，前端項目可以使用node 啟動一個服務，運行在Node環境中，后端部署在tomcat中，這種方式方便前后端各自水平擴展。