關於前後端分離的實例教程

起源

公司隨著開發人員的增多，專案數量的增加，前後端溝通的成本不斷增加。原有的項目前後端未分離，作為前端還需要對PHP等後端語言有所了解，這極大增加了前端開發的學習成本，特別是遇到數據庫的報錯，不明所以，花費大量的時間去解決。因此，根據我們目前的業務需要，我們從一些新的專案中開始嘗試進行前後端的分離。

目標

1）程式碼分離。前後端程式碼使用獨立的專案目錄進行分離，前端開發環境不需要配置PHP或Java環境，全部改用Git管理專案程式碼。

2）開發流程改進。開發流程將會分為local【本地開發】，dev【前後端聯調】，beta【QA測試】和prod【線上發布】。

工具

Nodejs

Webpack

Command pad

HostProfiles

Git

Sftp

方法論

1）確定需求，設計介面。

在整個開發流程中，當確定了需求和設計之後，前端和後端要先對介面進行設計，確定對應介面的參數和傳回資料的JSON結構，然後獨立進行開發。

 

2）本地開發

本地開發環境的建構可以藉助Grunt，Gulp，以及Webpack等來搭建，我們通常是採用Webpack來實現，因為Webpack能夠支援模組化，對React、VUE等開發支援度比較好，社群熱度也比較高，遇到問題可以比較快速的解決。使用Webpack和Webpack-dev-server可以快速的建立一個本地服務，支援程式碼的熱載入刷新。當然簡單的服務你可以透過express來搭建。

這時候我們通常會使用Command Pad來管理命令列，例如常用的npm start，或是npm run dist 等等，方便快速。

圖片資源是統一目錄進行管理，提前部署到七牛上面去。

本地開發將使用mock資料的方法，來進行介面的模擬，進行頁面邏輯的開發。在一部分存在jquery的專案中我們使用了jquery.mockjax.js 作為mock工具。通常會建立一個api目錄，集中管理所有的介面數據，透過一個index.js來統一載入和屏蔽。

 

3）前後端聯調

前後端分離之後，前後端資料的聯調就會非常的簡單高效，只需要各自將程式碼部署到DEV伺服器上，然後使用chrome提供的開發工具進行調試即可。調試過程中如果遇到問題，可以隨時進行修改和提交。前端將不依賴後端的開發環境，即便DEV環境出現問題，後端也可以及時的進行處理，分工明確。特別是引進了Docker之後，我們可以方便的創建多個DEV開發環境，這樣即便出現多人同事開發一個項目，也不會互相影響DEV的聯調。

在發布程式碼的時候，引入了Sublime Text的插件sftp，來直接將本地編譯好的程式碼推送到DEV伺服器上，全程速度飛起。

 

4）QA測試

進入QA的測試階段，幾乎和聯調階段類似，只不過是提供了一個類似線上的環境，單獨提供給測試使用的。

 

5）在線上發布

發布之前需要進行程式碼的壓縮的打包，也是藉助Webpack完成的。值的提到的是當線上出現bug的時候，我們需要將線上的程式碼對應到本機進行偵錯，用到了HostProfiles 和 nginx。借助git的分支功能，建立hotfix分支進行處理。

 

這是一個簡單的前後端分離的方案，只是針對公司現有的專案情況提出的解決方案，當然還有很多地方可以改進。例如淘寶提出的中途島計劃，增加nodejs的中間層進行模板渲染和業務處理。

以上是關於前後端分離的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！