1. 程式人生 > >ASP.NET MVC 企業級實戰 —— 建立使用者許可權管理示例程式(一)

ASP.NET MVC 企業級實戰 —— 建立使用者許可權管理示例程式(一)

網上有很多討論ASP.NET MVC,也有討論Jquery外掛的,同時把兩者結合起來做專案開發的卻是比較少。

ASP.NET MVC是比較優秀的後臺框架,而前臺採用JQuery外掛會做出比較漂亮美觀的介面。

講解了如何將兩者結合來開發Web應該系統。

將要建立的使用者許可權管理模組是採用了NBlock快速開發框架,這套框架就是參考了假正經哥哥的思想和技術進行封裝和擴充套件而成。

使用者許可權管理的訪問地址:http://42.121.122.31/, 速度可能會慢,因為我是通過園豆購買的阿里雲主機,最差的那種配置。

 

下面進入我們的正題,一步一步來建立使用者許可權管理示例程式。

一、安裝NBlock框架

開啟Visual Studio 2010,點選 工具 -> 擴充套件管理器,如下圖所示:

QQ截圖20121109104615 

開啟擴充套件管理器之後,我們在聯機庫選單中可以找到NBlock快速開發框架,只需要在右側的查詢框中輸入 NBlock, 等一會就會出現如下圖所示的介面。我們只需要選中“NBlock快速開發框架”這項,並點選下載。

clip_image002[10]

點選“下載”按鈕之後,就會彈出下載並安裝的提示框,只有400多K, 一下子就下載完成了,下載中的介面如下圖所示。

clip_image004[6]

下載完成之後,會自動彈出安裝介面,我們只需要點選安裝即可,如下圖所示。

clip_image006[6]

安裝完成之後,我們再看看擴充套件管理器中的“NBlock快速開發框架”這條記錄,

 原先下載按鈕的位置變成了打鉤狀態,表示我們已經安裝了“NBlock快速開發框架”這套模版,如下圖所示。

clip_image008[6]

需要重新啟動Visual Studio 2010,我們才能選擇基於“NBlock快速開發框架”來建立企業級的專案或模組。

二、 建立OrgAuth專案

在安裝好“NBlock快速開發框架”之後,就可以建立基於“NBlock快速開發框架”的快速開發專案了。開啟Visual Studio 2010,點選 檔案 -> 新建 -> 專案 建立基於NBlock框架的快速開發專案,如下圖所示。專案名稱設定為OrgAuth。

clip_image002[12]

點選確定按鈕之後,Visual Studio 2010將會建立一個解決方案OrgAuth,包含三個專案, OrgAuth.Web 應用程式(MVC專案)、OrgAuth.Services業務服務層(類庫專案)和OrgAuth.Models資料模型層(類庫專案)。

三、 OrgAuth專案的目錄結構

OrgAuth包含三個專案,其中OrgAuth.Web 應用程式會自動增加一些檔案和目錄到專案中,如下圖所示。

clip_image003

預設情況下,OrgAuth.Web 應用程式有五個頂級目錄。

Controllers – 放置Controller 類,處理URL 請求。

Views – 放置UI 模板檔案,負責展示輸出結果,預設採用Razor檢視。

Scripts – 放置Javascript 類庫檔案和.js 檔案。

Contents – 放置CSS 和影象檔案,以及其他非動態的、非Javascript 檔案。

App_Data – 放置資料庫檔案。

OrgAuth.Web 應用程式目錄採用ASP.NET MVC 應用程式的大部分預設目錄結構。我們這裡去除了ASP.NET MVC 應用程式的Models目錄。將Model類單獨放置在OrgAuth.Models類庫專案中。

當我們展開/Controllers 目錄時,可以發現預設情況下,NBlock框架自動增加了2 個Controller 類,HomeController 和 EnumController。HomeController定義了登入介面和主框架介面的Action,EnumController定義了列舉型別,列舉項管理的相關Action。

clip_image004

當我們展開/Views 目錄時,發現自動添加了三個子目錄,分別為:/Enum,/Home 和 /Shared。/Shared目錄增加了常用的一些模板檔案,如左樹右列表、普通列表、普通表單、主從表的表單和普通對話方塊的佈局模板。

clip_image005

當我們展開/Scripts 目錄時,發現自動添加了jQuery指令碼庫和一些jQuery的外掛。外掛包含:列表、樹、對話方塊、日期控制元件、驗證控制元件等等。

clip_image006

當我們展開/Content目錄時,發現自動添加了/themes/Blue目錄,裡面放置了一些公共的樣式表和各個jQuery外掛的樣式表,其中Images目錄放置了各個外掛所用到的圖片。

clip_image007

當我們展開/App_Data目錄時,發現自動添加了Enum.db檔案,該檔案是Sqlite資料庫檔案。NBlock框架預設是採用Sqlite作為儲存資料庫的,NBlock框架不是必須要求採用Sqlite作為儲存資料庫的。事實上,對於企業應用系統通常至少會採用Sql Server作為儲存資料庫。更改儲存資料庫只需要在Web.config配置檔案修改下資料庫連線即可。

clip_image008

其中OrgAuth.Services業務服務層會自動增加Core目錄和RegisterService.cs檔案,如下圖所示。其中Core目錄有三個檔案nbEnumService.cs、nbPrivilegeService.cs、nbUserService.cs。

clip_image009

其中OrgAuth.Models資料模型層會自動增加Remark目錄和一些檔案,如下圖所示。Model.edmx為資料庫設計檔案,Remark目錄是為Model.edmx增加資料庫的備註資訊,而三個T4模板檔案是為了Model.edmx生成Code First 程式碼的。

clip_image010

除了上面講到的三個專案之外,還需要複製packages資料夾,裡面放置了NBlock框架的DLL和引用的第三方DLL檔案。如下圖所示。如果需要DLL,請QQ聯絡我:172787851。

clip_image012

四、 執行OrgAuth應用程式

通過Visual Studio 2010執行上一步建立OrgAuth應用程式,將啟用內建ASP.NET Web Server。如下是OrgAuth應用程式的登入介面。

clip_image002[14]

賬號和密碼都輸入admin之後登入系統,會顯示OrgAuth應用程式的主框架介面。如下圖所示。

clip_image004[8]

當我們點選左側選單的列舉管理,進入列舉型別和列舉項的管理介面,如下圖所示。點選列舉分類中的管理按鈕,可以維護列舉型別資訊。列舉資訊是指系統中常用到的字典資料,如使用者狀態有正常,停用等。

clip_image006[8]

當我們點選列舉管理中列舉分類的管理“按鈕”時,系統就會彈出列舉型別的對話方塊,裡面列出了所有的列舉型別,通過新增列舉型別、批量刪除來維護列舉型別資訊。也可以通過右側的快速檢索來查詢待維護的列舉型別資料。系統採用了彈出對話方塊的模式,並且可以彈出多層對話方塊。

clip_image008[8]

上述登入介面、主框架介面和列舉管理介面的功能實現是我們在建立基於NBlock框架專案時預設新增的,我們將使用這些程式碼作為快速開發專案的起始點。新增列舉資料之後的介面效果如下圖所示。

clip_image010[4]

呵呵,很久沒有發表blog了,發現調整格式真是一件累人的活。

到這裡我們已經完成了使用者許可權管理模組的搭建,非常簡單方便,接下來我們會講解如何快速開發一個使用者管理介面,敬請期待!