尹向兵，周　婷（.安徽警官職業(yè)學(xué)院　教務(wù)處，安徽　合肥　3003；.安徽城市管理職業(yè)學(xué)院　國際商務(wù)系，安徽　合肥　3060）

基于MVC和FineUI的系統(tǒng)開發(fā)框架研究

尹向兵1，周婷2
（1.安徽警官職業(yè)學(xué)院教務(wù)處，安徽合肥230031；2.安徽城市管理職業(yè)學(xué)院國際商務(wù)系，安徽合肥230601）

摘要：為了降低Web系統(tǒng)開發(fā)的復(fù)雜性，實現(xiàn)團隊協(xié)作開發(fā)，運用FINEUI開發(fā)系統(tǒng)界面實現(xiàn)完美用戶體驗。文章深入研究了MVC模式和FINEUI技術(shù)并提出兩者進行高效整合的Web系統(tǒng)開發(fā)框架，提高系統(tǒng)可擴展性、健壯性和可維護性，并大大縮短MIS開發(fā)周期。文章以在線自助組卷系統(tǒng)模塊為例研究其原理、實現(xiàn)和應(yīng)用。

關(guān)鍵詞：MVC；FineUI；框架；系統(tǒng)開發(fā)

0　引言

通過分析Web系統(tǒng)開發(fā)模式的原理以及View層實現(xiàn)的過程，重點研究了基于FineUI框架完成Web系統(tǒng)開發(fā)的特點和優(yōu)勢。針對應(yīng)用系統(tǒng)開發(fā)業(yè)務(wù)過程中團隊開發(fā)的需求，團隊成員專注點不同和快速完成視圖設(shè)計，提出了使用MVC模式并基于FineUI框架開發(fā)的解決方案。系統(tǒng)開發(fā)生命周期成本降低，程序員可以集中精力與業(yè)務(wù)邏輯，界面程序員更集中于表現(xiàn)形式上，視圖層和業(yè)務(wù)邏輯層的分離也使得Web程序代碼更易于修改和維護，達到標準定義、松散耦合、分散關(guān)注、邏輯復(fù)用的目的。

1　系統(tǒng)開發(fā)框架設(shè)計

實現(xiàn)一個系統(tǒng)開發(fā)，要有UI設(shè)計師，來設(shè)計超炫的界面，有DB設(shè)計人員完成優(yōu)良的數(shù)據(jù)庫設(shè)計，還有后臺的邏輯代碼人員。如何將這些人員有效地管理起來，從軟件開發(fā)流程上已經(jīng)有MSF等指導(dǎo)思想且這個流程中的代碼編寫環(huán)節(jié)，利用MVC多層式架構(gòu)實現(xiàn)軟件體系架構(gòu)設(shè)計。

采用MVC設(shè)計模式開發(fā)Web系統(tǒng)，對于開發(fā)復(fù)雜的應(yīng)用系統(tǒng)開發(fā)，程序人員可以將更多精力集中于業(yè)務(wù)某一方面，而不需要考慮系統(tǒng)中其他業(yè)務(wù)邏輯。使用FineUI框架來處理View（視圖）中數(shù)據(jù)顯示部分，通過代碼移植，能快速開發(fā)應(yīng)用系統(tǒng)視圖部分。基于MVC模式和FINEUI架構(gòu)的Web系統(tǒng)開發(fā)實現(xiàn)了高效快速開發(fā)的要求。

1.1深入三層架構(gòu)設(shè)計模式

三層系統(tǒng)結(jié)構(gòu)將應(yīng)用程序分成3個不同的邏輯層次：表示層（UI）、業(yè)務(wù)邏輯層（BLL）和數(shù)據(jù)訪問層（DAL）［1］。為了更好地在MVC中傳遞數(shù)據(jù)，引入模型層（Models），它是將數(shù)據(jù)庫中所有數(shù)據(jù)表轉(zhuǎn)化成對應(yīng)實體類。

1.2FINEUI簡介

FineUI是一組基于EXT JS的專業(yè)ASP.NET控件庫，擁有原生的AJAX支持和華麗的UI效果［2］。主要表現(xiàn)為：首先，基于EXT JS，它是一個非常優(yōu)秀的Ajax框架，用JavaScript編寫，與后臺技術(shù)無關(guān)，可以用來開發(fā)具有絢麗外觀的富客戶端應(yīng)用［3］；其次，豐富ASP.NET控件庫，F(xiàn)ineUI正是基于.NET服務(wù)器控件和HTML控件開發(fā)出強大的網(wǎng)絡(luò)應(yīng)用程序；最后，F(xiàn)ineUI是將二者結(jié)合的產(chǎn)物，是一個深度封裝的控件庫。

1.3系統(tǒng)開發(fā)框架技術(shù)微軟企業(yè)類庫

微軟企業(yè)類庫又稱企業(yè)庫，主要作用是解決程序開發(fā)過程中所面臨的Common問題，如Security、Log?ging、Data Access、Configuration Manage等，整體封裝這些系統(tǒng)通用模塊到程序包中，企業(yè)庫包含.NET類庫大部分實踐［4］。

2　MVC+FineUI框架結(jié)構(gòu)和運行原理

2.1框架的整體結(jié)構(gòu)

MVC+FineUI框架結(jié)構(gòu)如圖1所示，分為表示層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層和實體模型層4個部分。表現(xiàn)層UI是實現(xiàn)用戶體驗標準界面；系統(tǒng)應(yīng)用服務(wù)層或契約層Service實現(xiàn)用戶正面服務(wù)；業(yè)務(wù)邏輯層BLL是操作對象的方法類的集合；數(shù)據(jù)訪問層DAL是操作對象想要獲取的數(shù)據(jù)邏輯存放點；實體模型層Model是操作對象的屬性類的集合。

圖1　MVC+FineUI框架結(jié)構(gòu)Fig.1 Framework of MVC+FineUI

2.2架構(gòu)的運行原理

各部分調(diào)用關(guān)系如圖2所示。從圖2可以看出，在數(shù)據(jù)訪問中，完全采用了“面向接口編程”思想。用戶通過瀏覽器FineUI控件向服務(wù)器發(fā)出請求映射，通過表示層中的控制器實現(xiàn)用戶正面服務(wù)，依賴接口編程，替換簡單工廠來實現(xiàn)，在數(shù)據(jù)庫訪問接口層實現(xiàn)繼承關(guān)系，進入數(shù)據(jù)訪問實現(xiàn)層DAO，實現(xiàn)所有子類的增刪改查的公用方法，控制器調(diào)用通用類完成結(jié)果數(shù)據(jù)到ASP.NET頁面，有FineUI控件接收數(shù)據(jù)，完成結(jié)果顯示［5］。

圖2　MVC+FineUI框架調(diào)用關(guān)系Fig.2 Calling relationship of MVC+FineUI framework

3　MVC+FineUI開發(fā)框架的實現(xiàn)

MVC+FineUI開發(fā)框架的應(yīng)用是以自助式組卷抽題及成績分析系統(tǒng)為例，研究基于MVC模式的多層開發(fā)，降低耦合，提高模塊獨立性，團隊分工協(xié)作完成系統(tǒng)開發(fā)。該系統(tǒng)主要用戶角色有學(xué)生、教師、管理員，實現(xiàn)功能有科目管理、章節(jié)管理、題庫管理、班級管理、學(xué)生管理、手動組卷、隨機組卷、閱卷管理和成績查詢等，采用當(dāng)前流行的B/S模式開發(fā)。

3.1Models層構(gòu)建

根據(jù)數(shù)據(jù)庫中數(shù)據(jù)表編寫實體類，構(gòu)建字段并序列化［Serializable］實體類，實體類的屬性為Public。以管理員表Manager為例，將數(shù)據(jù)表Manager轉(zhuǎn)化為實體類Manager，本系統(tǒng)對于多個用戶角色使用的不同表，達到統(tǒng)一登錄界面，筆者編寫的一個視圖如下：

create view user_info

as

select ID，ManagerNO as Account，Name，Password，RANK from managers union

select ID，TeacherNO，Name，Password，′4′from teachers union

select ID，StudentNO，Name，Password，′5′from students union

select ID，EnterpriseNO，ConnectMan，Password，′6′from enterprises

3.2表示層（UI）構(gòu)建

表示層主要使用FineUI框架代替.Net服務(wù)器組件完成異步更新，展現(xiàn)高效絢麗的客戶端界面，實現(xiàn)良好的用戶體驗。FineUI和MVC的整合首先需要對FineUI.dll和Newtonsoft.Json.dll的引用，將extjs、ex?tjs_builder拷貝到項目根目錄下，并配置項目web.config文件，部分配置代碼如下：