基於MVC4+EasyUI的Web開發框架形成之旅--框架總體界面介紹


在前面介紹了一些關於最新基於MVC4+EasyUI的Web開發框架文章,雖然Web開發框架的相關技術文章會隨着技術的探討一直寫下去,不過這個系列的文章,到這里做一個總結,展示一下整體基於MVC4+EasyUI的界面效果,讓大家對這款Web開發框架有一個形象的了解,界面設計以及相關思路可以借鑒提高,也可以對相關的內容進行相互探討,共同提高。

技術特點:整個Web開發框架,界面部分采用較新的技術,包括MVC4,最新版本的EasyUI,以及zTree樹形控件、Uploadify文件上傳組件等模塊,另外還結合了打印模塊LODOP進行頁面打印、文件Word或者Excel導出操作等,數據支持Oracle、SqlServer、MySql、Sqlite、Access等常規數據庫,可通過配置進行自由切換,使用Enterprise Library模塊進行數據訪問的控制,使得數據訪問更方便輕松。

控制器設計:Web開發框架沿用了我的《Winform開發框架》的很多架構設計思路和特點,對Controller進行了封裝。使得控制器能夠獲得很好的繼承關系,並能以更少的代碼,更高效的開發效率,實現Web項目的開發工作,整個控制器的設計思路如下所示。

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

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

一、登陸及主界面

1、登陸界面

2、框架主體界面

 

圖標樣式生成管理

 

 

二、行業動態管理

1、政策法規/通知公告/動態信息 列表界面

2、修改內容界面

通知公告的內容編輯界面如下所示。

3、查看詳細信息

通知公告的查看詳細信息界面如下所示。

4、打印界面

通知公告內容的打印預覽界面如下所示,該模塊繼承了打印控件,因此預覽效果非常美觀。

5、文件導出到Word或者Excel操作

通知公告可以導出Excel或者Word文件,在MVC控制器端使用aspose.word和aspose.excel控件,使得導出的內容更加美觀規范。

二、系統管理

1、用戶管理

用戶分類,可以根據組織結構進行划分,也可以根據角色進行划分,方便查找。

用戶信息編輯界面如下所示,包括了用戶基礎信息和用戶可操作功能,可以查看編輯用戶的基礎信息,也可以查看該用戶具有哪些功能。

查看用戶可操作功能,是查看該用戶包含角色具有的所有功能集合,這里只能進行查看,如果需要調整用戶可操作的功能,可在角色管理模塊進行權限分配。

修改用戶密碼界面如下所示:

2、組織結構管理

為了方便管理,組織機構是以一個樹形結構的方式進行展現,組織機構以公司層級進行划分以便實現組織機構的分級管理,每個公司的管理員,只能管理自己公司內部的組織機構關系。

雙擊任何一個組織機構節點,可以展開機構的詳細信息,以及機構的相關信息:包含用戶和所屬角色。這樣可以為組織機構的對應用戶,分配具有特定角色,包含人員也就快速具有了對應角色的一切權限。 

3、角色管理

角色也是根據公司層級進行分級管理的,一個公司內部,角色名稱不能重復。角色管理,包括管理角色的基礎信息,角色的可操作功能(功能權限)和可訪問數據 (數據權限),並通過制定用戶或者機構方式,最終實現用戶權限的控制。

角色的權限是分級管理的,超級管理員管理所有的角色功能,具有最大的權限集合,可分配不同公司的管理員權限集合;公司所屬的管理員,只具有由超級管理員分配的權限。

角色的可操作功能(功能權限),可以在該角色具有的全部權限上分配功能權限。

可訪問數據 (數據權限),是通過綁定角色和組織機構關系,從而實現角色數據權限的控制,業務系統在開發過程中進行整合即可有效控制用戶的數據權限。

4、功能管理

 

為了方便一次性添加多個功能單元,可以通過“批量添加”操作進行功能的批量添加,批量添加界面如下所示。

5、菜單管理

 

添加菜單界面如下所示。

查看菜單詳細信息界面如下所示。

6、登陸日志

7、字典管理

字典管理包括了字典類別的管理和字典數據的管理,通過在界面中集成樹控件,單擊任何一個節點,均能進行類別字典數據的刷新,然后在右邊進行展示,界面如下所示。

在字典類別中添加,彈出一個對話框,並以當前的字典類別作為父類節點,界面如下所示。

 

修改字典數據的界面如下所示。

 

查看字典數據的界面如下所示。

除了單項字典數據的添加,有時候,批量添加字典數據也是很方便、很重要的,因此提供了一個批量字典數據錄入的界面,如下所示。

城市省份管理

8、圖表管理

統計圖表是很多應用程序需要擁有的功能,為了更好展示圖表的使用操作,框架提供了多種樣式的圖表演示。

 以上就是整個Web框架的部分界面截圖,在Web開發過程中,往往會碰到不少細節上的問題,需要搜索很多相關文章進行解決,界面的美觀性也進行了特別的完善,力求能夠直接使用在具體的項目工程中,而不需要過多的進行處理。

本系列文章列表如下:

 

基於MVC4+EasyUI的Web開發框架的系列文章:

 基於MVC4+EasyUI的Web開發框架形成之旅--總體介紹 

基於MVC4+EasyUI的Web開發框架形成之旅--MVC控制器的設計 

基於MVC4+EasyUI的Web開發框架形成之旅--界面控件的使用 

基於MVC4+EasyUI的Web開發框架形成之旅--附件上傳組件uploadify的使用 

基於MVC4+EasyUI的Web開發框架形成之旅--框架總體界面介紹

 基於MVC4+EasyUI的Web開發框架形成之旅--基類控制器CRUD的操作 

基於MVC4+EasyUI的Web開發框架形成之旅--權限控制 

基於MVC4+EasyUI的Web開發框架經驗總結(1)-利用jQuery Tags Input 插件顯示選擇記錄 

基於MVC4+EasyUI的Web開發框架經驗總結(2)- 使用EasyUI的樹控件構建Web界面 

基於MVC4+EasyUI的Web開發框架經驗總結(3)- 使用Json實體類構建菜單數據 

基於MVC4+EasyUI的Web開發框架經驗總結(4)--使用圖表控件Highcharts 

基於MVC4+EasyUI的Web開發框架經驗總結(5)--使用HTML編輯控件CKEditor和CKFinder 

基於MVC4+EasyUI的Web開發框架經驗總結(6)--在頁面中應用下拉列表的處理 

基於MVC4+EasyUI的Web開發框架經驗總結(7)--實現省份、城市、行政區三者聯動 

基於MVC4+EasyUI的Web開發框架經驗總結(8)--實現Office文檔的預覽 

基於MVC4+EasyUI的Web開發框架經驗總結(9)--在Datagrid里面實現外鍵字段的轉義操作 

基於MVC4+EasyUI的Web開發框架經驗總結(10)--在Web界面上實現數據的導入和導出 

基於MVC4+EasyUI的Web開發框架經驗總結(11)--使用Bundles處理簡化頁面代碼 

基於MVC4+EasyUI的Web開發框架經驗總結(12)--利用Jquery處理數據交互的幾種方式 

基於MVC4+EasyUI的Web開發框架經驗總結(13)--DataGrid控件實現自動適應寬帶高度 

基於MVC4+EasyUI的Web開發框架經驗總結(14)--自動生成圖標樣式文件和圖標的選擇操作


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM