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

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

一、《基於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界面的開發效率。

框架佈局：如下是我總體性項目的總的效果圖。

【系統菜單欄】的內容，是動態從數據庫裏面獲取的菜單；【系統頂欄】放置一些信息展現，以及提供用戶對我的數據快速處理，如查看我的信息、註銷、鎖屏等操做內容；內容區通常包括【樹列表區】、【條件查詢區】和【列表數據及分頁】內容，內容區域主要是可視化展現的數據，能夠經過樹列表控件、表格控件進行展現，通常數據還有增刪改查、以及分頁的須要，所以須要整合各類功能的處理。另外，用戶的數據，除了查詢展現外，還須要有導入、導出等相關操做，這些是常規性的數據處理功能。

菜單的處理和展現：通常爲了管理方便，菜單分爲三級，選中的菜單和別的菜單樣式有所區分，菜單能夠摺疊最小化，效果以下所示。

   

 

二、《基於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）圖片相冊管理

編輯圖片界面以下所示：

圖片查看界面

 

若是有興趣，能夠繼續參考系列文章：

基於Metronic的Bootstrap開發框架經驗總結（1）-框架總覽及菜單模塊的處理

基於Metronic的Bootstrap開發框架經驗總結（2）--列表分頁處理和插件JSTree的使用

基於Metronic的Bootstrap開發框架經驗總結（3）--下拉列表Select2插件的使用

基於Metronic的Bootstrap開發框架經驗總結（4）--Bootstrap圖標的提取和利用 

基於Metronic的Bootstrap開發框架經驗總結（5）--Bootstrap文件上傳插件File Input的使用

基於Metronic的Bootstrap開發框架經驗總結（6）--對話框及提示框的處理和優化

基於Metronic的Bootstrap開發框架經驗總結（7）--數據的導入、導出及附件的查看處理

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

基於Metronic的Bootstrap開發框架經驗總結（9）--實現Web頁面內容的打印預覽和保存操做