一、為什么需要前后端分離
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中，這種方式方便前后端各自水平擴展，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/95134.html
標籤：PHP