基于MVC和FineUI的系統(tǒng)開發(fā)框架研究
2015-03-14 05:34:00尹向兵安徽警官職業(yè)學(xué)院教務(wù)處安徽合肥3003安徽城市管理職業(yè)學(xué)院國際商務(wù)系安徽合肥3060
關(guān)鍵詞：系統(tǒng)開發(fā)框架
尹向兵，周 婷（.安徽警官職業(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ù)雜性，實(shí)現(xiàn)團(tuán)隊(duì)協(xié)作開發(fā)，運(yùn)用FINEUI開發(fā)系統(tǒng)界面實(shí)現(xiàn)完美用戶體驗(yàn)。文章深入研究了MVC模式和FINEUI技術(shù)并提出兩者進(jìn)行高效整合的Web系統(tǒng)開發(fā)框架，提高系統(tǒng)可擴(kuò)展性、健壯性和可維護(hù)性，并大大縮短MIS開發(fā)周期。文章以在線自助組卷系統(tǒng)模塊為例研究其原理、實(shí)現(xiàn)和應(yīng)用。
關(guān)鍵詞：MVC；FineUI；框架；系統(tǒng)開發(fā)
0 引言
通過分析Web系統(tǒng)開發(fā)模式的原理以及View層實(shí)現(xiàn)的過程，重點(diǎn)研究了基于FineUI框架完成Web系統(tǒng)開發(fā)的特點(diǎn)和優(yōu)勢(shì)。針對(duì)應(yīng)用系統(tǒng)開發(fā)業(yè)務(wù)過程中團(tuán)隊(duì)開發(fā)的需求，團(tuán)隊(duì)成員專注點(diǎn)不同和快速完成視圖設(shè)計(jì)，提出了使用MVC模式并基于FineUI框架開發(fā)的解決方案。系統(tǒng)開發(fā)生命周期成本降低，程序員可以集中精力與業(yè)務(wù)邏輯，界面程序員更集中于表現(xiàn)形式上，視圖層和業(yè)務(wù)邏輯層的分離也使得Web程序代碼更易于修改和維護(hù)，達(dá)到標(biāo)準(zhǔn)定義、松散耦合、分散關(guān)注、邏輯復(fù)用的目的。
1 系統(tǒng)開發(fā)框架設(shè)計(jì)
實(shí)現(xiàn)一個(gè)系統(tǒng)開發(fā)，要有UI設(shè)計(jì)師，來設(shè)計(jì)超炫的界面，有DB設(shè)計(jì)人員完成優(yōu)良的數(shù)據(jù)庫設(shè)計(jì)，還有后臺(tái)的邏輯代碼人員。如何將這些人員有效地管理起來，從軟件開發(fā)流程上已經(jīng)有MSF等指導(dǎo)思想且這個(gè)流程中的代碼編寫環(huán)節(jié)，利用MVC多層式架構(gòu)實(shí)現(xiàn)軟件體系架構(gòu)設(shè)計(jì)。
采用MVC設(shè)計(jì)模式開發(fā)Web系統(tǒng)，對(duì)于開發(fā)復(fù)雜的應(yīng)用系統(tǒng)開發(fā)，程序人員可以將更多精力集中于業(yè)務(wù)某一方面，而不需要考慮系統(tǒng)中其他業(yè)務(wù)邏輯。使用FineUI框架來處理View（視圖）中數(shù)據(jù)顯示部分，通過代碼移植，能快速開發(fā)應(yīng)用系統(tǒng)視圖部分?；贛VC模式和FINEUI架構(gòu)的Web系統(tǒng)開發(fā)實(shí)現(xiàn)了高效快速開發(fā)的要求。
1.1深入三層架構(gòu)設(shè)計(jì)模式
三層系統(tǒng)結(jié)構(gòu)將應(yīng)用程序分成3個(gè)不同的邏輯層次：表示層（UI）、業(yè)務(wù)邏輯層（BLL）和數(shù)據(jù)訪問層（DAL）［1］。為了更好地在MVC中傳遞數(shù)據(jù)，引入模型層（Models），它是將數(shù)據(jù)庫中所有數(shù)據(jù)表轉(zhuǎn)化成對(duì)應(yīng)實(shí)體類。
1.2FINEUI簡介
FineUI是一組基于EXT JS的專業(yè)ASP.NET控件庫，擁有原生的AJAX支持和華麗的UI效果［2］。主要表現(xiàn)為：首先，基于EXT JS，它是一個(gè)非常優(yōu)秀的Ajax框架，用JavaScript編寫，與后臺(tái)技術(shù)無關(guān)，可以用來開發(fā)具有絢麗外觀的富客戶端應(yīng)用［3］；其次，豐富ASP.NET控件庫，F(xiàn)ineUI正是基于.NET服務(wù)器控件和HTML控件開發(fā)出強(qiáng)大的網(wǎng)絡(luò)應(yīng)用程序；最后，F(xiàn)ineUI是將二者結(jié)合的產(chǎn)物，是一個(gè)深度封裝的控件庫。
1.3系統(tǒng)開發(fā)框架技術(shù)微軟企業(yè)類庫
微軟企業(yè)類庫又稱企業(yè)庫，主要作用是解決程序開發(fā)過程中所面臨的Common問題，如Security、Log?ging、Data Access、Configuration Manage等，整體封裝這些系統(tǒng)通用模塊到程序包中，企業(yè)庫包含.NET類庫大部分實(shí)踐［4］。
2 MVC+FineUI框架結(jié)構(gòu)和運(yùn)行原理
2.1框架的整體結(jié)構(gòu)
MVC+FineUI框架結(jié)構(gòu)如圖1所示，分為表示層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層和實(shí)體模型層4個(gè)部分。表現(xiàn)層UI是實(shí)現(xiàn)用戶體驗(yàn)標(biāo)準(zhǔn)界面；系統(tǒng)應(yīng)用服務(wù)層或契約層Service實(shí)現(xiàn)用戶正面服務(wù)；業(yè)務(wù)邏輯層BLL是操作對(duì)象的方法類的集合；數(shù)據(jù)訪問層DAL是操作對(duì)象想要獲取的數(shù)據(jù)邏輯存放點(diǎn)；實(shí)體模型層Model是操作對(duì)象的屬性類的集合。
圖1 MVC+FineUI框架結(jié)構(gòu)Fig.1 Framework of MVC+FineUI
2.2架構(gòu)的運(yùn)行原理
各部分調(diào)用關(guān)系如圖2所示。從圖2可以看出，在數(shù)據(jù)訪問中，完全采用了“面向接口編程”思想。用戶通過瀏覽器FineUI控件向服務(wù)器發(fā)出請(qǐng)求映射，通過表示層中的控制器實(shí)現(xiàn)用戶正面服務(wù)，依賴接口編程，替換簡單工廠來實(shí)現(xiàn)，在數(shù)據(jù)庫訪問接口層實(shí)現(xiàn)繼承關(guān)系，進(jìn)入數(shù)據(jù)訪問實(shí)現(xiàn)層DAO，實(shí)現(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ā)框架的實(shí)現(xiàn)
MVC+FineUI開發(fā)框架的應(yīng)用是以自助式組卷抽題及成績分析系統(tǒng)為例，研究基于MVC模式的多層開發(fā)，降低耦合，提高模塊獨(dú)立性，團(tuán)隊(duì)分工協(xié)作完成系統(tǒng)開發(fā)。該系統(tǒng)主要用戶角色有學(xué)生、教師、管理員，實(shí)現(xiàn)功能有科目管理、章節(jié)管理、題庫管理、班級(jí)管理、學(xué)生管理、手動(dòng)組卷、隨機(jī)組卷、閱卷管理和成績查詢等，采用當(dāng)前流行的B/S模式開發(fā)。
3.1Models層構(gòu)建
根據(jù)數(shù)據(jù)庫中數(shù)據(jù)表編寫實(shí)體類，構(gòu)建字段并序列化［Serializable］實(shí)體類，實(shí)體類的屬性為Public。以管理員表Manager為例，將數(shù)據(jù)表Manager轉(zhuǎn)化為實(shí)體類Manager，本系統(tǒng)對(duì)于多個(gè)用戶角色使用的不同表，達(dá)到統(tǒng)一登錄界面，筆者編寫的一個(gè)視圖如下：
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)高效絢麗的客戶端界面，實(shí)現(xiàn)良好的用戶體驗(yàn)。FineUI和MVC的整合首先需要對(duì)FineUI.dll和Newtonsoft.Json.dll的引用，將extjs、ex?tjs_builder拷貝到項(xiàng)目根目錄下，并配置項(xiàng)目web.config文件，部分配置代碼如下：
......
3.3契約層（Services）構(gòu)建
根據(jù)業(yè)務(wù)正面編寫的系統(tǒng)功能清單，在表示層和業(yè)務(wù)層之間添加契約層，利用業(yè)務(wù)層類去實(shí)現(xiàn)契約層接口，契約層部分代碼如下。
查看某管理員信息接口：
Manager GetManager（int managerID）；
新增管理員信息接口：
Result
修改某管理員信息接口：
Result
3.4業(yè)務(wù)層（BLL）構(gòu)建
業(yè)務(wù)層是根據(jù)表示層業(yè)務(wù)情況，處理業(yè)務(wù)功能，在系統(tǒng)中去實(shí)現(xiàn)契約層的接口，以Manager業(yè)務(wù)為例，查看管理員業(yè)務(wù)信息代碼如下：
///功能：查看某管理員信息
public Manager GetManager（int managerID）
{ try
{ //調(diào)用數(shù)據(jù)庫查詢必要的數(shù)據(jù)
ManagerDao dal = new ManagerDao（）；
string where = string.Format（"［ID］={0}"，managerID）；
List
//結(jié)果處理
if（list.Count > 0）
{ return list［0］；}
return null；}
catch（Exception ex）{
LogHelper.Error（ex.Message）；
return null；}
}
3.5數(shù)據(jù)訪問層（DAL）構(gòu)建
利用數(shù)據(jù)訪問層為Manager實(shí)體類構(gòu)建數(shù)據(jù)訪問類DAO，該數(shù)據(jù)訪問類處理數(shù)據(jù)庫增刪改查的基本操作，Manager數(shù)據(jù)訪問類部分代碼如下：
public class ManagerDao
{ ///表的插入
/// 實(shí)體類
public bool Insert（Manager entity）
{ // SQL語句
string sql ="INSERT INTO［managers］（［ManagerNO］，［Name］，［Password］，［DepartmentID］，［Tele?phone］，［Email］，［Rank］，［Remove］）VALUES（@ManagerNO，@Name，@Password，@DepartmentID，@Tele?phone，@Email，@Rank，@Remove）"；
// SQL參數(shù)
IDataParameter［］cmdParms = new SqlParameter［］{
new SqlParameter（"@ManagerNO"，entity.ManagerNO），...此處省略部分字段...new SqlPa?rameter（"@Remove"，entity.Remove），}；
return SqlHelper.Instance.ExecuteNonQuery（System.Data.CommandType.Text，sql，cmdParms）> 0 ? true：false；}
4 結(jié)語
通過系統(tǒng)分析MVC模式結(jié)構(gòu)原理以及FineUI界面用戶體驗(yàn)，提出MVC模式和FineUI二者技術(shù)進(jìn)行高效整合的Web系統(tǒng)開發(fā)模式，采用異步交互，實(shí)現(xiàn)高效、華麗、更炫的用戶體驗(yàn)，可以提高開發(fā)效率和對(duì)象組件之間的耦合性，構(gòu)建一個(gè)功能強(qiáng)大、使用靈活、穩(wěn)定可靠的Web開發(fā)框架。
參考文獻(xiàn)（References）
［1］密君英.基于三層架構(gòu)的ASP.NET項(xiàng)目實(shí)戰(zhàn)教程［M］.北京：中國電力出版社，2011.
［2］SANSHI.FineUI：基于jQuery/ExtJS的ASP.NET控件庫［EB/OL］.（2012-02-11）［2015-03-21］.http：//www.cnblogs.com/ sanshi/archive/2012/02/11/2347235.html.
［3］白鵬皋，李兵，陳鐵勝.基于FineUI的零部件管理系統(tǒng)［J］.軟件導(dǎo)刊，2014，13（4）：61-63.
［4］周文紅.基于ASP.NET MVC框架的Web應(yīng)用開發(fā)［J］.計(jì)算機(jī)與現(xiàn)代化，2013（10）：197-199.
［5］黎吾鑫.基于Extjs_SpringMVC的Web系統(tǒng)框架及應(yīng)用研究［J］.云南大學(xué)學(xué)報(bào)，2013，35（S2）：110-115.
（責(zé)任編輯：范建鳳）
System Development Framework Based on MVC and FineUI
YIN Xiangbing1，ZHOU Ting2
（1.Dean′s Office，Anhui Vocational College of Police Officers，Hefei 230031，Anhui，China；2.International Business Department，Anhui Occupational College of City Management，Hefei 230601，Anhui，China）
Abstract：In order to reduce the complexity of Web system development，and realize the team development，used FINEUI development system interface to achieve the perfect user experience.Deeply researched the MVC pattern and FINEUI technology，put forward the efficient integration of Web system development framework，to improve the system scalability，robustness and maintainability，and greatly shorten the development cycle of MIS.Taking the online self test system module as an example to study its theory，implementation and application.
Keywords：MVC；FineUI；frame；system development
作者簡介：尹向兵（1981—），男，講師，碩士，研究方向：網(wǎng)絡(luò)安全。
基金項(xiàng)目：安徽省省級(jí)重點(diǎn)教學(xué)研究項(xiàng)目（2013jyxm400）
收稿日期：2015-04-21
DOI：10.16389/j.cnki.cn42-1737/n.2015.04.010
中圖分類號(hào)：TP391
文獻(xiàn)標(biāo)志碼：A
文章編號(hào)：1673-0143（2015）04-0336-04
猜你喜歡
小資CHIC！ELEGANCE(2022年1期)2022-01-11 00:49:59
數(shù)學(xué)物理學(xué)報(bào)(2020年3期)2020-07-27 01:19:46
法大研究生(2017年1期)2017-04-10 08:55:06
電子技術(shù)與軟件工程(2016年20期)2016-12-21 09:58:29
中國科技博覽(2016年18期)2016-10-19 11:19:15
電腦知識(shí)與技術(shù)(2016年21期)2016-10-18 23:15:33
中國新通信(2016年16期)2016-10-18 10:44:22
華東理工大學(xué)學(xué)報(bào)(自然科學(xué)版)(2015年2期)2015-11-07 09:16:21
