基於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、行業動態管理

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

二、修改內容界面

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

三、查看詳細信息

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

四、打印界面

通知公告內容的打印預覽界面以下所示，該模塊繼承了打印控件，所以預覽效果很是美觀。

五、文件導出到Word或者Excel操做

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

2、系統管理

一、用戶管理

用戶分類，能夠根據組織結構進行劃分，也能夠根據角色進行劃分，方便查找。

用戶信息編輯界面以下所示，包括了用戶基礎信息和用戶可操做功能，能夠查看編輯用戶的基礎信息，也能夠查看該用戶具備哪些功能。

查看用戶可操做功能，是查看該用戶包含角色具備的全部功能集合，這裏只能進行查看，若是須要調整用戶可操做的功能，可在角色管理模塊進行權限分配。

修改用戶密碼界面以下所示：

二、組織結構管理

爲了方便管理，組織機構是以一個樹形結構的方式進行展示，組織機構以公司層級進行劃分以便實現組織機構的分級管理，每一個公司的管理員，只能管理本身公司內部的組織機構關係。

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

三、角色管理

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

角色的權限是分級管理的，超級管理員管理全部的角色功能，具備最大的權限集合，可分配不一樣公司的管理員權限集合；公司所屬的管理員，只具備由超級管理員分配的權限。

角色的可操做功能（功能權限），能夠在該角色具備的所有權限上分配功能權限。

可訪問數據 （數據權限），是經過綁定角色和組織機構關係，從而實現角色數據權限的控制，業務系統在開發過程當中進行整合便可有效控制用戶的數據權限。

四、功能管理

 

爲了方便一次性添加多個功能單元，能夠經過「批量添加」操做進行功能的批量添加，批量添加界面以下所示。

五、菜單管理

 

添加菜單界面以下所示。

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

六、登錄日誌

七、字典管理

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

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

 

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

 

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

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

城市省份管理

八、圖表管理

統計圖表是不少應用程序須要擁有的功能，爲了更好展現圖表的使用操做，框架提供了多種樣式的圖表演示。

 以上就是整個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）--自動生成圖標樣式文件和圖標的選擇操做