基于Metronic的Bootstrap開發框架經驗總結（8）--框架功能總體界面介紹

在前面介紹了一系列的《基于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）圖片相冊管理

編輯圖片界面如下所示：

圖片查看界面