摘 要: 在開發教學質量監控系統的過程中,自定義技術架構,采用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來實現,界面代碼如下。