本篇內(nèi)容主要講解“web前端與后端分離的架構(gòu)實(shí)例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“web前端與后端分離的架構(gòu)實(shí)例分析”吧!

堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都軟裝設(shè)計(jì)小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網(wǎng)站建設(shè)營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

一、關(guān)于前端的 dataProvider

簡單點(diǎn)說，就是一個(gè)給界面調(diào)用的數(shù)據(jù)訪問層，很多人都人這樣的疑問，在這里加一個(gè)數(shù)據(jù)訪問層，是不是多余？只要你做的前端，你都會(huì)碰到下面這些問題：

1、一個(gè)產(chǎn)品或者項(xiàng)目，前端與后端是同時(shí)進(jìn)行了，這時(shí)候，根本沒有后端的接口，甚至可以說，連個(gè)接口的定義都沒有。作為前端開發(fā)人員，你如何去開展自己的工作？

2、作為前端開發(fā)人員，你有沒有碰到，因?yàn)楹蠖说慕涌趻斓簦瑢?dǎo)致你的工作沒法繼續(xù)做下去的情形？

3、作為前端開發(fā)人員，往往免不了要和第三方的接口進(jìn)行對(duì)接，你有沒有碰到過，和你做對(duì)接的人員，突然因?yàn)轫?xiàng)目緊，被抽走了，留給你的只有一堆需要傳N個(gè)參數(shù)，傳了后接著出“對(duì)象為空”的異常呢？你根本不知道哪里參數(shù)傳錯(cuò)了。面對(duì)這些接口，你除了破口大罵，得不到任何幫助。

4、作為前端開發(fā)人員，你有沒有試過，你向后端的開發(fā)組，要一個(gè)接口，他們需要討論個(gè)幾天，然后再花幾天才能給你，給你之后，還不能用，又得再花幾天時(shí)間調(diào)試呢？

如果你向我一樣，都曾經(jīng)都碰過這些問題，你就不會(huì)懷疑這個(gè) dataProvider 存在的必要了，有了這個(gè) dataProvider，可以***減少后端接口對(duì)前端開發(fā)的影響。下面是一個(gè) dataProvider 的實(shí)例：

var dataProvider = (function () {      var fakeProvider = {         countries: new Countries()     };      var realProvider = {         countries: new JData.WebDataSource()     };      //下面的接口，根據(jù)情況二選一     return fakeProvider; //這個(gè)是假的 dataProvider，從本地讀     return realProvider; //這個(gè)是真正 dataProvider，從接口讀 })();

從上面可以看出來，這個(gè) dataProvider 使用了工廠模式來創(chuàng)建，它有兩個(gè)實(shí)例，fakeProvider和realProvider，fakeProvider是用來提供一些模擬數(shù)據(jù)，而realProvider提供從接口讀取出來的數(shù)據(jù)。當(dāng)沒有接口，或者接口掛掉，我們可以先從 fakeProvider 來讀取數(shù)據(jù)。等接口好了，切換到 realProvider 。

二、關(guān)于用戶界面輸入的驗(yàn)證

1、數(shù)據(jù)的驗(yàn)證。用戶在界面輸入數(shù)據(jù)后，接著調(diào)用 dataProvider 里的接口對(duì)數(shù)據(jù)進(jìn)行處理，但是在向服務(wù)端提交之前，得先對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證。那個(gè)這個(gè)驗(yàn)證如何進(jìn)行呢？dataProvider先從服務(wù)端獲實(shí)體的描述信息，這些描述包括但不限于：主外鍵、屬性的驗(yàn)證信息（比如是否可空），當(dāng)然，這個(gè)實(shí)體信息是可以緩存起來，以便重用的。然后 dataProvider 再根據(jù)這個(gè)描述信息來對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證。

2、錯(cuò)誤信息的顯示

當(dāng)驗(yàn)證到某一個(gè)屬性不合法，驗(yàn)證信息的模塊就在頁面查找出對(duì)應(yīng)輸入控件，它是怎么查找的呢？比如說，Contry 的 Name 輸入為空是不可以的。那它就先查找 id 為Coutry的元素，然后再Coutry元素下面再找id 或者 name 為 Name 的控件，如果找不到則直接彈窗顯示錯(cuò)誤信息。例如：

<form id="Country">        <input name="Name"/> </form>

三、關(guān)于后端使用 OData

1、作為后端開發(fā)人員，你有沒有碰到過這種前端開發(fā)人員，今天讓你加一個(gè)字段，好，加了，然后打包發(fā)布。明天又讓你加一個(gè)字段。后天突然又說，前兩天加的字段，不需要，你會(huì)不會(huì)有種想喊“操”的沖動(dòng)？

2、作為后端開發(fā)員員，你有沒有碰到過這種前端開發(fā)人員，今天跟你說接口不夠用，要加個(gè) GetUserByName 的方法，明天又說，還得加個(gè) GetUserByEmail 的方法？然后，過了一段時(shí)間，你發(fā)現(xiàn)接口越來越多，維護(hù)的模塊越來越癰腫，并且這些接口，你只敢加，不敢刪除。因?yàn)椋愀静恢肋@些，有哪個(gè)不用的，你跑去問前端，他也回答不出來。所以一些接口哪怕是沒用的，也只能永遠(yuǎn)系統(tǒng)里，直到它生命周期的結(jié)束。

如果你也碰到類似于我這種煩惱，使用 OData 也許是一個(gè)不錯(cuò)的選擇，把查詢的權(quán)限都開發(fā)給前端的開發(fā)人員，他愛怎么查就怎么查，都由它去。

四、關(guān)于后端使用MVC

我們的系統(tǒng)，使用MVC都是用來處理從前端提交上來的數(shù)據(jù)的，使用它主要是開發(fā)人員都熟悉MVC，然后MVC再調(diào)用業(yè)務(wù)層代碼，同時(shí)，還需要處理:

1、對(duì)提交上來的數(shù)據(jù)進(jìn)行驗(yàn)證

2、處理系統(tǒng)的異常，包括對(duì)異常進(jìn)行重新的包裝，再傳回到客戶端，以便于客戶端的處理。對(duì)異常的信息進(jìn)行記錄。

五、數(shù)據(jù)訪問層

關(guān)于數(shù)據(jù)訪問層，在我們的系統(tǒng)里實(shí)際是一個(gè) ORM 的包裝器（ORM Wrapper），你在對(duì) ORM 裹上一層外衣。目的在于：

1、對(duì)數(shù)據(jù)進(jìn)行攔截。例如：有些數(shù)據(jù)，只對(duì)某個(gè)角色的開發(fā)。數(shù)據(jù)訪問層需要對(duì)根據(jù)過濾條件，然后再結(jié)合查詢條件，重新生成SQL。

2、對(duì)數(shù)據(jù)假刪除的處理。見過很多系統(tǒng)，都是把刪除放到業(yè)務(wù)層來進(jìn)行的，其實(shí)這是不適合的，從業(yè)務(wù)的角度來說，關(guān)心的是刪除，在執(zhí)行刪除后，這條數(shù)據(jù)從我眼前消失就可以了。至真刪除還是假刪除，這與我無關(guān)。數(shù)據(jù)訪問層，要做的就是這工作，它可以數(shù)據(jù)在真刪除與假刪除之間進(jìn)行切換，只要配置一下，就可以把真刪除變成假刪除（其實(shí)就是把Delete操作變成Update操作），使得進(jìn)行業(yè)務(wù)開發(fā)人員，不用再關(guān)心數(shù)據(jù)的真假刪除。

3、對(duì)數(shù)據(jù)進(jìn)行跟蹤、備份。你肯定碰到過這么一種需要，需要記下來，每一次的更新操作的時(shí)間，以及更新了些什么內(nèi)容。對(duì)于刪除的數(shù)據(jù)，能夠把它還原回來。數(shù)據(jù)訪問層，通過對(duì) ORM進(jìn)行包裝，完全可以記錄下每一次更新、刪除這些操作，然后記錄下來即可。當(dāng)然，這些需求利用數(shù)據(jù)提供的功能也是可以實(shí)現(xiàn)的，不在討論的范圍內(nèi)。

到此，相信大家對(duì)“web前端與后端分離的架構(gòu)實(shí)例分析”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前文章：web前端與后端分離的架構(gòu)實(shí)例分析
網(wǎng)址分享：http://www.chinadenli.net/article10/peicdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、App設(shè)計(jì)、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、ChatGPT、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)