国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

實(shí)現(xiàn)前后端分離的心得

zilu / 1094人閱讀

摘要：實(shí)現(xiàn)前后端分離的心得對(duì)目前的來說，前后端分離已經(jīng)變得越來越流行了，越來越多的企業(yè)網(wǎng)站都開始往這個(gè)方向靠攏。前后端工作分配不均。

實(shí)現(xiàn)前后端分離的心得

對(duì)目前的web來說，前后端分離已經(jīng)變得越來越流行了，越來越多的企業(yè)/網(wǎng)站都開始往這個(gè)方向靠攏。那么，為什么要選擇前后端分離呢？前后端分離對(duì)實(shí)際開發(fā)有什么好處呢?

為什么選擇前后端分離

在以前傳統(tǒng)的網(wǎng)站開發(fā)中，前端一般扮演的只是切圖的工作，只是簡單地將UI設(shè)計(jì)師提供的原型圖實(shí)現(xiàn)成靜態(tài)的HTML頁面，而具體的頁面交互邏輯，比如與后臺(tái)的數(shù)據(jù)交互工作等，可能都是由后臺(tái)的開發(fā)人員來實(shí)現(xiàn)的，或者是前端是緊緊的耦合后臺(tái)。比如，以前淘寶的Web基本上都是基于MVC框架webx，架構(gòu)決定了前端只能依賴后端。所以他們的開發(fā)模式依然是，前端寫好靜態(tài)demo，后端翻譯成VM模版，這種模式的問題就不說了，被吐槽了很久。

而且更有可能后臺(tái)人員直接兼顧前端的工作，一邊實(shí)現(xiàn)API接口，一邊開發(fā)頁面，兩者互相切換著做，而且根據(jù)不同的url動(dòng)態(tài)拼接頁面，這也導(dǎo)致后臺(tái)的開發(fā)壓力大大增加。前后端工作分配不均。不僅僅開發(fā)效率慢，而且代碼難以維護(hù)。而前后端分離的話，則可以很好的解決前后端分工不均的問題，將更多的交互邏輯分配給前端來處理，而后端則可以專注于其本職工作，比如提供API接口，進(jìn)行權(quán)限控制以及進(jìn)行運(yùn)算工作。而前端開發(fā)人員則可以利用nodejs來搭建自己的本地服務(wù)器，直接在本地開發(fā)，然后通過一些插件來將api請(qǐng)求轉(zhuǎn)發(fā)到后臺(tái)，這樣就可以完全模擬線上的場(chǎng)景，并且與后臺(tái)解耦。前端可以獨(dú)立完成與用戶交互的整一個(gè)過程，兩者都可以同時(shí)開工，不互相依賴，開發(fā)效率更快，而且分工比較均衡。

如何做到前后端分離

(以下的內(nèi)容都是基于我們的電影購票網(wǎng)站來討論的)
前端的技術(shù)框架是: vue全家桶+nodejs+express(實(shí)現(xiàn)的是單頁面(SPA)應(yīng)用)
首先，先分清楚前后端的工作

前端的工作：實(shí)現(xiàn)整一個(gè)前端頁面以及交互邏輯，以及利用ajax與nodejs服務(wù)器（中間層)交互

后端的工作：提供API接口，利用redis來管理session,與數(shù)據(jù)庫交互

我們項(xiàng)目的整一個(gè)架構(gòu)如下:

接下來進(jìn)入正題，如何實(shí)現(xiàn)前后端分離

一般來說，要實(shí)現(xiàn)前后端分離，前端就需要開啟一個(gè)本地的服務(wù)器來運(yùn)行自己的前端代碼，以此來模擬真實(shí)的線上環(huán)境，并且，也是為了更好的開發(fā)。因?yàn)槟阍趯?shí)際開發(fā)中，你不可能要求每一個(gè)前端都去搭建一個(gè)java(php)環(huán)境，并且在java環(huán)境下開發(fā)，這對(duì)于前端來說，學(xué)習(xí)成本太高了。但如果本地沒有開啟服務(wù)器的話，不僅無法模擬線上的環(huán)境，而且還面臨到了跨域的問題，因?yàn)槟闳绻麑戩o態(tài)的html頁面，直接在文件目錄下打開的話，你是無法發(fā)出ajax請(qǐng)求的(瀏覽器跨域的限制),因此，你需要在本地運(yùn)行一個(gè)服務(wù)器，可是又不想搭建陌生而龐大的java環(huán)境，怎么辦法呢？nodejs正好解決了這個(gè)問題。在我們項(xiàng)目中，我們利用nodejs的express框架來開啟一個(gè)本地的服務(wù)器，然后利用nodejs的一個(gè)http-proxy-middleware插件將客戶端發(fā)往nodejs的請(qǐng)求轉(zhuǎn)發(fā)給真正的服務(wù)器，讓nodejs作為一個(gè)中間層。這樣，前端就可以無憂無慮的開發(fā)了

由于前后端分離后，前端和后臺(tái)同時(shí)開發(fā)時(shí)，就可能遇到前端已經(jīng)開發(fā)好一個(gè)頁面了，可是卻等待后臺(tái)API接口的情況。比如說A是負(fù)責(zé)前端，B是負(fù)責(zé)后臺(tái)，A可能用了一周做好了基本的結(jié)構(gòu)，并且需要API接口聯(lián)調(diào)后，才能繼續(xù)開發(fā)，而此時(shí)B卻還沒有實(shí)現(xiàn)好所需要的接口，這種情況，怎么辦呢？在我們這個(gè)項(xiàng)目里，我們是通過了mock來提供一些假數(shù)據(jù)，我們先規(guī)定好了API接口，設(shè)計(jì)出了一套API文檔，然后我們就可以通過API文檔，利用mock(http://mockjs.com)來返回一些...，這樣就可以模擬發(fā)送API到接受響應(yīng)的整一個(gè)過程，因此前端也不需要依賴于后端開發(fā)了，可以獨(dú)立開發(fā)，等到后臺(tái)的API全部設(shè)計(jì)完之后，就可以比較快速的聯(lián)調(diào)。

為什么要引入nodejs作為中間層

前面的我發(fā)的項(xiàng)目結(jié)構(gòu)圖中，已經(jīng)表明，在這個(gè)項(xiàng)目里，我們將nodejs作為中間層，那么，為什么我們要特地引入nodejs呢？直接用java做不就行了嗎？

我覺得引入nodejs主要是為了分層開發(fā)，職責(zé)劃分，nodejs作為前端服務(wù)器，由前端開發(fā)人員負(fù)責(zé)，前端開發(fā)人員不需要知道java后臺(tái)是如何實(shí)現(xiàn)的，也不需要知道API接口是如何實(shí)現(xiàn)的，我們只需要關(guān)心我們前端的開發(fā)工作，并且管理好nodejs前端服務(wù)器，而后臺(tái)開發(fā)人員也不需要考慮如何前端是如何部署的，他只需要做好自己擅長的部分，提供好API接口就可以；

nodejs本身有著獨(dú)特的異步、非阻塞I/O的特點(diǎn)，這也就意味著他特別適合I/O密集型操作，在處理并發(fā)量比較大的請(qǐng)求上能力比較強(qiáng)，因此，利用它來充當(dāng)前端服務(wù)器，向客戶端提供靜態(tài)文件以及響應(yīng)客戶端的請(qǐng)求，我覺得這是一個(gè)很不錯(cuò)的選擇。

前端服務(wù)器如何部署

nodejs前端服務(wù)器的職責(zé)

作為靜態(tài)文件服務(wù)器，當(dāng)用戶訪問網(wǎng)站的時(shí)候，將index.html以及其引入的js、css、fonts以及圖片返回給用戶

負(fù)責(zé)將客戶端發(fā)來的ajax請(qǐng)求轉(zhuǎn)發(fā)給后臺(tái)服務(wù)器

其實(shí)前端服務(wù)器的部署工作是算比較簡單的，具體有以下兩個(gè)點(diǎn):

將開發(fā)完的前端代碼，利用webpack打包成靜態(tài)壓縮文件

在服務(wù)器上，利用pm2負(fù)載均衡器來執(zhí)行以下的代碼來開啟服務(wù)器:

(PS:其實(shí)也有一個(gè)做法，就是用nginx來做反向代理，負(fù)責(zé)轉(zhuǎn)發(fā)請(qǐng)求，根據(jù)客戶端訪問的url把這個(gè)請(qǐng)求轉(zhuǎn)發(fā)到不同的服務(wù)，比如訪問/api/*的請(qǐng)求，就轉(zhuǎn)發(fā)到后臺(tái)服務(wù)，訪問其它的請(qǐng)求，就轉(zhuǎn)發(fā)到nodejs服務(wù))
以上，就是我對(duì)于前后端分離的一些看法，以及一些實(shí)踐，如果大家有什么好的想法，歡迎交流。
本次項(xiàng)目代碼的地址為:https://github.com/chenjigeng... 由于本項(xiàng)目的后臺(tái)服務(wù)已經(jīng)下線，此項(xiàng)目運(yùn)行不起來。只供參考

本文地址在->本人博客地址, 歡迎給個(gè) start 或 follow

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/108664.html

相關(guān)文章

  • 使用jeecg-boot心得

    摘要：使用心得隨著信息技術(shù)的飛速發(fā)展，系統(tǒng)架構(gòu)設(shè)計(jì)面對(duì)更專業(yè)軟件開發(fā)職責(zé)更明確的發(fā)展。同時(shí)利用開源技術(shù)，吸引業(yè)界優(yōu)秀人才的共同努力下，系統(tǒng)功能越來越完善。使成為很完善很強(qiáng)大的一個(gè)平臺(tái)。執(zhí)行啟動(dòng)時(shí)，報(bào)錯(cuò)誤。 使用jeecg-boot心得????隨著信息技術(shù)的飛速發(fā)展，系統(tǒng)架構(gòu)設(shè)計(jì)面對(duì)更專業(yè)、軟件開發(fā)職責(zé)更明確的發(fā)展。如今流行的微服務(wù)、前后端分離、Docker容器虛擬化待新技術(shù)，Jeecg-bo...

    wyk1184 評(píng)論0 收藏0

  • 使用jeect-boot心得

    摘要：使用心得簡單介紹項(xiàng)目介紹，我就簡單介紹了一下，是一個(gè)輕量級(jí)的快速開發(fā)平臺(tái)，其設(shè)計(jì)目標(biāo)是開發(fā)迅速學(xué)習(xí)簡單輕量級(jí)易擴(kuò)展使用等框架，包含用戶列表角色管理菜單管理定時(shí)任務(wù)，代碼生成器日志管理模塊接口開發(fā)利器前后端分離等。 使用jeecg-boot心得 1 簡單介紹 jeecg-boot項(xiàng)目介紹，我就簡單介紹了一下，jeecg-boot是...

    luodongseu 評(píng)論0 收藏0

  • 設(shè)計(jì)架構(gòu)

    摘要：先來看一張系統(tǒng)前后端架構(gòu)模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設(shè)計(jì)方案，希望具有參考價(jià)值。，和都是常見的軟件架構(gòu)設(shè)計(jì)模式，它通過分離關(guān)注點(diǎn)來改進(jìn)代碼的組織方式。 如何無痛降低 if else 面條代碼復(fù)雜度 相信不少同學(xué)在維護(hù)老項(xiàng)目時(shí)，都遇到過在深深的 if else 之間糾纏的業(yè)務(wù)邏輯。面對(duì)這樣的一團(tuán)亂麻，簡單粗暴地繼續(xù)增量修改常常只會(huì)讓復(fù)雜度越來越高，可讀性越來越差，有沒...

    graf 評(píng)論0 收藏0

  • 使用jeecg-boot心得

    摘要：下載項(xiàng)目運(yùn)行發(fā)現(xiàn)其中也有想要的按鈕權(quán)限功能，同時(shí)秉承了以前的一貫作風(fēng)有強(qiáng)大的代碼生成器，可謂是廣大碼農(nóng)的福音。建議代碼生成器能夠生成手機(jī)版樣式的頁面。 使用jeecg-boot心得： Jeect-boot,采用主流最新的開發(fā)技術(shù)，是個(gè)強(qiáng)大的快速開發(fā)平臺(tái)。 剛開始發(fā)現(xiàn)jeecg-boot時(shí)便對(duì)其精致美觀的頁面深深的迷住了。下載項(xiàng)目運(yùn)行發(fā)現(xiàn)其中也有想要的按鈕權(quán)限功能，同時(shí)jeecg-b...

    劉永祥 評(píng)論0 收藏0

  • [ 好文分享 ] 美團(tuán)酒店Node全棧開發(fā)實(shí)踐

    摘要：我所在的美團(tuán)酒店事業(yè)部去年月份成立，新的業(yè)務(wù)新的開發(fā)團(tuán)隊(duì)，這一切使得我們的前后端分離推進(jìn)的很徹底。日志監(jiān)控平臺(tái)日志監(jiān)控平臺(tái)是美團(tuán)內(nèi)部的一個(gè)日志收集系統(tǒng)，目前美團(tuán)統(tǒng)一使用收集日志，具有接收格式日志的能力，而日志監(jiān)控平臺(tái)也是以格式日志來收集。 轉(zhuǎn)自：美團(tuán)技術(shù)團(tuán)隊(duì) 作者：美團(tuán)技術(shù)團(tuán)隊(duì) 分享理由：很好的分享，可見，基于Node的前后端分離的架構(gòu)是越顯流行和重要，前端攻城獅們，No...

    wangdai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<