基于JQUERY與.NET的教學質(zhì)量監(jiān)控系統(tǒng)的設(shè)計與實現(xiàn)

摘 要： 在開發(fā)教學質(zhì)量監(jiān)控系統(tǒng)的過程中，自定義技術(shù)架構(gòu)，采用Visual Studio 2010作為開發(fā)工具。為增強可擴展性，采用分層設(shè)計并實現(xiàn)；為增強復用，自定義后臺各功能通用類庫；為具有良好的用戶體驗及交互性，前臺開發(fā)引入開源Jquery框架及Jquery EasyUI前臺組件包。該系統(tǒng)上線運行正常并具有良好的用戶體驗，系統(tǒng)結(jié)構(gòu)清晰，可擴展性強。

關(guān)鍵詞： 教學質(zhì)量監(jiān)控系統(tǒng)； 技術(shù)架構(gòu)； Jquery； Jquery EasyUI； Visual Studio 2010

中圖分類號：TP311.5 文獻標志碼：A 文章編號：1006-8228（2013）11-34-03

0 引言

提高教育教學質(zhì)量是高職院校內(nèi)涵發(fā)展的重要主題。教學質(zhì)量監(jiān)控在教學運行過程中具有重要作用。筆者所在學校自主開發(fā)了教學質(zhì)量監(jiān)控系統(tǒng)，主要功能包括教師教學質(zhì)量考核、教師與學生的互動交流、教學質(zhì)量監(jiān)控動態(tài)信息等功能。筆者利用主流軟件技術(shù)開發(fā)教學質(zhì)量監(jiān)控系統(tǒng)，通過實時采集學院教學質(zhì)量相關(guān)數(shù)據(jù)，使教學質(zhì)量監(jiān)控中心及各二級教學單位能夠?qū)虒W質(zhì)量作準確、實時的了解，為學院教學管理的決策提供意見和建議。本文采用JQUERY和.NET 技術(shù)相結(jié)合，采用Visual Studio 2010開發(fā)工具，采用分層設(shè)計并實現(xiàn)[1]，并重點對分層技術(shù)架構(gòu)下涉及到的若干關(guān)鍵技術(shù)的實現(xiàn)進行了探討。

1 基于JQUERY 和.NET的技術(shù)架構(gòu)

整體技術(shù)架構(gòu)采用分層設(shè)計[2]，分層設(shè)計的優(yōu)勢是能實現(xiàn)分散關(guān)注、松散耦合、邏輯重用，分為表示層、數(shù)據(jù)訪問層、業(yè)務(wù)處理層、公共組件四層。表示層是系統(tǒng)的UI部分，負責用戶與整個系統(tǒng)的交互，采用JQUERY和JQUERY下的封裝框架Easy UI，部分采用ASP.NET技術(shù)。數(shù)據(jù)訪問層又稱為持久層，主要負責數(shù)據(jù)庫的訪問，封裝對數(shù)據(jù)庫的Select、Insert、Update、Delete操作。業(yè)務(wù)處理層封裝業(yè)務(wù)處理邏輯，一部分位于后臺處理ASHX中，一部分以存儲過程的形式實現(xiàn)。公共組件層，存放抽象出的通用公共組件，JSON格式的數(shù)據(jù)轉(zhuǎn)換等存放其中。

以課程信息管理為例，描述以上結(jié)構(gòu)的具體設(shè)計與實現(xiàn)。訪問過程如圖1所示。

開發(fā)平臺采用Visual Studio 2010集成開發(fā)工具，數(shù)據(jù)庫使用SQL Server 2008。由于本系統(tǒng)的模塊和代碼眾多，采用解決方案文件夾對項目進行管理，以分層為依據(jù)建立多個項目來分離關(guān)注點[3]，解決方案結(jié)構(gòu)如圖2所示。

2 前臺開發(fā)

JQuery是JS的輕量級框架，JQuery的突出特點是開發(fā)的用戶體驗好，較少的開發(fā)代價能開發(fā)出用戶體驗好并且美觀的UI界面。該類庫中封裝了一些對象方法，能實現(xiàn)處理事件、運行動畫效果，添加Ajax交互進行異步獲取數(shù)據(jù)。本項目選取JQuery用于前臺開發(fā)，除了其代碼非常小巧，只有20K左右，更為重要的是其第三方開源插件豐富。

JQuery EasyUI是一組基于JQuery的擴展集合，功能類同于EXTJS，但代碼量很小，執(zhí)行速度較快。開發(fā)者不需要深入掌握Javascript，不需要深入了解css樣式，僅需要了解html標記語言。本系統(tǒng)采用JQuery和JQuery EasyUI作為前臺開發(fā)工具，改善用戶體驗，提高開發(fā)效率。

2.1 首頁實現(xiàn)

頁面整體設(shè)計為左側(cè)是折疊導航樹，右側(cè)為功能Tab面板。由于Easy UI封裝了CSS和JS文件，采用JQuery EasyUI庫實現(xiàn)整個頁面框架非常方便。僅需定義Html標記即能實現(xiàn)首頁頁面框架。在使用之前引入相應(yīng)的JS庫和CSS文件。

themes/default/easyui.css\"/>

rel=\"stylesheet\" type=\"text/css\"/>

左側(cè)導航菜單定義如下：

• 填寫教學質(zhì)量評價表

• 課程管理
  教學進程管理

右側(cè)為具體的業(yè)務(wù)功能，每一功能項新建Tab頁，以課程管理為例。設(shè)計為一屏多記錄的操作模式，頂部為ToolBar，進行單一課程的增加、刪除操作。為了方便，我們使用EasyUI的DataGrid來實現(xiàn)，界面代碼如下。