如何使用AngularJs打造權(quán)限管理系統(tǒng)【簡易型】_AngularJS

　　本文將介紹如何把AngularJs應(yīng)用到實(shí)際項(xiàng)目中。本篇文章將使用AngularJS來打造一個(gè)簡易的權(quán)限管理系統(tǒng)。下面不多說，直接進(jìn)入主題。

二、整體架構(gòu)設(shè)計(jì)介紹

　　首先看下整個(gè)項(xiàng)目的架構(gòu)設(shè)計(jì)圖：

　　從上圖可以看出整個(gè)項(xiàng)目的一個(gè)整體結(jié)構(gòu)，接下來，我來詳細(xì)介紹了項(xiàng)目的整體架構(gòu)：

　　采用Asp.net Web API來實(shí)現(xiàn)REST 服務(wù)。這樣的實(shí)現(xiàn)方式，已達(dá)到后端服務(wù)的公用、分別部署和更好地?cái)U(kuò)展。Web層依賴應(yīng)用服務(wù)接口，并且使用Castle Windsor實(shí)現(xiàn)依賴注入。

顯示層(用戶UI)

　　顯示層采用了AngularJS來實(shí)現(xiàn)的SPA頁面。所有的頁面數(shù)據(jù)都是異步加載和局部刷新，這樣的實(shí)現(xiàn)將會(huì)有更好的用戶體驗(yàn)。

應(yīng)用層(Application Service)

　　AngularJS通過Http服務(wù)去請(qǐng)求Web API來獲得數(shù)據(jù)，而Web API的實(shí)現(xiàn)則是調(diào)用應(yīng)用層來請(qǐng)求數(shù)據(jù)。

基礎(chǔ)架構(gòu)層

　　基礎(chǔ)架構(gòu)層包括倉儲(chǔ)的實(shí)現(xiàn)和一些公用方法的實(shí)現(xiàn)。

　　倉儲(chǔ)層的實(shí)現(xiàn)采用EF Code First的方式來實(shí)現(xiàn)的，并使用EF Migration的方式來創(chuàng)建數(shù)據(jù)庫和更新數(shù)據(jù)庫。

　　LH.Common層實(shí)現(xiàn)了一些公用的方法，如日志幫助類、表達(dá)式樹擴(kuò)展等類的實(shí)現(xiàn)。

領(lǐng)域?qū)?/p>

　　領(lǐng)域?qū)又饕獙?shí)現(xiàn)了該項(xiàng)目的所有領(lǐng)域模型，其中包括領(lǐng)域模型的實(shí)現(xiàn)和倉儲(chǔ)接口的定義。

　　介紹完整體結(jié)構(gòu)外，接下來將分別介紹該項(xiàng)目的后端服務(wù)實(shí)現(xiàn)和Web前端的實(shí)現(xiàn)。

三、后端服務(wù)實(shí)現(xiàn)

　　后端服務(wù)主要采用Asp.net Web API來實(shí)現(xiàn)后端服務(wù)，并且采用Castle Windsor來完成依賴注入。

　　這里拿權(quán)限管理中的用戶管理來介紹Rest Web API服務(wù)的實(shí)現(xiàn)。

提供用戶數(shù)據(jù)的REST服務(wù)的實(shí)現(xiàn)：

　　從上面代碼實(shí)現(xiàn)可以看出，User REST 服務(wù)依賴與IUserService接口，并且也沒有像傳統(tǒng)的方式將所有的業(yè)務(wù)邏輯放在Web API實(shí)現(xiàn)中，而是將具體的一些業(yè)務(wù)實(shí)現(xiàn)封裝到對(duì)應(yīng)的應(yīng)用層中，Rest API只負(fù)責(zé)調(diào)用對(duì)應(yīng)的應(yīng)用層中的服務(wù)。這樣設(shè)計(jì)好處有：

REST 服務(wù)部依賴與應(yīng)用層接口，使得職責(zé)分離，將應(yīng)用層服務(wù)的實(shí)例化交給單獨(dú)的依賴注入容器去完成，而REST服務(wù)只負(fù)責(zé)調(diào)用對(duì)應(yīng)應(yīng)用服務(wù)的方法來獲取數(shù)據(jù)。采用依賴接口而不依賴與具體類的實(shí)現(xiàn)，使得類與類之間低耦合。REST服務(wù)內(nèi)不包括具體的業(yè)務(wù)邏輯實(shí)現(xiàn)。這樣的設(shè)計(jì)可以使得服務(wù)更好地分離，如果你后期想用WCF來實(shí)現(xiàn)REST服務(wù)的，這樣就不需要重復(fù)在WCF的REST服務(wù)類中重復(fù)寫一篇Web API中的邏輯了，這時(shí)候完全可以調(diào)用應(yīng)用服務(wù)的接口方法來實(shí)現(xiàn)WCF REST服務(wù)。所以將業(yè)務(wù)邏輯實(shí)現(xiàn)抽到應(yīng)用服務(wù)層去實(shí)現(xiàn)，這樣的設(shè)計(jì)將使得REST 服務(wù)職責(zé)更加單一，REST服務(wù)實(shí)現(xiàn)更容易擴(kuò)展。

　　用戶應(yīng)用服務(wù)的實(shí)現(xiàn)：

　　這里應(yīng)用服務(wù)層其實(shí)還可以進(jìn)一步的優(yōu)化，實(shí)現(xiàn)代碼層級(jí)的讀寫分離，定義IReadOnlyService接口和IWriteServie接口，并且把寫操作可以采用泛型方法的方式抽象到BaseService中去實(shí)現(xiàn)。這樣一些增刪改操作實(shí)現(xiàn)公用，之所以可以將這里操作實(shí)現(xiàn)公用，是因?yàn)檫@些操作都是非常類似的，無非是操作的實(shí)體不一樣罷了。其實(shí)這樣的實(shí)現(xiàn)在我另一個(gè)開源項(xiàng)目中已經(jīng)用到：OnlineStore.大家可以參考這個(gè)自行去實(shí)現(xiàn)。

　　倉儲(chǔ)層的實(shí)現(xiàn)：

　　用戶應(yīng)用服務(wù)也沒有直接依賴與具體的倉儲(chǔ)類，同樣也是依賴其接口。對(duì)應(yīng)的用戶倉儲(chǔ)類的實(shí)現(xiàn)如下：

四、AngularJS前端實(shí)現(xiàn)

　　Web前端的實(shí)現(xiàn)就是采用AngularJS來實(shí)現(xiàn)，并且采用模塊化開發(fā)模式。具體Web前端的代碼結(jié)構(gòu)如下圖所示：

　　使用AngularJS開發(fā)的Web應(yīng)用程序的代碼之間的調(diào)用層次和后端基本一致，也是視圖頁面——》控制器模塊——》服務(wù)模塊——》Web API服務(wù)。

　　并且Web前端CSS和JS資源的加載采用了Bundle的方式來減少請(qǐng)求資源的次數(shù)，從而加快頁面加載時(shí)間。具體Bundle類的配置：

　　首頁 Index.cshtml

五、運(yùn)行效果

　　介紹完前后端的實(shí)現(xiàn)之后，接下來讓我們看下整個(gè)項(xiàng)目的運(yùn)行效果：

六、總結(jié)

　　到此，本文的所有內(nèi)容都介紹完了，盡管本文的AngularJS的應(yīng)用項(xiàng)目還有很多完善的地方，例如沒有緩沖的支持、沒有實(shí)現(xiàn)讀寫分離，沒有對(duì)一些API進(jìn)行壓力測試等。但AngularJS在實(shí)際項(xiàng)目中的應(yīng)用基本是這樣的，大家如果在項(xiàng)目中有需要用到AngularJS，正好你們公司的后臺(tái)又是.NET的話，相信本文的分享可以是一個(gè)很好的參考。另外，關(guān)于架構(gòu)的設(shè)計(jì)也可以參考我的另一個(gè)開源項(xiàng)目：OnlineStore和FastWorks。

以上所述是小編給大家介紹的使用AngularJs打造權(quán)限管理系統(tǒng)的方法，希望對(duì)大家有所幫助！

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