關于前后端分離的實例教程

起源

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

目標

1）代碼分離。前后端代碼使用獨立的項目目錄進行分離，前端開發(fā)環(huán)境不需要配置PHP或者Java環(huán)境，全部改用Git管理項目代碼。2）開發(fā)流程改進。開發(fā)流程將會分為local【本地開發(fā)】，dev【前后端聯(lián)調(diào)】，beta【QA測試】和prod【線上發(fā)布】。

工具

NodejsWebpackCommand padHostProfilesGitSftp

方法論

1）確定需求，設計接口。在整個開發(fā)流程中，當確定了需求和設計之后，前端和后端要先對接口進行設計，確定對應接口的參數(shù)和返回數(shù)據(jù)的JSON結(jié)構(gòu)，然后獨立進行開發(fā)。 2）本地開發(fā)本地開發(fā)環(huán)境的構(gòu)建可以借助Grunt，Gulp，以及Webpack等來搭建，我們通常是采用Webpack來實現(xiàn)，因為Webpack能夠支持模塊化，對React、VUE等開發(fā)支持度比較好，社區(qū)熱度也比較高，遇到問題可以比較快的解決。使用Webpack和Webpack-dev-server可以快速的搭建一個本地服務，支持代碼的熱加載刷新。當然簡單的服務你可以通過express來搭建。這個時候我們通常使用Command Pad來管理命令行，比如常用的npm start，或者npm run dist 等等，方便快捷。圖片資源是統(tǒng)一目錄進行管理，提前進行部署到七牛上面去。本地開發(fā)將使用mock數(shù)據(jù)的方法，來進行接口的模擬，進行頁面邏輯的開發(fā)。在一部分存在jquery的項目中我們使用了jquery.mockjax.js 作為mock工具。通常會創(chuàng)建一個api目錄，集中管理所有的接口數(shù)據(jù)，通過一個index.js來統(tǒng)一加載和屏蔽。 3）前后端聯(lián)調(diào)前后端分離之后，前后端數(shù)據(jù)的聯(lián)調(diào)就會非常的簡單高效，只需要各自將代碼部署到DEV服務器上，然后使用chrome提供的開發(fā)工具進行調(diào)試即可。調(diào)試過程中如果遇到問題，可以隨時進行修改和提交。前端將不依賴后端的開發(fā)環(huán)境，即便DEV環(huán)境出現(xiàn)問題，后端也可以及時的進行處理，分工明確。特別是引入了Docker之后，我們可以方便的創(chuàng)建多個DEV開發(fā)環(huán)境，這樣即便出現(xiàn)多人同事開發(fā)一個項目，也不會互相影響DEV的聯(lián)調(diào)。在發(fā)布代碼的時候，引入了Sublime Text的插件sftp，來直接將本地編譯好的代碼推送到DEV服務器上，全程速度飛起。 4）QA測試進入QA的測試階段，幾乎和聯(lián)調(diào)階段類似，只不過是提供了一個類似于線上的環(huán)境，單獨提供給測試使用的。 5）線上發(fā)布發(fā)布之前需要進行代碼的壓縮的打包，也是借助Webpack完成的。值的提到的是當線上出現(xiàn)bug的時候，我們需要將線上的代碼映射到本地進行調(diào)試，用到了HostProfiles 和 nginx。借助git的分支功能，創(chuàng)建hotfix分支進行處理。 這是一個簡單的前后端分離的方案，只是針對公司現(xiàn)有的項目情況提出的解決方案，當然還有很多地方可以改進。比如淘寶提出的中途島計劃，增加nodejs的中間層進行模板渲染和業(yè)務處理。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com