資訊專欄INFORMATION COLUMN
摘要：實現前后端分離的心得對目前的來說，前后端分離已經變得越來越流行了，越來越多的企業網站都開始往這個方向靠攏。前后端工作分配不均。
實現前后端分離的心得
對目前的web來說，前后端分離已經變得越來越流行了，越來越多的企業/網站都開始往這個方向靠攏。那么，為什么要選擇前后端分離呢？前后端分離對實際開發有什么好處呢?
為什么選擇前后端分離在以前傳統的網站開發中，前端一般扮演的只是切圖的工作，只是簡單地將UI設計師提供的原型圖實現成靜態的HTML頁面，而具體的頁面交互邏輯，比如與后臺的數據交互工作等，可能都是由后臺的開發人員來實現的，或者是前端是緊緊的耦合后臺。比如，以前淘寶的Web基本上都是基于MVC框架webx，架構決定了前端只能依賴后端。所以他們的開發模式依然是，前端寫好靜態demo，后端翻譯成VM模版，這種模式的問題就不說了，被吐槽了很久。
而且更有可能后臺人員直接兼顧前端的工作，一邊實現API接口，一邊開發頁面，兩者互相切換著做，而且根據不同的url動態拼接頁面，這也導致后臺的開發壓力大大增加。前后端工作分配不均。不僅僅開發效率慢，而且代碼難以維護。而前后端分離的話，則可以很好的解決前后端分工不均的問題，將更多的交互邏輯分配給前端來處理，而后端則可以專注于其本職工作，比如提供API接口，進行權限控制以及進行運算工作。而前端開發人員則可以利用nodejs來搭建自己的本地服務器，直接在本地開發，然后通過一些插件來將api請求轉發到后臺，這樣就可以完全模擬線上的場景，并且與后臺解耦。前端可以獨立完成與用戶交互的整一個過程，兩者都可以同時開工，不互相依賴，開發效率更快，而且分工比較均衡。
如何做到前后端分離(以下的內容都是基于我們的電影購票網站來討論的)
前端的技術框架是: vue全家桶+nodejs+express(實現的是單頁面(SPA)應用)
首先，先分清楚前后端的工作
前端的工作：實現整一個前端頁面以及交互邏輯，以及利用ajax與nodejs服務器（中間層)交互
后端的工作：提供API接口，利用redis來管理session,與數據庫交互
我們項目的整一個架構如下:
接下來進入正題，如何實現前后端分離
一般來說，要實現前后端分離，前端就需要開啟一個本地的服務器來運行自己的前端代碼，以此來模擬真實的線上環境，并且，也是為了更好的開發。因為你在實際開發中，你不可能要求每一個前端都去搭建一個java(php)環境，并且在java環境下開發，這對于前端來說，學習成本太高了。但如果本地沒有開啟服務器的話，不僅無法模擬線上的環境，而且還面臨到了跨域的問題，因為你如果寫靜態的html頁面，直接在文件目錄下打開的話，你是無法發出ajax請求的(瀏覽器跨域的限制),因此，你需要在本地運行一個服務器，可是又不想搭建陌生而龐大的java環境，怎么辦法呢？nodejs正好解決了這個問題。在我們項目中，我們利用nodejs的express框架來開啟一個本地的服務器，然后利用nodejs的一個http-proxy-middleware插件將客戶端發往nodejs的請求轉發給真正的服務器，讓nodejs作為一個中間層。這樣，前端就可以無憂無慮的開發了
由于前后端分離后，前端和后臺同時開發時，就可能遇到前端已經開發好一個頁面了，可是卻等待后臺API接口的情況。比如說A是負責前端，B是負責后臺，A可能用了一周做好了基本的結構，并且需要API接口聯調后，才能繼續開發，而此時B卻還沒有實現好所需要的接口，這種情況，怎么辦呢？在我們這個項目里，我們是通過了mock來提供一些假數據，我們先規定好了API接口，設計出了一套API文檔，然后我們就可以通過API文檔，利用mock(http://mockjs.com)來返回一些...，這樣就可以模擬發送API到接受響應的整一個過程，因此前端也不需要依賴于后端開發了，可以獨立開發，等到后臺的API全部設計完之后，就可以比較快速的聯調。
為什么要引入nodejs作為中間層前面的我發的項目結構圖中，已經表明，在這個項目里，我們將nodejs作為中間層，那么，為什么我們要特地引入nodejs呢？直接用java做不就行了嗎？
我覺得引入nodejs主要是為了分層開發，職責劃分，nodejs作為前端服務器，由前端開發人員負責，前端開發人員不需要知道java后臺是如何實現的，也不需要知道API接口是如何實現的，我們只需要關心我們前端的開發工作，并且管理好nodejs前端服務器，而后臺開發人員也不需要考慮如何前端是如何部署的，他只需要做好自己擅長的部分，提供好API接口就可以；
nodejs本身有著獨特的異步、非阻塞I/O的特點，這也就意味著他特別適合I/O密集型操作，在處理并發量比較大的請求上能力比較強，因此，利用它來充當前端服務器，向客戶端提供靜態文件以及響應客戶端的請求，我覺得這是一個很不錯的選擇。
前端服務器如何部署nodejs前端服務器的職責
作為靜態文件服務器，當用戶訪問網站的時候，將index.html以及其引入的js、css、fonts以及圖片返回給用戶
負責將客戶端發來的ajax請求轉發給后臺服務器
其實前端服務器的部署工作是算比較簡單的，具體有以下兩個點:
將開發完的前端代碼，利用webpack打包成靜態壓縮文件
在服務器上，利用pm2負載均衡器來執行以下的代碼來開啟服務器:
(PS:其實也有一個做法，就是用nginx來做反向代理，負責轉發請求，根據客戶端訪問的url把這個請求轉發到不同的服務，比如訪問/api/*的請求，就轉發到后臺服務，訪問其它的請求，就轉發到nodejs服務)
以上，就是我對于前后端分離的一些看法，以及一些實踐，如果大家有什么好的想法，歡迎交流。
本次項目代碼的地址為:https://github.com/chenjigeng... 由于本項目的后臺服務已經下線，此項目運行不起來。只供參考
本文地址在->本人博客地址, 歡迎給個 start 或 follow
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108664.html
摘要：使用心得隨著信息技術的飛速發展，系統架構設計面對更專業軟件開發職責更明確的發展。同時利用開源技術，吸引業界優秀人才的共同努力下，系統功能越來越完善。使成為很完善很強大的一個平臺。執行啟動時，報錯誤。 使用jeecg-boot心得????隨著信息技術的飛速發展，系統架構設計面對更專業、軟件開發職責更明確的發展。如今流行的微服務、前后端分離、Docker容器虛擬化待新技術，Jeecg-bo...
摘要：使用心得簡單介紹項目介紹，我就簡單介紹了一下，是一個輕量級的快速開發平臺，其設計目標是開發迅速學習簡單輕量級易擴展使用等框架，包含用戶列表角色管理菜單管理定時任務，代碼生成器日志管理模塊接口開發利器前后端分離等。 使用jeecg-boot心得 1 簡單介紹 jeecg-boot項目介紹，我就簡單介紹了一下，jeecg-boot是...
摘要：下載項目運行發現其中也有想要的按鈕權限功能，同時秉承了以前的一貫作風有強大的代碼生成器，可謂是廣大碼農的福音。建議代碼生成器能夠生成手機版樣式的頁面。 使用jeecg-boot心得： Jeect-boot,采用主流最新的開發技術，是個強大的快速開發平臺。 剛開始發現jeecg-boot時便對其精致美觀的頁面深深的迷住了。下載項目運行發現其中也有想要的按鈕權限功能，同時jeecg-b...
摘要：我所在的美團酒店事業部去年月份成立，新的業務新的開發團隊，這一切使得我們的前后端分離推進的很徹底。日志監控平臺日志監控平臺是美團內部的一個日志收集系統，目前美團統一使用收集日志，具有接收格式日志的能力，而日志監控平臺也是以格式日志來收集。 轉自：美團技術團隊 作者：美團技術團隊 分享理由：很好的分享，可見，基于Node的前后端分離的架構是越顯流行和重要，前端攻城獅們，No...
閱讀 1633·2023-04-25 16:29
閱讀 957·2021-11-15 11:38
閱讀 2295·2021-09-23 11:45
閱讀 1424·2021-09-22 16:03
閱讀 2540·2019-08-30 15:54
閱讀 1204·2019-08-30 10:53
閱讀 2603·2019-08-29 15:24
閱讀 1104·2019-08-26 12:25
