1、爲何須要先後端分離javascript
1.1什麼是先後端分離
先後端分離這個詞剛在畢業（15年）那會就據說過，可是直到17年前都沒有接觸過先後端分離的項目。怎麼理解先後端分離？直觀的感受就是先後端分開去作，即功能和職責上的一種劃分，前端負責頁面的渲染，部分頁面交互的邏輯，而後經過網絡請求與後端進行數據的交互；後端則着重關注業務邏輯的處理，直接操控數據庫。css
1.2先後端未分離前
（1）jsp + servlet 開發模式:html
JSP頁面：負責視圖層的渲染及交互，內部能夠嵌入java 代碼，在某些場景下開發起來比較方便，可是這種頁面和java代碼混合開發的方式形成邏輯不夠直觀，項目代碼維護起來困難。前端
Servlet類: 負責接收from表單提交的參數，進行業務層邏輯和頁面導航的處理。可是這種方式須要區分請求的方式，手動把請求的參數拿出來進行封裝。基本上一個請求對應一個servlet，須要在web.xml文件中配置urL映射或者註解的方式。vue
大致流程：java
編寫JSP頁面，引入java經常使用類庫和JSTL標籤庫，編寫HTML表單，CSS，javascript。
編寫Servlet 方法，重寫service()方法，須要手動獲取請求參數，而後業務邏輯處理。
配置web.xml。在web.xml文件中註冊servlet，配置請求映射(簡單方法：增長註冊)。
node
（2）jsp + spring mvc開發模式：spring 框架流行起來後，着重關注的是分層設計，即MVC的概念，我的認爲jsp+spring 帶來的最大好處是簡化了以前servlet時代編寫web流程的複雜度，各類註解、各類參數自動注入極大提升了java web的開發效率，此時對Jsp頁面有一個共同的約束，即JSP頁面不要在嵌入除標籤外的java代碼，這樣初步把視圖層抽出來。可是這種方式的約束性依然很大，即應用強依賴於java生態。webpack
大致流程：ios
搭建spring 框架，在web.xml中配置spring mvc的分發器。
編寫jsp頁面，利用各類Jquery插件和前端css框架，也能作出漂亮的交互界面。
編寫spring controller,只須要幾個註解便可和表單的請求匹配，web請求的參數可以自動注入到controller請求的方法，一個controller能夠匹配n多個請求。其中controller能夠分爲兩種，一種是返回頁面路徑的controller，這個controller能夠攜帶Java對象到頁面；另一種是返回特定格式的json，經常使用的是json. es6
（3）模板+spring boot:
spring boot是spirng的一個腳手架，可以快速搭建spring項目，使用默認配置減小開發者手動的配置，與第三發包的各類整。模板相對於jsp頁面來講，進一步進行視圖層的模塊化，便可以按照頁面的結構進行劃分，經常使用的例如Header,footer,Silder Menu, Center Conter這樣的版塊接口進行劃分，把頁面進行分片處理，提升代碼的複用度。
模塊劃分以下：
1.3先後端分離後
從上面能夠看到java web生態系統不斷的完善和增強，對於絕大多少web系統的開發來講足夠了，那爲何要搞先後端分離？我的認爲有如下幾個緣由：一個是職責劃分須要，頁面開發和業務邏輯開發並行進行來縮短開發週期。二是術業有專攻，隨着頁面的交互、UI要求不斷提高，前端同窗在頁面方面的開發更具備專業性。三是前端具備強大的生態系統，有許多現成的組件和框架能夠進行大項目的模塊化開發，正則意義上實現交互和邏輯的邏輯和物理上的徹底分離。
前端項目+後臺接口
1.4先後端分離的優勢與缺點
優勢：
對於中大型項目，可以提高開發效率，提升交互和UI效果，縮短開發週期。
前端可以處理一大部分驗證和交互邏輯，從而減小與服務器間的交互次數，減少服務器處理壓力，而且頁面是由瀏覽器渲染生成。
前端具備強大的組件庫和處理工具，項目更容易跨平臺。
下降維護成本。
接口和前端組件可以複用。
缺點：
須要更多的溝通成本。未進行先後端分離時，由後端同窗完成整個項目的開發，先後端分離時須要和前端同窗進行接口的溝通和聯調。
對於小、交互性要求不高的項目，進行先後端分離反而效率較低，固然全棧開發除外。
部署流程更復雜。先後端分離通常是兩個項目環境，須要投入更多硬件和運維。
2、先後端分離步驟
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中，這種方式方便先後端各自水平擴展。