1、《基于Metronic的Bootstrap開(kāi)發(fā)框架》技術(shù)特點(diǎn)

1)采用最新最炫的Bootstrap響應式框架技術(shù)

整個(gè)基于Metronic的Bootstrap開(kāi)發(fā)框架,界面部分采用較新的Bootstrap技術(shù),采用當前最新的Bootstrap3.x,集成了眾多功能強大的Bootstrap插件。

Bootstrap是一個(gè)前端的技術(shù)框架,很多平臺都可以采用,JAVA/PHP/.NET都可以用來(lái)做前端界面,整合JQuery可以實(shí)現非常豐富的界面效果,目前也有很多Bootstrap的插件能夠提供給大家使用,本框架集合了眾多最為優(yōu)秀的插件,能給我們Web的用戶(hù)體驗提升到一個(gè)前所未有的水平。

Metronic是一個(gè)國外的基于HTML、JS等技術(shù)的Bootstrap開(kāi)發(fā)框架整合,整合了很多Bootstrap的前端技術(shù)和插件的使用,是一個(gè)非常不錯的技術(shù)框架。本框架以這個(gè)為基礎,結合我對MVC的Web框架的研究,整合了基于MVC的Bootstrap開(kāi)發(fā)框架,使之能夠符合實(shí)際項目的結構需要。

框架后臺采用基于C#的MVC技術(shù),是目前.NET開(kāi)發(fā)最為成熟流行的技術(shù),框架后臺數據庫支持Oracle、SqlServer、MySql、Sqlite、Access等常規數據庫,可通過(guò)配置進(jìn)行自由切換,使用Enterprise Library模塊進(jìn)行數據訪(fǎng)問(wèn)的控制,使得數據訪(fǎng)問(wèn)更方便輕松。

整體框架開(kāi)發(fā)采用Visual Studuio 2013以及頁(yè)面編輯工具Sublime Text結合開(kāi)發(fā),頁(yè)面以及后臺代碼,通過(guò)代碼生成工具Database2Sharp進(jìn)行快速開(kāi)發(fā),實(shí)現整體性開(kāi)發(fā)的最大效率提高。

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

控制器設計:Bootstrap開(kāi)發(fā)框架沿用了我的《Winform開(kāi)發(fā)框架》和《基于EasyUI的Web框架》的很多架構設計思路和特點(diǎn),對Controller進(jìn)行了封裝。使得控制器能夠獲得很好的繼承關(guān)系,并能以更少的代碼,更高效的開(kāi)發(fā)效率,實(shí)現Web項目的開(kāi)發(fā)工作,整個(gè)控制器的設計思路如下所示。

權限控制:良好的控制器設計規則,可以為Web開(kāi)發(fā)框架本身提供了很好用戶(hù)訪(fǎng)問(wèn)控制和權限控制,使得用戶(hù)界面呈現菜單、Web界面的按鈕和內容、Action的提交控制,均能在總體權限功能分配和控制之下。

代碼快速生成:良好的架構使得無(wú)論在業(yè)務(wù)邏輯層、控制器層、Web界面的UI層,均能提供統一的代碼邏輯,這些代碼均能通過(guò)代碼生成工具Database2Sharp進(jìn)行生成。Web界面代碼可以充分利用代碼生成工具Database2Sharp的元數據信息,實(shí)現Web界面的快速生成。有效減少出錯的幾率,提高Web界面編碼的開(kāi)發(fā)效率和樂(lè )趣,更可以使得企業(yè)內部的編碼模式進(jìn)行高效的統一。

 

Enterprise Library代碼生成,可以快速生成除界面外的整體性的框架代碼,Bootstrap的Web界面代碼生成,可以快速生成基于Metronic的Bootstrap的前端界面代碼和后臺控制器代碼,界面部分包括查詢(xún)、分頁(yè)、數據展示、數據導入導出、新增、編輯、查看、刪除等基礎功能界面,生成后我們可以基于這個(gè)基礎上進(jìn)行簡(jiǎn)單、快速的修改即可符合實(shí)際需要,極大提高我們Web界面的開(kāi)發(fā)效率。

框架布局:以下是我整體性項目的總的效果圖。

【系統菜單欄】的內容,是動(dòng)態(tài)從數據庫里面獲取的菜單;【系統頂欄】放置一些信息展示,以及提供用戶(hù)對個(gè)人數據快速處理,如查看個(gè)人信息、注銷(xiāo)、鎖屏等操作內容;內容區一般包括【樹(shù)列表區】、【條件查詢(xún)區】和【列表數據及分頁(yè)】?jì)热,內容區域主要是可視化展示的數據,可以通過(guò)樹(shù)列表控件、表格控件進(jìn)行展示,一般數據還有增刪改查、以及分頁(yè)的需要,因此需要整合各種功能的處理。另外,用戶(hù)的數據,除了查詢(xún)展示外,還需要有導入、導出等相關(guān)操作,這些是常規性的數據處理功能。

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

   

 

2、《基于Metronic的Bootstrap開(kāi)發(fā)框架》模塊界面介紹

2.1 首頁(yè)圖表模塊界面

2.2 系統頂欄功能

 

 

2.3 行業(yè)動(dòng)態(tài)功能(政策法規、通知公告、動(dòng)態(tài)信息)

政策法規/通知公告/動(dòng)態(tài)信息 列表界面

編輯界面如下所示:

查看內容界面如下所示:

 

2.4 客戶(hù)信息管理

客戶(hù)列表界面如下所示:

客戶(hù)信息編輯界面:

客戶(hù)信息導入界面:

 

2.5 客戶(hù)聯(lián)系人管理

客戶(hù)聯(lián)系人添加/編輯界面

客戶(hù)聯(lián)系人查看界面

附件信息界面

 

2.6 通訊錄管理

通訊錄列表

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

 

2.7 權限管理 

1) 系統用戶(hù) 列表界面

系統用戶(hù)導入界面

系統用戶(hù)編輯界面

系統用戶(hù)的肖像上傳和編輯

系統用戶(hù)刪除確認對話(huà)框。

系統用戶(hù)的RDLC報表界面。

 

2)機構管理界面

組織機構包含用戶(hù)編輯界面

 

3)用戶(hù)角色管理

角色可操作功能集合展示

角色可訪(fǎng)問(wèn)數據權限控制:

角色包含機構管理:

4)系統功能管理

5)系統菜單管理

編輯菜單信息界面:

選擇菜單圖標界面:

 

6)系統登錄日志管理

 

7)通用字典管理

8)菜單圖標管理

9)圖片相冊管理

編輯圖片界面如下所示:

圖片查看界面

工作流主頁(yè)視圖

在工作流模塊中,我們可以把一些待辦或者已辦的事項放在首頁(yè)里面,方便登陸后直接可以參考最新的一些信息,如下界面所示。

而在工作流的業(yè)務(wù)表單模塊中,我們可以提供了很多相關(guān)的業(yè)務(wù)表單管理界面,可以通過(guò)對應的功能菜單進(jìn)入對應的工作流業(yè)務(wù)表單列表,工作流模塊中我們也提供的一些常見(jiàn)業(yè)務(wù)表單供參考學(xué)習。

流程模板管理

 通過(guò)第一步的流程環(huán)節定義,我們接下來(lái)就基于流程環(huán)節,定義流程模板的內容了,流程模板是我們開(kāi)展一些工作流的基礎,也就是說(shuō),我們先有特定流程的模板,然后才有具體的流程示例。

流程模板我們定義的時(shí)候,需要指定它的具體名稱(chēng),另外有幾個(gè)字段是必須注意的,就是它的對應業(yè)務(wù)表名和創(chuàng )建流程URL、查看流程URL這幾個(gè)信息。

剛才只是定義了流程模板的一些基礎信息,對于這個(gè)流程模板,我們還需要確定它的流程步驟,這個(gè)才是工作流的靈魂所在,動(dòng)態(tài)化的流程步驟,可以滿(mǎn)足我們大多數變化流程的需要。


【我的審批工作】界面,如下界面所示。

業(yè)務(wù)受理列表

 業(yè)務(wù)受理列表,是根據我們數據庫中定義的流程模板,動(dòng)態(tài)列出申請單的創(chuàng )建入口,提供一個(gè)統一的入口方便我們處理。

一下是我們工作流模塊中定義好的一些流程模板,可以供創(chuàng )建業(yè)務(wù)表單。

業(yè)務(wù)表單菜單如下所示

我們也可以查看報銷(xiāo)申請單的列表界面。

查看具體報銷(xiāo)申請單信息界面如下所示,其右上角的審批、撤銷(xiāo)、流程日志、打印等功能按鈕也會(huì )根據情況顯示出來(lái)。