基于JQUERY與.NET的教學質量監控系統的設計與實現

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

關鍵詞： 教學質量監控系統； 技術架構； Jquery； Jquery EasyUI； Visual Studio 2010

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

0 引言

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

1 基于JQUERY 和.NET的技術架構

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

以課程信息管理為例，描述以上結構的具體設計與實現。訪問過程如圖1所示。

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

2 前臺開發

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

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

2.1 首頁實現

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

themes/default/easyui.css\"/>

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

左側導航菜單定義如下：

• 填寫教學質量評價表

• 課程管理
  教學進程管理

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