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