使用ASP.NET MVC和AngularJS的Web模塊化管理

   快速瀏覽標(biāo)題便了解到本文要談到公開資源平臺，該平臺允許快速，輕松地創(chuàng)建一個管理網(wǎng)絡(luò)，并不需要在風(fēng)格，導(dǎo)航，解決方案架構(gòu)和其它跟主要任務(wù)無關(guān)的瑣事上花費(fèi)過多的時間。

平臺視覺圖和其中一塊模板:（見附圖一）

很長一段時間里，我們使用WPF技術(shù)模塊化管理應(yīng)用。我們做出的決定是將此管理遷移到網(wǎng)站中。最后我們得出了2個不同的產(chǎn)品：第一個:平臺,就是這篇文章致力于介紹的，第二個是用于電子商務(wù)應(yīng)用程序開發(fā)使用的集合模塊。

技術(shù)運(yùn)用于：(見附圖二）

我們決定使用這些技術(shù)都是我們廣泛應(yīng)用微軟產(chǎn)品的經(jīng)驗結(jié)果。

我們使用以下的技術(shù):

·        ASP.NET MVC 5.0 -作為一個網(wǎng)絡(luò)托管技術(shù)

·        ASP.NET Web API 2.0-去實施REST服務(wù)

·        Entity Framework 6.0 – ORM 

·        EF Migrations -以便管理數(shù)據(jù)庫模式的更改和數(shù)據(jù)

·        ASP.NET Identity -授權(quán)和認(rèn)證任務(wù)

AngularJS –主要針對SPA 的用戶界面。挑選它的主要依據(jù)之一是因為它的普及性和文件質(zhì)量。我們之前雖然沒有過應(yīng)用AngularJS方面的工作經(jīng)驗。但一路回首，我們從未對這個選擇有過任何遺憾。

Architecture 

平臺和模塊都采用DDD，SOLID，TestDriven Development（TDD）。從表面看，我們在使用MVVM（非常感謝AngularJS-從WPF的過渡到現(xiàn)在都沒有出現(xiàn)過任何并發(fā)癥）

 Platform Capabilities

現(xiàn)在讓我們看一下平臺兼容性的核心列表。理解這個列表包含平臺兼容性是很重要的，因為它不僅僅是電子商務(wù)應(yīng)用的一個附加功能。

風(fēng)格指南（見附圖三）

我們使用MCSS系統(tǒng)方法的應(yīng)用創(chuàng)造了我們自己的主題。我們還創(chuàng)建了一個風(fēng)格元素指南和用于元素導(dǎo)航的視覺構(gòu)造，允許您輕松地創(chuàng)建一段HTML源碼，以此用來擴(kuò)展模塊。

Navigation

在這里，我們針對用戶界面提出了一個統(tǒng)一的導(dǎo)航用戶界面概念。我們非常喜歡應(yīng)用于新portal.azure.com中水平滾動頁面導(dǎo)航的想法，于是我們決定把它作為一個基點(diǎn)。

主要的導(dǎo)航元素是:

·        “blade”-傳統(tǒng)界面的模擬窗口

·        “widget容器包含widget

·        “main menu” -針對所有模塊的全局導(dǎo)航菜單

 Modularity

平臺在運(yùn)行安裝擴(kuò)展模塊時允許系統(tǒng)功能擴(kuò)展。鑒于每個模塊都可以提供自己的用戶界面和REST API服務(wù)，所以該平臺可以被定制用于服務(wù)許多特殊的商業(yè)需求。

模塊化是我們遇到的最困難的問題之一。為了解決這個問題，我們不得不從WPF中采用微軟PRISM，并且使它在ASP.NETMVC中可以正常運(yùn)行。模塊包含了使用版本和依附關(guān)系的信息，這些信息常在系統(tǒng)在模塊初始化和安裝過程中有被使用。

除了擴(kuò)張用戶界面和API ,每個模板可以用自己的數(shù)據(jù)庫模式并且支持在版本更新過程中的數(shù)據(jù)遷移。它們也可以通過loC和依賴注入來擴(kuò)展或覆蓋其他模塊的功能。

我們就不一一列出所有用戶界面的擴(kuò)展點(diǎn)啦，這只是其中的一小部分：主菜單，工具欄，窗口，通知等。

其它有用的信息

·        授權(quán)和認(rèn)證聯(lián)合認(rèn)證兼容-使用微軟ASP.NETIdentity。

·        Managing users and permissions -我們自己的執(zhí)行并且準(zhǔn)備使用UI。

·        Working with binary data (files) -擴(kuò)展系統(tǒng)提供API上傳文件到本地磁盤存儲，網(wǎng)絡(luò)存儲或azureblob存儲?？梢詳U(kuò)展用來使用任何類型的存儲服務(wù)。

·        背景工作調(diào)度-使用延時庫來實現(xiàn)，是一個很靈活的功能體系，為監(jiān)測工作提供自己的接口。

·        動態(tài)設(shè)置系統(tǒng)-允許聲明性設(shè)置，并提供標(biāo)準(zhǔn)管理界面和API代碼使用。

·        動態(tài)特性系統(tǒng)-允許使用UI 或代碼來動態(tài)擴(kuò)展任何用戶對象的新屬性。

·        貯藏-使用緩存服務(wù)來優(yōu)化和提升緩存能力   (AppFabric, WEB Cache, memcache等.)

·        基于模板的通知系統(tǒng)-定義通知類型，編輯模板，支持本地化，規(guī)劃，日志。支持包括電子郵件、短信等多種不同的通知渠道。

·        統(tǒng)一的輸出/輸入系統(tǒng)模塊-統(tǒng)一的用戶界面和數(shù)據(jù)格式的實際執(zhí)行模塊。

它不僅僅是一顆銀色的“***”，而且還…

因此，我們最終擁有了一個相當(dāng)好的系統(tǒng)，它允許有經(jīng)驗的開發(fā)人員針對復(fù)雜的項目快速創(chuàng)建一個管理網(wǎng)站，或者使用它作為一個指南來創(chuàng)建獨(dú)一無二的系統(tǒng)。

·        更多關(guān)于平臺的信息可以點(diǎn)擊:http://docs.virtocommerce.com/display/vc2devguide/Working+with+Platform. 

·        您可以看到，使用該平臺創(chuàng)造一個電子商務(wù)產(chǎn)品的真實例子:VirtoCommerce online demo (frontend and admin).

·        項目本身就坐落在此:https://github.com/VirtoCommerce/vc-community. 項目正在積極發(fā)展中，所以所有的意見，反饋和要求將得到高度贊賞。

許可證

在該文中提及的相關(guān)源代碼和文件，都是由CPOL授權(quán)許可的

關(guān)于作者：

Alexander Siniouguine

職業(yè)：軟件構(gòu)架師

國籍：美國

高級軟件構(gòu)架師。作者已經(jīng)自主設(shè)計了幾款網(wǎng)絡(luò)產(chǎn)品，這些產(chǎn)品被世界上著名的網(wǎng)絡(luò)公司所運(yùn)用

閱讀我最近的文章：

Checkout my latest article: http://www.codeproject.com/Articles/1013731/Modular-WEB-Admin-Using-ASP-NET-MVC-and-AngularJS

http://virtocommerce.com/

原文摘自：http://www.codeproject.com/Articles/1013731/Modular-WEB-Admin-Using-ASP-NET-MVC-and-AngularJS

PS：本文是小博主的嘔心瀝血譯文，一直對Alexander Siniouguine這位有著20年IT行業(yè)經(jīng)驗精英有著十分崇敬之情，之前也讀過他的文章，對他的獨(dú)特眼光和對行業(yè)領(lǐng)域獨(dú)到的見解感到欽佩，該篇 “使用ASP.NET MVC和AngularJS的Web模塊化管理"我覺得也是行業(yè)領(lǐng)域的創(chuàng)新之作吧，與大家共享共勉哦！