網絡公司做網站注重前后分離

網絡公司做網站注重前后分離，什么是前后端分離,傳統開發模式相信很多做過Web開發童鞋應該都會經歷這樣一種開發模式，利用后端語言提供的模版引擎編寫HTML／XML頁面，比如：<br /> <br /> PHP 開發有 Smarty模板引擎<br /> <br /> Java web工程有jsp頁面<br /> <br /> Python 各個Web框架都有各自的模板引擎<br /> <br /> NodeJS 的express你懂得<br /> <br /> 都有一個共同的特點，服務器端后臺語言生成解析后的HTML/XML格式返回給客戶端，例如瀏覽器端訪問直接返回解析好的HTML，瀏覽器直接就解釋執行。<br /> <br /> 在傳統的像ASP，JSP和PHP等開發模式中，前端是處在一個混沌的狀態中，可以說是沒有獨立的“人格”可言。<br /> <br /> 前端負責切圖和編寫靜態頁面模板，后端將數據渲染到前端提供的頁面模板中，最后將頁面渲染到瀏覽器展示。<br /> <br /> 這個過程中，前端只提供頁面模板或者寫一些JavaScript腳本，有的甚至JS腳本都是后端來寫，前端的作用只局限于切圖和樣式模板文件，這種角色就是傳說中的“切圖仔”。<br /> <br /> 前后端分離，不只是簡單的代碼的分離。<br /> <br /> 首先是要架構上分離解耦，逐漸擺脫前后端在架構上的依賴，前后端各司其職，分開部署在不同的服務器上，通過RESTful接口傳遞數據。減輕后端服務器的壓力，后端服務器不再負責頁面渲染，只負責輸入數據，吞吐量提升了好幾倍。<br /> <br /> 其次是邏輯分離，不分離的時候，對于業務代碼的界限很不明確，業務邏輯基本都放在后端，分離之后，前端也承擔了一部分不該后端來寫的業務邏輯，數據處理更加清晰。<br /> <br /> 最后是系統分離，同一個后端系統，可以將同樣的接口數據提供給PC端、Mobile端和Native端等不同的前端終端，不需要為每一種終端提供一套接口。同樣，對于前端應用來說，可以更方便的調用多個后端服務器的接口，處理和展示多個系統間的數據。<br /> <br /> 為什么要前后端分離<br /> 前后端分離，讓軟件開發的流程更加清晰，解決了開發階段的痛點。<br /> <br /> 從前，前端不止要學習后端的模板渲染語法，還要配置后端的開發環境，并不斷同步后端的代碼，這對于前端來說是非常痛苦的。<br /> <br /> 而現在，前端有自己的服務器，不需要再依靠后端服務器來支持項目運行，如果在開發階段，還可以使用mock數據（要先和后端確定接口數據結構），擺脫對后端接口的依賴，這樣極大的提高了開發效率，系統分工也更加明確。<br /> <br /> 前后端分離后，需要考慮哪些事情<br /> 分離后的前端，不再是一個簡單的HTML文件，已經是一個獨立的應用系統。除了要考慮頁面的數據渲染展示，還要用工程化的思想來考慮前端的架構，前后端的交互和數據安全等事情。<br /> <br /> 架構<br /> **前端應用部署在Nodejs、Nginx或者Nodejs和Nginx組合的服務器上，通過反向代理轉發頁面請求到后端服務器，相當于在傳統的流程中加了Nodejs這一層。**當然，也可以用Nodejs服務器來承擔一部分負載均衡的工作，業務邏輯也可以放在Nodejs這一層來處理，例如：通過判斷請求是來自 PC 還是 APP ，將請求發到不同的后端服務器<br /> <br /> Nodejs的架構中，分層如下<br /> <br /> 讓我們來回想一下軟件開發流程中的幾個關鍵環節：<br /> <br /> （1）產品經理提需求，畫原型；<br /> <br /> （2）UI設計師根據原型出設計圖；<br /> <br /> （3）測試團隊根據產品原型編寫測試用例，制定測試計劃；<br /> <br /> （4）架構師根據原型編寫API文檔；<br /> <br /> （5）前后端工程師基于API文檔完成業務開發；<br /> <br /> （6）測試、改BUG、發布。<br /> <br /> API文檔環節直接關系到了前端和后端兩個開發團隊，也是整個軟件開發流程中耗時最大的環節。<br /> <br /> RESTful接口交互<br /> 前后端分離之后，更多的是采用 RESTful 風格的接口與后端進行數據交互。（如果你們的項目還在使用靜態的API文檔，比如word文檔，那你們必定經歷著巨大的痛苦）<br /> <br /> REST是“呈現狀態轉移（REpresentational State Transfer）”的縮寫，一種API的架構風格，在客戶端和服務端之間通過呈現狀態的轉移來驅動應用狀態的演進。<br /> <br /> 在 REST 樣式的 Web 服務中，每個資源都有一個地址。資源本身都是方法調用的目標，方法列表對所有資源都是一樣的。這些方法都是標準方法，包括 HTTP GET、POST、PUT、DELETE，還可能包括 HEADER 和 OPTIONS。<br /> RESTful的API設計，使得后端通過接口向前端傳遞數據，數據的格式通常是JSON這種通用的格式。對前端來說，只要后端返回過來的是RESTful的數據就行，不管后端是用Java寫，還是用python或PHP，拜托對后端的依賴，做到前端系統的獨立。<br /> <br /> REST服務的調試：Postman 和 Insomnia<br /> <br /> 使用模板引擎<br /> 前后端分離之后，前端工程師需要將通過API獲取的數據呈現到頁面上，雖然也可以通過jQuery對頁面一個一個賦值，但是這種效率太低了，或者也可通過在JavaScript中拼接HTML，但是這種方式太難維護HTML代碼了，也很難閱讀。因此最好的方式就是使用模板引擎。<br /> <br /> 前端的模板引擎跟后端模板引擎很相似，比如JSP或cshtml（razor），他們的語法都非常相似，他們所實現的功能也幾乎一樣：將數據綁定到HTML模板。VueJs和react都可以充當這樣的模板引擎。我們最終沒有選用react而是選用了VueJs的原因只有一個，那就是VueJs是真正的響應式，而react改變model之后需要手工調用setState才會更新UI，這是完全無法忍受的。<br /> <br /> 因為這個原因，我們只能選擇VueJS作為模板引擎。<br /> <br /> 工程化構建<br /> Nodejs不止可以用來做前端服務器，在開發階段，它也能發揮很大的作用。<br /> 前端生態的發展，是圍繞著Nodejs進行的。用npm來管理項目依賴，可以很好的維護和運行在Nodejs環境上。<br /> 打包工具grunt、gulp、webpack和rollup等，都是運行在nodejs上，再結合語法編譯、打包部署等插件，將應用輸入成一個完整的應用。<br /> 如果你使用了Angular、React或Vue框架，或者你使用瀏覽器暫時還不兼容的ES6語法，還需要在應用打包前用babel將語法編譯成瀏覽器可識別的ES5的語法。<br /> <br /> SPA<br /> SPA是單頁Web應用（single page web application，SPA）的簡寫，就是只有一張Web頁面的應用，是加載單個HTML 頁面并在用戶與應用程序交互時動態更新該頁面的Web應用程序。<br /> <br /> 像Angular、React或Vue就是為了SPA而設計的，結合前端路由庫（react-router、vue-router）和狀態熱存儲（redux、vuex）等，可以開發出一個媲美Native APP的Web APP，用戶體驗得到了很大的提升。<br /> <br /> 當然，SPA也不是完美的，也不是適合所有的web應用，需要結合項目和場景來選擇。<br /> <br /> SPA有如下缺點：<br /> <br /> 初次加載耗時增加。可以通過代碼拆分、懶加載來提升性能，減少初次加載耗時。<br /> <br /> SEO不友好，現在可以通過 Prerender 或 Server render 來解決一部分。<br /> <br /> 頁面的前進和后端需要開發者自己寫，不過現在一些路由庫已經幫助我們基本解決了。<br /> <br /> 對開發者要求高，由于做SPA需要了解一整套技術棧，所以，要考慮后期是否有合適的人選進行維護。<br /> <br /> mock（模擬數據）<br /> 前后端分離框架中的API mock思路<br /> 想要實現真正的前后端分離，那就必須得用好API mock（模擬數據）。使用mock數據的好處有兩個：<br /> <br /> 前端開發人員可以基于API文檔生成mock數據，在后端開發人員將API發布出來之前就可以完成整個業務流程的開發；<br /> <br /> 使用mock數據能夠更低成本、更快速地，通過直接修改mock數據的方式，調試頁面樣式、調試頁面功能。<br /> <br /> 全局的mock開關<br /> 為什么要設置這樣一個全局的mock開關呢？主要基于以下兩點考慮：<br /> <br /> 設置全局的mock開關之后就不再需要針對每一個頁面設置mock開關，更容易維護，避免項目中有多個mock開關而難以統一開關狀態；<br /> <br /> 如果發布時忘記將mock開關給關掉，那么發布之后一運行發布者就會發現mock開關忘了關，然后可以快速修復之后再重新發布，從而避免不小心將正式服更新為mock數據源。<br /> <br /> 正是由于以上兩點考慮，我們的全局mock開關可以幫助程序開發者和發布者更不容易犯錯。<br /> <br /> 解決請求問題<br /> 前后端分離后，我們只需要Server端告訴我們Api URL即可，那么這會產生一個問題：Ajax跨域。這里就不能使用一般的跨域解決方法去解決，比如jsonp,iframe信使等等，因為我們還有POST請求。<br /> <br /> 于是Http Proxy類工具就有用了，比如我就會在BrowserSync加入中間件判斷每一個請求，如果是/api前綴就會代理到API Server端，API Server端收到數據后再返回給BrowserSync，BrowserSync再返回給瀏覽器端。這樣就解決跨域請求的問題<br /> <br /> 生產環境有兩種部署，一種是放到后臺項目里，這就沒啥說的，另外一種就是前后端分開部署，那就在前端WebServer處理端寫點轉發規則就好，如Nginx，Apache都支持。<br /> <br /> 靜態資源路徑問題<br /> 如果你的項目有上傳資源功能，那自然就會產生用戶資源，那前后端分離后，如何來處理這個問題呢？得先看模式。<br /> <br /> 資源與后臺項目放一起，后臺處理完后需要返回前臺一個相對路徑，如果資源時一臺單獨的服務器，那就需要返回資源的絕對URL即可。<br /> <br /> 會話<br /> Web項目最頭疼的就是無狀態導致會話問題，傳統的Web項目都使用Session/Cookie，但在前后端分離，集群部署模式下這Session明顯缺陷太多。token方式已經是當前Web端解決會話的主流，并且有很多開源好用的token生成管理程序，基本上拿來就能用。<br /> <br /> 做網站公眾平臺每天為您分享原創Web開發資訊，開發經驗，為您的技能充電。期待您的關注與分享，同時歡迎您留言，讓我們每天進步一點點！<br />