在前面介紹了一系列的《基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)》的隨筆文章，隨筆主要是介紹各個知識點的內(nèi)容，對框架的總體性界面沒有很好的闡述，本篇隨筆主要介紹這個Bootstrap框架的總體性功能界面，介紹其中用到的知識點和整體性的界面。希望讀者對框架有一個更加直觀、真實的認(rèn)識了解，界面設(shè)計以及相關(guān)思路可以借鑒提高，也可以對相關(guān)的內(nèi)容進行相互探討，共同提高。
1）采用最新最炫的Bootstrap響應(yīng)式框架技術(shù)
整個基于Metronic的Bootstrap開發(fā)框架，界面部分采用較新的Bootstrap技術(shù)，采用當(dāng)前最新的Bootstrap3.x，集成了眾多功能強大的Bootstrap控件。
Bootstrap是一個前端的技術(shù)框架，很多平臺都可以采用，JAVA/PHP/.NET都可以用來做前端界面，整合JQuery可以實現(xiàn)非常豐富的界面效果，目前也有很多Bootstrap的插件能夠提供給大家使用，本框架集合了眾多最為優(yōu)秀的插件，能給我們Web的用戶體驗提升到一個前所未有的水平。
Metronic是一個國外的基于HTML、JS等技術(shù)的Bootstrap開發(fā)框架整合，整合了很多Bootstrap的前端技術(shù)和插件的使用，是一個非常不錯的技術(shù)框架。本框架以這個為基礎(chǔ)，結(jié)合我對MVC的Web框架的研究，整合了基于MVC的Bootstrap開發(fā)框架，使之能夠符合實際項目的結(jié)構(gòu)需要。
框架后臺采用基于C#的MVC技術(shù)，是目前.NET開發(fā)最為成熟流行的技術(shù)，框架后臺數(shù)據(jù)庫支持Oracle、SqlServer、MySql、Sqlite、Access等常規(guī)數(shù)據(jù)庫，可通過配置進行自由切換，使用Enterprise Library模塊進行數(shù)據(jù)訪問的控制，使得數(shù)據(jù)訪問更方便輕松。
整體框架開發(fā)采用Visual Studuio 2013以及頁面編輯工具Sublime Text結(jié)合開發(fā)，頁面以及后臺代碼，通過代碼生成工具Database2Sharp進行快速開發(fā)，實現(xiàn)整體性開發(fā)的最大效率提高。
框架的總體結(jié)構(gòu)如下所示：
控制器設(shè)計：Bootstrap開發(fā)框架沿用了我的《Winform開發(fā)框架》和《基于EasyUI的Web框架》的很多架構(gòu)設(shè)計思路和特點，對Controller進行了封裝。使得控制器能夠獲得很好的繼承關(guān)系，并能以更少的代碼，更高效的開發(fā)效率，實現(xiàn)Web項目的開發(fā)工作，整個控制器的設(shè)計思路如下所示。
權(quán)限控制：良好的控制器設(shè)計規(guī)則，可以為Web開發(fā)框架本身提供了很好用戶訪問控制和權(quán)限控制，使得用戶界面呈現(xiàn)菜單、Web界面的按鈕和內(nèi)容、Action的提交控制，均能在總體權(quán)限功能分配和控制之下。
代碼快速生成：良好的架構(gòu)使得無論在業(yè)務(wù)邏輯層、控制器層、Web界面的UI層，均能提供統(tǒng)一的代碼邏輯，這些代碼均能通過代碼生成工具Database2Sharp進行生成。Web界面代碼可以充分利用代碼生成工具Database2Sharp的元數(shù)據(jù)信息，實現(xiàn)Web界面的快速生成。有效減少出錯的幾率，提高Web界面編碼的開發(fā)效率和樂趣，更可以使得企業(yè)內(nèi)部的編碼模式進行高效的統(tǒng)一。
Enterprise Library代碼生成，可以快速生成除界面外的整體性的框架代碼，Bootstrap的Web界面代碼生成，可以快速生成基于Metronic的Bootstrap的前端界面代碼和后臺控制器代碼，界面部分包括查詢、分頁、數(shù)據(jù)展示、數(shù)據(jù)導(dǎo)入導(dǎo)出、新增、編輯、查看、刪除等基礎(chǔ)功能界面，生成后我們可以基于這個基礎(chǔ)上進行簡單、快速的修改即可符合實際需要，極大提高我們Web界面的開發(fā)效率。
框架布局：以下是我整體性項目的總的效果圖。
【系統(tǒng)菜單欄】的內(nèi)容，是動態(tài)從數(shù)據(jù)庫里面獲取的菜單；【系統(tǒng)頂欄】放置一些信息展示，以及提供用戶對個人數(shù)據(jù)快速處理，如查看個人信息、注銷、鎖屏等操作內(nèi)容；內(nèi)容區(qū)一般包括【樹列表區(qū)】、【條件查詢區(qū)】和【列表數(shù)據(jù)及分頁】內(nèi)容，內(nèi)容區(qū)域主要是可視化展示的數(shù)據(jù)，可以通過樹列表控件、表格控件進行展示，一般數(shù)據(jù)還有增刪改查、以及分頁的需要，因此需要整合各種功能的處理。另外，用戶的數(shù)據(jù)，除了查詢展示外，還需要有導(dǎo)入、導(dǎo)出等相關(guān)操作，這些是常規(guī)性的數(shù)據(jù)處理功能。
菜單的處理和展示：一般為了管理方便，菜單分為三級，選中的菜單和別的菜單樣式有所區(qū)分，菜單可以折疊最小化，效果如下所示。
2.1 首頁圖表模塊界面
2.2 系統(tǒng)頂欄功能
2.3 行業(yè)動態(tài)功能（政策法規(guī)、通知公告、動態(tài)信息）
政策法規(guī)/通知公告/動態(tài)信息 列表界面
編輯界面如下所示：
查看內(nèi)容界面如下所示：
2.4 客戶信息管理
客戶列表界面如下所示：
客戶信息編輯界面：
客戶信息導(dǎo)入界面：
2.5 客戶聯(lián)系人管理
客戶聯(lián)系人添加/編輯界面
客戶聯(lián)系人查看界面
附件信息界面
2.6 通訊錄管理
通訊錄列表
通訊錄編輯界面如下所示。
2.7 權(quán)限管理
1) 系統(tǒng)用戶 列表界面
系統(tǒng)用戶導(dǎo)入界面
系統(tǒng)用戶編輯界面
系統(tǒng)用戶的肖像上傳和編輯
系統(tǒng)用戶刪除確認(rèn)對話框。
系統(tǒng)用戶的RDLC報表界面。
2）機構(gòu)管理界面
組織機構(gòu)包含用戶編輯界面
3）用戶角色管理
角色可操作功能集合展示
角色可訪問數(shù)據(jù)權(quán)限控制：
角色包含機構(gòu)管理：
4）系統(tǒng)功能管理
5）系統(tǒng)菜單管理
編輯菜單信息界面：
選擇菜單圖標(biāo)界面：
6）系統(tǒng)登錄日志管理
7）通用字典管理
8）菜單圖標(biāo)管理
9）圖片相冊管理
編輯圖片界面如下所示：
圖片查看界面
如果有興趣，可以繼續(xù)參考系列文章：
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（1）-框架總覽及菜單模塊的處理
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（2）--列表分頁處理和插件JSTree的使用
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（3）--下拉列表Select2插件的使用
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（4）--Bootstrap圖標(biāo)的提取和利用
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（5）--Bootstrap文件上傳插件File Input的使用
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（6）--對話框及提示框的處理和優(yōu)化
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（7）--數(shù)據(jù)的導(dǎo)入、導(dǎo)出及附件的查看處理
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（8）--框架功能總體界面介紹
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（9）--實現(xiàn)Web頁面內(nèi)容的打印預(yù)覽和保存操作
