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

   快速瀏覽標題便瞭解到本文要談到公開資源平臺,該平臺允許快速,輕鬆地創建一個管理網絡,並不需要在風格,導航,解決方案架構和其它跟主要任務無關的瑣事上花費過多的時間。

平臺視覺圖和其中一塊模板:(見附圖一)

很長一段時間裏,我們使用WPF技術模塊化管理應用。我們做出的決定是將此管理遷移到網站中。最後我們得出了2個不同的產品:第一個:平臺,就是這篇文章致力於介紹的,第二個是用於電子商務應用程序開發使用的集合模塊。

技術運用於:(見附圖二)


我們決定使用這些技術都是我們廣泛應用微軟產品的經驗結果。

我們使用以下的技術:

·        ASP.NET MVC 5.0 -作爲一個網絡託管技術

·        ASP.NET Web API 2.0-去實施REST服務

·        Entity Framework 6.0 – ORM 

·        EF Migrations -以便管理數據庫模式的更改和數據

·        ASP.NET Identity -授權和認證任務

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

Architecture 

平臺和模塊都採用DDDSOLIDTestDriven DevelopmentTDD)。從表面看,我們在使用MVVM(非常感謝AngularJS-WPF的過渡到現在都沒有出現過任何併發症)

 

 Platform Capabilities

現在讓我們看一下平臺兼容性的核心列表。理解這個列表包含平臺兼容性是很重要的,因爲它不僅僅是電子商務應用的一個附加功能。

風格指南(見附圖三)


我們使用MCSS系統方法的應用創造了我們自己的主題。我們還創建了一個風格元素指南和用於元素導航的視覺構造,允許您輕鬆地創建一段HTML源碼,以此用來擴展模塊。


Navigation

在這裏,我們針對用戶界面提出了一個統一的導航用戶界面概念。我們非常喜歡應用於新portal.azure.com中水平滾動頁面導航的想法,於是我們決定把它作爲一個基點。

主要的導航元素是:

·        blade-傳統界面的模擬窗口

·        widget容器包含widget

·        “main menu” -針對所有模塊的全局導航菜單

 

 Modularity

平臺在運行安裝擴展模塊時允許系統功能擴展。鑑於每個模塊都可以提供自己的用戶界面和REST API服務,所以該平臺可以被定製用於服務許多特殊的商業需求。

模塊化是我們遇到的最困難的問題之一。爲了解決這個問題,我們不得不從WPF中採用微軟PRISM,並且使它在ASP.NETMVC中可以正常運行。模塊包含了使用版本和依附關係的信息,這些信息常在系統在模塊初始化和安裝過程中有被使用

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

我們就不一一列出所有用戶界面的擴展點啦,這只是其中的一小部分:主菜單,工具欄,窗口,通知等。

 

其它有用的信息

·        授權和認證聯合認證兼容-使用微軟ASP.NETIdentity

·        Managing users and permissions -我們自己的執行並且準備使用UI

·        Working with binary data (files) -擴展系統提供API上傳文件到本地磁盤存儲,網絡存儲或azureblob存儲。可以擴展用來使用任何類型的存儲服務。

·        背景工作調度-使用延時庫來實現,是一個很靈活的功能體系,爲監測工作提供自己的接口。

·        動態設置系統-允許聲明性設置,並提供標準管理界面和API代碼使用。

·        動態特性系統-允許使用UI 或代碼來動態擴展任何用戶對象的新屬性。

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

·        基於模板的通知系統-定義通知類型,編輯模板,支持本地化,規劃,日誌。支持包括電子郵件、短信等多種不同的通知渠道。

·        統一的輸出/輸入系統模塊-統一的用戶界面和數據格式的實際執行模塊。

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

因此,我們最終擁有了一個相當好的系統,它允許有經驗的開發人員針對複雜的項目快速創建一個管理網站,或者使用它作爲一個指南來創建獨一無二的系統。

 

·        更多關於平臺的信息可以點擊:http://docs.virtocommerce.com/display/vc2devguide/Working+with+Platform

·        您可以看到,使用該平臺創造一個電子商務產品的真實例子:VirtoCommerce online demo (frontend and admin).

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

許可證

在該文中提及的相關源代碼和文件,都是由CPOL授權許可的

 

關於作者:

Alexander Siniouguine

               

職業:軟件構架師

國籍:美國

高級軟件構架師。作者已經自主設計了幾款網絡產品,這些產品被世界上著名的網絡公司所運用

閱讀我最近的文章:

 

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行業經驗精英有着十分崇敬之情,之前也讀過他的文章,對他的獨特眼光和對行業領域獨到的見解感到欽佩,該篇 “使用ASP.NET MVC和AngularJS的Web模塊化管理"我覺得也是行業領域的創新之作吧,與大家共享共勉哦!

 

 

 








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章