在前面介紹了一系列的《基於Metronic的Bootstrap開發框架經驗總結》的隨筆文章，隨筆主要是介紹各個知識點的內容，對框架的總體性介面沒有很好的闡述，本篇隨筆主要介紹這個Bootstrap框架的總體性功能介面，介紹其中用到的知識點和整體性的介面。希望讀者對框架有一個更加直觀、真實的認識瞭解，介面設計以及相關思路可以借鑑提高，也可以對相關的內容進行相互探討，共同提高。

1、《基於Metronic的Bootstrap開發框架》技術特點

1）採用最新最炫的Bootstrap響應式框架技術

整個基於Metronic的Bootstrap開發框架，介面部分採用較新的Bootstrap技術，採用當前最新的Bootstrap3.x，集成了眾多功能強大的Bootstrap控制元件。

Bootstrap是一個前端的技術框架，很多平臺都可以採用，JAVA/PHP/.NET都可以用來做前端介面，整合JQuery可以實現非常豐富的介面效果，目前也有很多Bootstrap的外掛能夠提供給大家使用，本框架集合了眾多最為優秀的外掛，能給我們Web的使用者體驗提升到一個前所未有的水平。

Metronic是一個國外的基於HTML、JS等技術的Bootstrap開發框架整合，整合了很多Bootstrap的前端技術和外掛的使用，是一個非常不錯的技術框架。本框架以這個為基礎，結合我對MVC的Web框架的研究，整合了基於MVC的Bootstrap開發框架，使之能夠符合實際專案的結構需要。

框架後臺採用基於C#的MVC技術，是目前.NET開發最為成熟流行的技術，框架後臺資料庫支援Oracle、SqlServer、MySql、Sqlite、Access等常規資料庫，可通過配置進行自由切換，使用Enterprise Library模組進行資料訪問的控制，使得資料訪問更方便輕鬆。

整體框架開發採用Visual Studuio 2013以及頁面編輯工具Sublime Text結合開發，頁面以及後臺程式碼，通過程式碼生成工具Database2Sharp進行快速開發，實現整體性開發的最大效率提高。

框架的總體結構如下所示：

控制器設計：Bootstrap開發框架沿用了我的《Winform開發框架》和《基於EasyUI的Web框架》的很多架構設計思路和特點，對Controller進行了封裝。使得控制器能夠獲得很好的繼承關係，並能以更少的程式碼，更高效的開發效率，實現Web專案的開發工作，整個控制器的設計思路如下所示。

許可權控制：良好的控制器設計規則，可以為Web開發框架本身提供了很好使用者訪問控制和許可權控制，使得使用者介面呈現選單、Web介面的按鈕和內容、Action的提交控制，均能在總體許可權功能分配和控制之下。

程式碼快速生成：良好的架構使得無論在業務邏輯層、控制器層、Web介面的UI層，均能提供統一的程式碼邏輯，這些程式碼均能通過程式碼生成工具Database2Sharp進行生成。Web介面程式碼可以充分利用程式碼生成工具Database2Sharp的元資料資訊，實現Web介面的快速生成。有效減少出錯的機率，提高Web介面編碼的開發效率和樂趣，更可以使得企業內部的編碼模式進行高效的統一。

Enterprise Library程式碼生成，可以快速生成除介面外的整體性的框架程式碼，Bootstrap的Web介面程式碼生成，可以快速生成基於Metronic的Bootstrap的前端介面程式碼和後臺控制器程式碼，介面部分包括查詢、分頁、資料展示、資料匯入匯出、新增、編輯、檢視、刪除等基礎功能介面，生成後我們可以基於這個基礎上進行簡單、快速的修改即可符合實際需要，極大提高我們Web介面的開發效率。

框架佈局：以下是我整體性專案的總的效果圖。

【系統選單欄】的內容，是動態從資料庫裡面獲取的選單；【系統頂欄】放置一些資訊展示，以及提供使用者對個人資料快速處理，如檢視個人資訊、登出、鎖屏等操作內容；內容區一般包括【樹列表區】、【條件查詢區】和【列表資料及分頁】內容，內容區域主要是視覺化展示的資料，可以通過樹列表控制元件、表格控制元件進行展示，一般資料還有增刪改查、以及分頁的需要，因此需要整合各種功能的處理。另外，使用者的資料，除了查詢展示外，還需要有匯入、匯出等相關操作，這些是常規性的資料處理功能。

選單的處理和展示：一般為了管理方便，選單分為三級，選中的選單和別的選單樣式有所區分，選單可以摺疊最小化，效果如下所示。

2、《基於Metronic的Bootstrap開發框架》模組介面介紹

2.1 首頁圖表模組介面

2.2 系統頂欄功能

2.3 行業動態功能（政策法規、通知公告、動態資訊）

政策法規/通知公告/動態資訊 列表介面

編輯介面如下所示：

檢視內容介面如下所示：

2.4 客戶資訊管理

客戶列表介面如下所示：

客戶資訊編輯介面：

客戶資訊匯入介面：

2.5 客戶聯絡人管理

客戶聯絡人新增/編輯介面

客戶聯絡人檢視介面

附件資訊介面

2.6 通訊錄管理

通訊錄列表

通訊錄編輯介面如下所示。

2.7 許可權管理 

1) 系統使用者 列表介面

系統使用者匯入介面

系統使用者編輯介面

系統使用者的肖像上傳和編輯

系統使用者刪除確認對話方塊。

系統使用者的RDLC報表介面。

2）機構管理介面

組織機構包含使用者編輯介面

3）使用者角色管理

角色可操作功能集合展示

角色可訪問資料許可權控制：

角色包含機構管理：

4）系統功能管理

5）系統選單管理

編輯選單資訊介面：

選擇選單圖示介面：

6）系統登入日誌管理

7）通用字典管理

8）選單圖示管理

9）圖片相簿管理

編輯圖片介面如下所示：

圖片檢視介面

如果有興趣，可以繼續參考系列文章：