程方豪

摘要：綜合教務(wù)處課表查詢模塊的優(yōu)缺點(diǎn)，設(shè)計(jì)出美化版課表顯示界面。采用ASP.NET的三層架構(gòu)思想，在實(shí)現(xiàn)課程名稱、任課教師、上課地點(diǎn)等課程基本信息查詢功能的基礎(chǔ)上，以圓角半透明漸變顯示塊為課表顯示單元，對(duì)課表外觀進(jìn)行了美化，并增加了課程筆記功能。

關(guān)鍵詞關(guān)鍵詞：課程表；ASP.NET；顯示塊；視圖；數(shù)據(jù)集

DOIDOI：10.11907/rjdk.161372

中圖分類號(hào)：TP319文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)文章編號(hào)：16727800（2016）007009803

0引言

隨著互聯(lián)網(wǎng)的發(fā)展和普及，電子課表成為網(wǎng)絡(luò)教育服務(wù)不可或缺的功能。每位入庫(kù)學(xué)生的電子課表可直接由教務(wù)系統(tǒng)獲取和導(dǎo)出。通過(guò)電子課表，學(xué)生可以直接查看上課時(shí)間、上課地點(diǎn)和任課教師，可以對(duì)每個(gè)課程進(jìn)行評(píng)論和打分，可以復(fù)制和打印課表。以超級(jí)課程表為代表的電子課表深受學(xué)生喜愛(ài)。但目前這類軟件只有移動(dòng)客戶端APP版本[1]，缺乏桌面PC端版本。同時(shí)，教務(wù)處的課表界面多面向教師，美觀度不夠，難以滿足學(xué)生喜好。本文設(shè)計(jì)和實(shí)現(xiàn)了美化版的課表查詢頁(yè)面，并對(duì)課表功能進(jìn)行了一定的補(bǔ)充和完善。

1ASP.NET三層架構(gòu)思想

ASP.NET三層架構(gòu)自底向上為數(shù)據(jù)訪問(wèn)層、業(yè)務(wù)邏輯層和表示層。數(shù)據(jù)訪問(wèn)層使用強(qiáng)類型的數(shù)據(jù)集，通過(guò)結(jié)構(gòu)化查詢SQL語(yǔ)句實(shí)現(xiàn)對(duì)數(shù)據(jù)表的查詢、插入、更新、刪除等操作。業(yè)務(wù)邏輯層是在數(shù)據(jù)訪問(wèn)層和表示層之間進(jìn)行數(shù)據(jù)交換的媒介，按照系統(tǒng)業(yè)務(wù)需求來(lái)調(diào)用數(shù)據(jù)訪問(wèn)層中的數(shù)據(jù)集，并將各種業(yè)務(wù)規(guī)則集合到一個(gè)邏輯中。表示層是為客戶提供用于交互的前端用戶顯示界面，幫助用戶認(rèn)識(shí)和定位應(yīng)用服務(wù)，將業(yè)務(wù)邏輯層中傳遞的數(shù)據(jù)以美觀、明了的方式呈現(xiàn)出來(lái)，主要由ASP.NET頁(yè)面實(shí)現(xiàn)[2]，如圖1所示。

2網(wǎng)頁(yè)版課程表設(shè)計(jì)

2.1數(shù)據(jù)庫(kù)設(shè)計(jì)

項(xiàng)目采用SQL 2008 R2設(shè)計(jì)后臺(tái)數(shù)據(jù)庫(kù)，針對(duì)學(xué)生、課程、教師、筆記等數(shù)據(jù)對(duì)象建立相應(yīng)的表單和視圖：①學(xué)生信息表：保存學(xué)生的學(xué)號(hào)、姓名、性別、專業(yè)、登錄密碼、郵箱等基本信息，設(shè)置學(xué)號(hào)為主鍵；②課程基本信息表：記錄學(xué)校所有課程的編號(hào)、課程名稱、開課學(xué)院、課程性質(zhì)等基本信息，設(shè)置課程編號(hào)為主鍵；③教師信息表：保存教師的編號(hào)、教師名稱、學(xué)院、職稱等基本信息，設(shè)置教師編號(hào)為主鍵；④課程開課信息表：記錄開課的編號(hào)、課程編號(hào)、老師編號(hào)、上課地點(diǎn)等信息，設(shè)置開課編號(hào)為主鍵；⑤學(xué)生選課信息表：記錄選課編號(hào)、開課編號(hào)、學(xué)生學(xué)號(hào)等信息，設(shè)置選課編號(hào)為主鍵；⑥個(gè)人筆記表：記錄學(xué)生學(xué)號(hào)、筆記內(nèi)容、備注等信息，設(shè)置學(xué)生學(xué)號(hào)為主鍵；⑦學(xué)生姓名專業(yè)視圖：根據(jù)學(xué)生信息表，用于獲取學(xué)生的姓名和專業(yè)信息；⑧課表視圖：結(jié)合學(xué)生信息表、教師信息表、課程開課信息表和學(xué)生選課信息表，獲取學(xué)生所選課程的基本信息，從而為構(gòu)建學(xué)生課表提供數(shù)據(jù)基礎(chǔ)。為數(shù)據(jù)集建立提供數(shù)據(jù)源的學(xué)生姓名專業(yè)視圖和課表視圖如圖2和圖3所示。

2.2業(yè)務(wù)邏輯與數(shù)據(jù)訪問(wèn)設(shè)計(jì)

學(xué)生課表查詢模塊主要通過(guò)數(shù)據(jù)集的方式來(lái)綁定和獲取數(shù)據(jù)源[3]。首先建立命名為DataSet_Scoursetable.xsd的數(shù)據(jù)集，然后向數(shù)據(jù)集中添加3個(gè)視圖對(duì)象，包括課表TableAdapter、學(xué)生姓名專業(yè)TableAdapter和學(xué)生筆記TableAdapter，分別用于獲取課表信息、學(xué)生姓名和專業(yè)信息、個(gè)人筆記信息以及實(shí)現(xiàn)對(duì)個(gè)人筆記的插入和清空操作。

對(duì)于學(xué)生姓名專業(yè)的獲取，定義一個(gè)string，用于獲取登錄界面所傳遞的學(xué)生學(xué)號(hào)；在pagload事件里根據(jù)sesssion所傳遞的學(xué)號(hào)，調(diào)用學(xué)生姓名專業(yè)的數(shù)據(jù)集對(duì)象tadp_sname獲取數(shù)據(jù)，并將對(duì)應(yīng)的值顯示在頁(yè)面頂部的標(biāo)簽中。

通過(guò)調(diào)用課表視圖數(shù)據(jù)集stap_course的getdata（）方法來(lái)獲取該學(xué)生所選課程信息，并顯示在每個(gè)課程信息塊內(nèi)。所有課程信息塊在默認(rèn)情況下都是不可見(jiàn)的，如果在課表視圖中獲取到了某個(gè)課程信息塊所對(duì)應(yīng)的時(shí)間內(nèi)有課，就將其dispaly設(shè)置為block，將其顯示出來(lái)，并將課程信息添加到其中。由于3、4和3、4、5課程塊以及10、11和10、11、12均共用一個(gè)格子，故應(yīng)通過(guò)后臺(tái)代碼調(diào)整前端div的顯示位置，以保證在兩種情況下課程塊和標(biāo)簽文字都居中顯示。核心代碼如下：

若要進(jìn)入課程詳情頁(yè)，可將每個(gè)課程塊中的課程名稱控件設(shè)置為L(zhǎng)inkButton，并定義LinkButton實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。由于諸多相同的控件實(shí)現(xiàn)相同的功能，故可利用Click（）事件中的sender事件獲取觸發(fā)點(diǎn)擊時(shí)間的控件，然后將所有的課程名稱控件綁定該事件，即可實(shí)現(xiàn)課程顯示塊的超鏈接功能。

為實(shí)現(xiàn)課程筆記顯示，需根據(jù)學(xué)生學(xué)號(hào)，調(diào)用個(gè)人筆記視圖數(shù)據(jù)集對(duì)象stap_txtwork的getdata（）獲取筆記信息，并將返回的字符串賦給筆記TextBox對(duì)象的text屬性。同理，對(duì)個(gè)人筆記的保存、清空也可調(diào)用數(shù)據(jù)集中相應(yīng)的方法進(jìn)行操作。此外，個(gè)人筆記區(qū)域默認(rèn)為不可編輯，實(shí)現(xiàn)此功能要在筆記區(qū)TextBox對(duì)象的鼠標(biāo)點(diǎn)擊事件中，將ReadOnly屬性由默認(rèn)的false改為true。

以上業(yè)務(wù)邏輯流程[4]如圖4所示。

2.3用戶界面設(shè)計(jì)

學(xué)生課表界面主要由title標(biāo)題和body主體兩部分構(gòu)成，title區(qū)域由3個(gè)div標(biāo)簽并排構(gòu)成，分別顯示logo圖標(biāo)和學(xué)生姓名專業(yè)、界面標(biāo)題、輔助圖片。body區(qū)域分為左右兩個(gè)div，左邊為個(gè)人筆記區(qū)域，右邊為課表顯示區(qū)域。

在title部分，以學(xué)士帽作為logo，這樣既符合學(xué)生身份，又簡(jiǎn)約大方。頁(yè)面標(biāo)題區(qū)域?yàn)樗囆g(shù)字“我的課程表”，顏色為天藍(lán)色，與課表的藍(lán)天白云背景相對(duì)應(yīng)，并采用美觀而富有活力的QQ字體。

body左邊是個(gè)人筆記區(qū)域，運(yùn)用了TextBox控件，并將TextMode屬性設(shè)置為MultiLine，以使其能夠多行編輯和顯示；筆記的頁(yè)面線條繪制可根據(jù)TextBox中字體的大小，通過(guò)PS制作一個(gè)行線背景圖片，其高度保證可以恰好容納TextBox中的文字，寬度與TextBox相同，然后再將這個(gè)“單位”背景圖填充到TextBox的背景圖片中，一個(gè)仿真的筆記本效果便實(shí)現(xiàn)了；筆記本標(biāo)題背景由一個(gè)頂部邊角為圓角的藍(lán)色背景div和一個(gè)白色加粗樣式的Lable標(biāo)簽構(gòu)成；個(gè)人筆記的下方是3個(gè)經(jīng)過(guò)美化的圓形按鈕，分別實(shí)現(xiàn)對(duì)個(gè)人筆記的編輯、保存和清空功能，設(shè)計(jì)重點(diǎn)在于設(shè)置按鈕的box-shadow屬性，以實(shí)現(xiàn)鼠標(biāo)懸浮在按鈕上面，按鈕按下的動(dòng)態(tài)效果。

body右邊是課表顯示區(qū)，課表實(shí)質(zhì)上是一個(gè)13×8的table，其中在第1行，除第1列以外，依次為周一到周日7個(gè)標(biāo)簽，其余12行的首列分別為1～12的課程節(jié)數(shù)；另一方面，上課時(shí)間一般安排為1～2，3～4，6～7，8～9，10～11，3～5，10～12，故應(yīng)將table中每列的1、2行，6、7行以及8、9行分別合并為一行，將每列的3、4、5行和10、11、12行合并為一行，從而保證課程能跨行顯示。

課程表背景考慮到使用人群主要為學(xué)生，因而應(yīng)表現(xiàn)出年輕人所喜愛(ài)的青春陽(yáng)光風(fēng)格。課表背景顏色不能太深，如果底層顏色過(guò)深，對(duì)比度太過(guò)明顯，會(huì)影響課程塊的顯示效果。背景圖片應(yīng)全部為圖畫，不能出現(xiàn)文字，從而確保課程塊內(nèi)的文字顯示不會(huì)與背景中的文字發(fā)生重疊。鑒于以上因素，選擇一個(gè)男孩在彩虹下放風(fēng)箏的背影圖，并通過(guò)PS對(duì)背景進(jìn)行了虛化，修改為圓角圖片。

填充每個(gè)課程格子的是一個(gè)課程顯示塊，它也是一個(gè)div，對(duì)于顯示兩節(jié)課的div，將其height設(shè)置為table兩行的高度，對(duì)于顯示3節(jié)課的div，則將其height設(shè)置為table3行的高度。對(duì)于3、4、5以及10、11、12這些行，會(huì)根據(jù)課程情況占用前兩行或者3行全部占用。為了實(shí)現(xiàn)該效果，需要先在這些區(qū)域內(nèi)部填充一個(gè)同等大小跨3行的div，然后再在該div內(nèi)部填充一個(gè)跨2行的div，并將這些div的display屬性值設(shè)置為none，即為不可見(jiàn)。讀取數(shù)據(jù)庫(kù)數(shù)據(jù)時(shí)再根據(jù)所需要顯示的課程類型決定顯示跨2行的div還是跨3行的div，即將要顯示的div的display屬性設(shè)置為block。每個(gè)div都由3個(gè)標(biāo)簽構(gòu)成，分為3行以顯示課程名稱、上課地點(diǎn)和任課教師；每個(gè)課程顯示塊都實(shí)現(xiàn)漸變效果，確保漸變效果能夠在IE、谷歌以及火狐等瀏覽器中正確顯示。通過(guò)設(shè)置課程顯示塊div的opacity屬性，可以改變div的透明度。各div在默認(rèn)狀態(tài)下的opacity值為0.85，鼠標(biāo)懸浮在上面時(shí)，opacity值為0.90，這樣會(huì)給用戶一種div可以起伏的動(dòng)態(tài)感覺(jué)。最后，將課程顯示塊div的cursor屬性設(shè)置為hand，實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過(guò)div時(shí)，鼠標(biāo)形狀變?yōu)樨Q起一只手指的手形光標(biāo)。課程顯示塊漸變效果核心代碼如下[5]：

3項(xiàng)目成果與分析

綜合以上步驟，以筆者學(xué)校課程信息為例，在360安全瀏覽器上的課表界面顯示效果如圖5所示。同參考文獻(xiàn) [6]等課表查詢系統(tǒng)相比，本系統(tǒng)在界面上采用半透明漸變圓角懸浮塊來(lái)顯示課表信息，與青春陽(yáng)光的背景相結(jié)合，符合學(xué)生的審美觀；增加了個(gè)人筆記功能，學(xué)生可在線記錄課程筆記或課程作業(yè)等信息，進(jìn)一步完善了電子課表的服務(wù)功能。

4結(jié)語(yǔ)

針對(duì)高校課表查詢界面不夠美觀以及缺少課程筆記功能的現(xiàn)狀，設(shè)計(jì)并實(shí)現(xiàn)了一種基于ASP.NET的網(wǎng)頁(yè)版課程表，采用SQL 2008 R2作為數(shù)據(jù)平臺(tái)，以學(xué)生課表信息的導(dǎo)入和顯示為例，對(duì)界面的顯示效果等進(jìn)行了論述。本文設(shè)計(jì)的課表查詢系統(tǒng)是以自行設(shè)計(jì)的數(shù)據(jù)庫(kù)為數(shù)據(jù)基礎(chǔ)的，如何獲取各高校學(xué)生選課信息庫(kù)記錄，使其更具有通用性和普適性，將是下階段的研究重點(diǎn)。

參考文獻(xiàn)：

[1]郭禹汐.基于馬斯洛需求層次理論的“超級(jí)課程表”手機(jī)APP案例研究[J].科技風(fēng)，2014（19）：275276.

[2]吳志祥.高級(jí)Web程序設(shè)計(jì)[M].北京：科學(xué)出版社，2013.

[3]楊亞菁.以項(xiàng)目實(shí)踐為導(dǎo)向的ASP.NET課程層次化教學(xué)研究[J].軟件導(dǎo)刊，2016，15（1）：186187.

[4]葉海智.基于微信的圖書館移動(dòng)信息服務(wù)設(shè)計(jì)與實(shí)現(xiàn)[J].軟件導(dǎo)刊，2013，12（11）：8890.

[5]邁耶.CSS權(quán)威指南[M].北京：中國(guó)電力出版社，2008.

[6]錢凌.一個(gè)基于本體和規(guī)則推理的查詢系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].南京：東南大學(xué)，2006.

責(zé)任編輯（責(zé)任編輯：杜能鋼）