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

最近花了很多時間在重構和進一步提煉Winform開發框架的工作上，加上時不時有一些項目的開發工作，我博客里面介紹Web開發框架的文章比較少，其實以前在單位工作，80%的時間是做Web開發的，很早就形成了自己的一套Web開發框架，但是由於一些個人原因，一直沒有來得及好好整理和推廣，其實那套Web開發框架對大多數企業信息化還是很有幫助的，包括了整體性的框架布局、樣式，以及權限控制、菜單管理、字典管理、工作流審批管理等常見模塊，不過總體覺得技術上是采用asp.net的Webform技術，因此現在MVC大行其道，一直想把它徹底改造過來，本文是介紹基於MVC4+EasyUI的最新版Web開發框架的一系列形成過程，期間包括一些MVC4技術，EasyUI技術，JQuery技術，以及一些我對整體框架改造的基礎性東西，力求更加穩定、通用、高效、簡潔，最少的代碼做最多的事情。

1、舊的Web開發框架回顧

在原先的Web框架里面，主要是采用FrameSet的原始方式進行布局，很多內容依靠Javascript類庫進行操作，小部分采用了EasyUI的一些特性，總體來說，是比較傳統的一種框架模式，這個框架里面我已經集成了用戶角色等權限方面的管理和控制、菜單管理、字典管理、業務流程審批管理等模塊，因此對開發常規的行業應用有着比較快的開發效率，不過缺點也比較明顯，就是在多瀏覽器支持方面，沒有做的很好，框架里面采用的布局、樣式及技術等方面不夠統一，不夠新穎，但即使這樣，這套框架也順利用來開發了幾套很大規模的行業應用了，項目的大概布局和樣式，如下所以。

在Ajax技術如火如荼的時候，我也常常覺得，應該結合一些新的技術特點，來改造一下我自己的框架，因此，使用了純粹的AJax技術+Asp.NET的“一般處理程序”，也就是ashx的C#后台處理 + HTML的頁面來實現數據的處理和顯示操作，於是我調整開發了Web的權限系統作為實驗（詳細可參考《Web開發框架之權限管理系統》一文的介紹，界面效果如下所示。

這種框架的布局其實已經是利用了比較潮的EasyUI界面布局，得到一些老客戶的支持和鼓勵，不過我覺得如果把框架全部調整為這種HTML+AJax+ASHX處理方式，我覺得還是挺麻煩的，而且逐漸MVC這一技術已經越來越成熟和應用更廣泛了，因此整體性使用MVC來處理，可能能夠帶來更好的效率和減少復雜性。

不過我覺得使用EasyUI來實現這樣的布局，以及模塊的分頁面展示（類似Winform的多文檔管理，且可以右鍵菜單進行多種關閉頁面）的方式，對一些企業應用、行業管理系統、單位信息化系統，應該是比較不錯的界面展示了，相對於上面第一種的框架界面，這種更具有瀏覽器兼容性，能夠適應多瀏覽器的展現，這樣整個世界就清凈很多了。

2、基於MVC+EasyUI的框架效果

因此為了搭建整個MVC+EasyUI等技術結合的Web開發框架，就從我原先開發的Web的通用權限管理系統進行改進，來實現整個開發框架的預演了。首先我利用Winform權管理系統的業務邏輯等底層模塊，在這個基礎上開發基於MVC的Web項目，也就是界面層以下的邏輯我們暫且不考慮，專注MVC帶來的變化。

下面的項目工程文件視圖，是我做好的，基於MVC4+EasyUI的最新的Web權限管理系統。

運行系統后，登錄界面和主界面如下所示。

我們知道，一般信息管理系統都是需要分頁顯示，編輯，查看等內容的，這些使用EasyUI來實現效果還是比較好的。下面我以一個登錄日志的模塊來展示分頁處理和彈出對話框，展示信息。

編輯界面效果如下所示。

如果查看信息，則不需要編輯框了，直接用Lable展示即可，如下所示。

 這些就是整個改造后的權限系統里面的一些截圖界面，權當做一個總體性的概括，不設計技術實現的任何東西，下篇開始，着重介紹MVC項目中設計到的一些技術實現和經驗總結，希望大家多多支持。 

 

基於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）--自動生成圖標樣式文件和圖標的選擇操作