基于JavaWeb的無(wú)紙化實(shí)驗(yàn)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

陳玲玲 付可 張博聞

摘? 要：隨著高校教育信息化系統(tǒng)建設(shè)的日益完善以及互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，教育行業(yè)的技術(shù)手段和載體發(fā)生了革命性的變化。該設(shè)計(jì)利用Web、Java、以及SQL等技術(shù)設(shè)計(jì)一個(gè)無(wú)紙化實(shí)驗(yàn)報(bào)告系統(tǒng)。該系統(tǒng)包括學(xué)生端和教師端，學(xué)生端是指學(xué)生對(duì)實(shí)驗(yàn)指導(dǎo)書(shū)的閱讀和實(shí)驗(yàn)報(bào)告的填寫(xiě)，教師端是指教師對(duì)學(xué)生實(shí)驗(yàn)報(bào)告的審批。該系統(tǒng)可以解決收發(fā)麻煩、不易保存、批改審閱費(fèi)時(shí)費(fèi)力和實(shí)驗(yàn)報(bào)告篇幅限制等問(wèn)題。

關(guān)鍵詞：無(wú)紙化;Web;Java;MySQL

中圖分類號(hào)：TP311? ? ? ? ? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：2096-4706（2021）19-0040-04

Design and Implementation of Paperless Experiment System Based on JavaWeb

CHEN Lingling， FU Ke， ZHANG Bowen

（School of Information and Control Engineering， Jilin Institute of Chemical Technology， Jilin? 132022， China）

Abstract： With the increasing improvement of the construction of educational informatization system in Colleges and universities and the rapid development of internet technology， the technical means and carrier of education industry have undergone revolutionary changes. This design uses Web， Java， SQL and other technologies to design a paperless experimental report system. The system includes student side and teacher side. The student side is for students to read experimental instructions and fill in experimental reports， and the teacher side is for teachers to approve students experimental reports. This system can solve the problems of trouble in sending and receiving， difficult to save， time-consuming and laborious correction and review， and length limitation of experimental report and so on.

Keywords： paperless; Web; Java; MySQL

0? 引? 言

當(dāng)下是一個(gè)網(wǎng)絡(luò)信息時(shí)代，傳統(tǒng)的實(shí)驗(yàn)指導(dǎo)書(shū)與實(shí)驗(yàn)報(bào)告冊(cè)與電子文檔相比會(huì)顯得格外的笨重與煩瑣[1]，而且老師對(duì)實(shí)驗(yàn)報(bào)告冊(cè)的收發(fā)以及學(xué)生對(duì)相關(guān)實(shí)驗(yàn)內(nèi)容的撰寫(xiě)也會(huì)面臨著諸多的問(wèn)題，例如：實(shí)驗(yàn)報(bào)告冊(cè)收發(fā)麻煩、不易保存、老師對(duì)實(shí)驗(yàn)報(bào)告冊(cè)的審閱批改費(fèi)時(shí)費(fèi)力;而且實(shí)驗(yàn)報(bào)告冊(cè)的篇幅有限，可能會(huì)影響到學(xué)生對(duì)相關(guān)實(shí)驗(yàn)圖形的繪畫(huà)，進(jìn)而會(huì)影響到相關(guān)實(shí)驗(yàn)結(jié)論的準(zhǔn)確性[2];同時(shí)學(xué)生的字跡很大程度上會(huì)影響到自己的實(shí)驗(yàn)成績(jī)，這就有些違背實(shí)驗(yàn)課程的目的[3-7]。

在這個(gè)全球都受疫情影響的特殊時(shí)期，我國(guó)各大高校均采取線上授課的方式，采用這種方式可以保證正常的教學(xué)進(jìn)度以及師生的健康。但是該種授課方式也存在一定的弊端，例如：與課程相關(guān)的實(shí)驗(yàn)做不了;學(xué)生對(duì)相關(guān)內(nèi)容的理解與線下授課相比也會(huì)大打折扣;將違背工科教學(xué)理論與實(shí)際相結(jié)合的理念?，F(xiàn)階段，如何研發(fā)出一種既可以保證師生安全又可以保證教學(xué)質(zhì)量的教學(xué)方式成為一大難題。

1? 系統(tǒng)功能需求分析

本文將上述的難點(diǎn)考慮在內(nèi)設(shè)計(jì)了一個(gè)無(wú)紙化實(shí)驗(yàn)報(bào)告系統(tǒng)。通過(guò)該系統(tǒng)學(xué)生可以克服字跡以及紙張篇幅帶來(lái)的影響，老師可以通過(guò)電腦進(jìn)行在線審閱和批改，而且數(shù)據(jù)化的實(shí)驗(yàn)報(bào)告儲(chǔ)存與查閱也更加方便。該系統(tǒng)不但可以最大化的保證教學(xué)質(zhì)量和師生安全，而且還可以在保證實(shí)驗(yàn)報(bào)告篇幅不受限的同時(shí)大大的節(jié)省成本。該系統(tǒng)由登錄、學(xué)生管理、教師審批管理、學(xué)生提交管理、教師打回管理五個(gè)模塊組成。

1.1? 登錄模塊

本系統(tǒng)中的登錄模塊是學(xué)生和教師登錄系統(tǒng)的合并。

1.2? 學(xué)生實(shí)驗(yàn)報(bào)告管理此模塊

包含了教師的審閱功能和學(xué)生實(shí)驗(yàn)報(bào)告的填寫(xiě)功能。對(duì)于學(xué)生來(lái)說(shuō)，首先學(xué)生需要通過(guò)驗(yàn)證賬戶和密碼，然后對(duì)實(shí)驗(yàn)指導(dǎo)書(shū)進(jìn)行閱讀。閱讀完成之后進(jìn)行實(shí)驗(yàn)，最后進(jìn)行實(shí)驗(yàn)報(bào)告的撰寫(xiě)。因此學(xué)生對(duì)數(shù)據(jù)庫(kù)的訪問(wèn)權(quán)限有兩個(gè)：實(shí)驗(yàn)指導(dǎo)書(shū)和實(shí)驗(yàn)報(bào)告。但其只擁有一個(gè)寫(xiě)入權(quán)限即對(duì)實(shí)驗(yàn)報(bào)告所對(duì)應(yīng)的數(shù)據(jù)庫(kù)的撰寫(xiě)。

1.3? 教師審批管理模塊

此模塊主要是實(shí)現(xiàn)的是教師審閱功能。教師需要首先需要登錄系統(tǒng)，通過(guò)班級(jí)、實(shí)驗(yàn)和學(xué)號(hào)選擇某個(gè)同學(xué)的實(shí)驗(yàn)報(bào)告進(jìn)行審批。教師有對(duì)學(xué)生的實(shí)驗(yàn)報(bào)告冊(cè)有審批的權(quán)限，審批的權(quán)限并不是更改實(shí)驗(yàn)報(bào)告冊(cè)，而是用學(xué)號(hào)和實(shí)驗(yàn)代碼在一個(gè)新的數(shù)據(jù)庫(kù)進(jìn)行存儲(chǔ)，而且教師有將學(xué)生的實(shí)驗(yàn)報(bào)告打回的權(quán)限。

1.4? 提交管理模塊

此模塊是在學(xué)生實(shí)驗(yàn)報(bào)告管理模塊和教師審批管理模塊的基礎(chǔ)之上實(shí)現(xiàn)的，將已經(jīng)填寫(xiě)好的數(shù)據(jù)存入數(shù)據(jù)庫(kù)中進(jìn)行保存時(shí)本模塊的執(zhí)行過(guò)程。

1.5? 實(shí)驗(yàn)報(bào)告打回管理

在學(xué)生填寫(xiě)完實(shí)驗(yàn)報(bào)告后，老師審批不合格的報(bào)告被將會(huì)執(zhí)行本模塊。本模塊設(shè)計(jì)了一個(gè)打回按鈕，當(dāng)教師審閱時(shí)發(fā)現(xiàn)嚴(yán)重的問(wèn)題后，點(diǎn)擊此按鈕可以將此份實(shí)驗(yàn)報(bào)告打回對(duì)應(yīng)學(xué)號(hào)的學(xué)生讓其進(jìn)行重新填寫(xiě)。普通紙質(zhì)版的實(shí)驗(yàn)報(bào)告很難重新填寫(xiě)，打回后可以通過(guò)學(xué)生端進(jìn)行重新填寫(xiě)后再次進(jìn)行審批。這也是本系統(tǒng)的亮點(diǎn)之一。

通過(guò)這五個(gè)模塊之間的相互作用可以完成上述的全部功能。本系統(tǒng)中的登錄模塊事實(shí)上是兩個(gè)系統(tǒng)的合并，其中有兩個(gè)數(shù)據(jù)庫(kù)支持登錄功能，在登錄頁(yè)面中有學(xué)生登錄和教師登錄的選項(xiàng)，分別由兩個(gè)獨(dú)立系統(tǒng)的支持。功能需求的總體流程如圖1所示。

2? 具體實(shí)現(xiàn)

2.1? 登錄頁(yè)面

登錄界面是所有用戶的登錄該系統(tǒng)的唯一入口。在用戶名輸入框和密碼輸入框下方有個(gè)單選框，其不但是所有用戶登錄該系統(tǒng)的系統(tǒng)模塊，而且還是決定用戶名和密碼驗(yàn)證的數(shù)據(jù)庫(kù)。該界面是所有用戶的登入系統(tǒng)的唯一入口。所有用戶登錄時(shí)，系統(tǒng)的前端模塊會(huì)運(yùn)用簡(jiǎn)單的EL表達(dá)式進(jìn)行賬戶和密碼的認(rèn)證以及篩選。由于學(xué)生的學(xué)號(hào)和教師的教職工號(hào)均是由數(shù)字組成，因此如果輸入的數(shù)據(jù)是非純數(shù)字組合，例如：‘a(chǎn)123.123/43等，這樣會(huì)導(dǎo)致前端代碼中EL的表達(dá)式不成立，因此無(wú)須再通過(guò)后臺(tái)代碼和數(shù)據(jù)庫(kù)進(jìn)行驗(yàn)證。這樣做的目的是為了提高程序的執(zhí)行效率。如果用戶選擇學(xué)生端進(jìn)行登陸時(shí)，輸入的賬戶和密碼需要與要事先建立表中的student數(shù)據(jù)表進(jìn)行驗(yàn)證。如果驗(yàn)證失敗會(huì)有彈窗提示用戶名或密碼錯(cuò)誤，用戶剛剛輸入的用戶名和密碼將會(huì)被清空。如果沒(méi)有出現(xiàn)上述情況則證明驗(yàn)證成功，驗(yàn)證成功后跳轉(zhuǎn)到相應(yīng)的頁(yè)面。

2.2? 無(wú)紙化實(shí)驗(yàn)報(bào)告系統(tǒng)學(xué)生端-主頁(yè)面

無(wú)紙化實(shí)驗(yàn)報(bào)告系統(tǒng)學(xué)生端的功能的設(shè)計(jì)不但是本文的研究重點(diǎn)，同時(shí)也是本文最大的亮點(diǎn)。在本次設(shè)計(jì)過(guò)程中碰到的最大難點(diǎn)是如何實(shí)現(xiàn)實(shí)驗(yàn)報(bào)告中的圖形、圖表和圖像的繪制以及保存。在本模塊的編寫(xiě)中將應(yīng)用大量的前端技術(shù)以及較大的數(shù)據(jù)庫(kù)設(shè)計(jì)，在此基礎(chǔ)上可以為圖形、圖表和圖像的繪制、展示和保存提供足夠的支持。而且為本模塊提供數(shù)據(jù)保存的數(shù)據(jù)庫(kù)在設(shè)計(jì)上要遵循精度高且容量大的原則，這樣可以讓學(xué)生在填寫(xiě)實(shí)驗(yàn)報(bào)告時(shí)盡可能避免甚至杜絕實(shí)驗(yàn)報(bào)告篇幅不足的問(wèn)題。同時(shí)也要對(duì)頁(yè)面的排版進(jìn)行合理的設(shè)計(jì)，要使頁(yè)面看起來(lái)更加的簡(jiǎn)潔和合理，以此來(lái)方便后臺(tái)代碼的書(shū)寫(xiě)、數(shù)據(jù)的分類儲(chǔ)存和教師的審閱。切記一定要將數(shù)據(jù)進(jìn)行合理的分類和儲(chǔ)存，這樣不但可以節(jié)省登錄驗(yàn)證的時(shí)間，還可以方便所有用戶對(duì)相關(guān)資料的查詢。圖2展示的是無(wú)紙化實(shí)驗(yàn)報(bào)告系統(tǒng)學(xué)生端界面。

2.3? 無(wú)紙化實(shí)驗(yàn)報(bào)告系統(tǒng)學(xué)生端-實(shí)驗(yàn)指導(dǎo)書(shū)

在設(shè)計(jì)無(wú)紙化實(shí)驗(yàn)報(bào)告系統(tǒng)實(shí)驗(yàn)指導(dǎo)書(shū)頁(yè)面時(shí)，通過(guò)對(duì)div塊元素進(jìn)行合理的嵌套，以及相應(yīng)屬性的設(shè)定，可使得無(wú)紙化試驗(yàn)系統(tǒng)頁(yè)面看起來(lái)大方簡(jiǎn)，如圖3所示。通過(guò)將紙質(zhì)版實(shí)驗(yàn)指導(dǎo)書(shū)原版移植到網(wǎng)頁(yè)上，在此基礎(chǔ)上可使實(shí)驗(yàn)指導(dǎo)書(shū)的費(fèi)用大大降低。在節(jié)省大量紙張的同時(shí)，還使得實(shí)驗(yàn)指導(dǎo)書(shū)看起來(lái)更加直觀。通過(guò)鼠標(biāo)點(diǎn)擊右側(cè)滑塊進(jìn)行上下拖動(dòng)實(shí)現(xiàn)瀏覽，這樣省去了紙質(zhì)版實(shí)驗(yàn)指導(dǎo)書(shū)的翻頁(yè)過(guò)程。而且頁(yè)面支持自定義位置，在做實(shí)驗(yàn)期間都會(huì)遇到相關(guān)實(shí)驗(yàn)的參考資料跨頁(yè)的問(wèn)題，在做實(shí)驗(yàn)時(shí)需要反復(fù)地翻看，本設(shè)計(jì)的自定義位置可以很好地解決這個(gè)問(wèn)題，用戶可以根據(jù)自己的需求自定義不同的頁(yè)面。實(shí)驗(yàn)指導(dǎo)書(shū)中包含大量的專業(yè)圖像，如何把這些圖片完美的頁(yè)面中體現(xiàn)出來(lái)時(shí)另一個(gè)難點(diǎn)。本系統(tǒng)中采用圖片的方式進(jìn)行相應(yīng)的顯示。首先將實(shí)驗(yàn)指導(dǎo)書(shū)的圖形進(jìn)行重新繪制，然后以.png格式代替?zhèn)鹘y(tǒng)的.jpg格式插入頁(yè)面中。這樣使得圖形的顯示符合整體系統(tǒng)的主題色調(diào)，而且系統(tǒng)看起來(lái)也更加美觀。本系統(tǒng)為符合實(shí)驗(yàn)報(bào)告的設(shè)計(jì)需求，特別引入了Mathjax即Web數(shù)學(xué)公式渲染器，以此支持頁(yè)面公式的顯示和制作。

2.4? 教師端-主頁(yè)面

如圖4所示，進(jìn)入的是教師端的頁(yè)面，進(jìn)入該頁(yè)面之前也需要用戶通過(guò)登錄模塊選擇教師登錄后進(jìn)行賬號(hào)密碼驗(yàn)證。教師端的主頁(yè)面結(jié)構(gòu)與學(xué)生端主頁(yè)面結(jié)構(gòu)相似，左側(cè)是抽屜式導(dǎo)航欄、右側(cè)是實(shí)驗(yàn)室對(duì)老師和學(xué)生的相關(guān)規(guī)定。教師端與學(xué)生端不同之處是左側(cè)的抽屜式導(dǎo)航欄的分類方法不同。本設(shè)計(jì)考慮到一位教師將會(huì)帶相同專業(yè)的多個(gè)班級(jí)，所以首先我們需要對(duì)相同的專業(yè)進(jìn)行班級(jí)的分類。本次設(shè)計(jì)針對(duì)的是電子信息工程專業(yè)的兩個(gè)班級(jí)。

2.5? 教師端-學(xué)生列表

在進(jìn)行班級(jí)分類之后，由于學(xué)校的實(shí)驗(yàn)課程會(huì)緊跟著課程的進(jìn)度一個(gè)一個(gè)地進(jìn)行，所以需要對(duì)實(shí)驗(yàn)再次劃分，對(duì)實(shí)驗(yàn)課程進(jìn)行劃分之后可以很大程度上節(jié)省老師查閱資料的時(shí)間。學(xué)生列表中包含實(shí)驗(yàn)編號(hào)、學(xué)生學(xué)號(hào)、預(yù)習(xí)報(bào)告分?jǐn)?shù)、實(shí)驗(yàn)分?jǐn)?shù)和狀態(tài)這五個(gè)部分。在學(xué)生列表中默認(rèn)以學(xué)生學(xué)號(hào)升序排列。實(shí)驗(yàn)編號(hào)支持最高支持九位數(shù)字的自定義設(shè)置，前四代表年份、接下來(lái)兩位月份、后兩位代表日期、最后一位代表上午下午，上午用‘0下午用‘1表示。此種表示方法有效的記錄了實(shí)驗(yàn)日期。狀態(tài)欄中有三種狀態(tài)分別為：已審批、未審批和未提交，并給不同的狀態(tài)設(shè)計(jì)了不同的顏色進(jìn)行區(qū)分。學(xué)號(hào)所在的行表示的是該與學(xué)號(hào)對(duì)應(yīng)學(xué)生的實(shí)驗(yàn)情況。學(xué)生的學(xué)號(hào)在前端代碼中運(yùn)用了標(biāo)簽進(jìn)行編寫(xiě)，教師點(diǎn)擊學(xué)號(hào)可以通過(guò)超鏈接跳轉(zhuǎn)到該學(xué)號(hào)學(xué)生的實(shí)驗(yàn)報(bào)告審批頁(yè)面。

2.6? 教師端-審批

教師通過(guò)點(diǎn)擊觸發(fā)學(xué)號(hào)附帶的超鏈接進(jìn)入如圖5所示的頁(yè)面，界面中包含有打回按鈕和相關(guān)實(shí)驗(yàn)分?jǐn)?shù)輸入文本框。教師通過(guò)審閱學(xué)生端由學(xué)生提交的實(shí)驗(yàn)報(bào)告冊(cè)，給予評(píng)定分?jǐn)?shù)。如果實(shí)驗(yàn)不合格教師可通過(guò)點(diǎn)擊打回按鈕，其將會(huì)觸發(fā)打回系統(tǒng)，將該學(xué)生的實(shí)驗(yàn)報(bào)告冊(cè)進(jìn)行打回重新填寫(xiě)。本頁(yè)面同樣運(yùn)用了chart圖表庫(kù)以及Mathjax數(shù)學(xué)公式渲染器進(jìn)行實(shí)驗(yàn)報(bào)告顯示支持。

3? 結(jié)? 論

無(wú)紙化實(shí)驗(yàn)報(bào)告系統(tǒng)解決了虛擬實(shí)驗(yàn)報(bào)告系統(tǒng)在使用中需要更換大量高成本實(shí)驗(yàn)設(shè)備的弊端。在現(xiàn)有的實(shí)驗(yàn)設(shè)備的基礎(chǔ)之上，實(shí)現(xiàn)了實(shí)驗(yàn)報(bào)告以及實(shí)驗(yàn)指導(dǎo)書(shū)的無(wú)紙化，將紙質(zhì)版實(shí)驗(yàn)指導(dǎo)書(shū)和實(shí)驗(yàn)報(bào)告冊(cè)運(yùn)用前端技術(shù)、Java和關(guān)系型數(shù)據(jù)庫(kù)等等互聯(lián)網(wǎng)技術(shù)實(shí)現(xiàn)無(wú)紙化。由于計(jì)算機(jī)和電信相關(guān)專業(yè)的實(shí)驗(yàn)課程的特殊性，很多實(shí)驗(yàn)都是運(yùn)用電腦軟件進(jìn)行實(shí)驗(yàn)，如matlab等仿真軟件。這些軟件大多數(shù)對(duì)硬件設(shè)備的要求不是很高，一般的筆記本電腦都可以完美運(yùn)行。所以應(yīng)用這些軟件進(jìn)行實(shí)驗(yàn)的實(shí)驗(yàn)課程結(jié)合無(wú)紙化實(shí)驗(yàn)報(bào)告系統(tǒng)可以跟隨教學(xué)進(jìn)度進(jìn)行相應(yīng)的實(shí)驗(yàn)。這樣可以在保證師生安全的前提下最大化地保證了教學(xué)質(zhì)量。

參考文獻(xiàn)：

[1] 羅彪，張宏濤.基于HTML5的移動(dòng)互聯(lián)網(wǎng)應(yīng)用發(fā)展趨勢(shì) [J].信息與電腦（理論版），2018（10）：129-131.

[2] 丁莉，楊陽(yáng).網(wǎng)絡(luò)數(shù)據(jù)庫(kù)SQL Server 2012教程 [M].北京：人民郵電出版社，2015.

[3] 顧全.“JQuery+CSS3”技術(shù)在網(wǎng)頁(yè)交互式圖表中的運(yùn)用與實(shí)現(xiàn) [J].數(shù)字技術(shù)與應(yīng)用，2016（11）：253-254.

[4] 姚云飛，杜洪波，梁建輝.基于SpringMVC框架畢業(yè)設(shè)計(jì)管理系統(tǒng)設(shè)計(jì) [J].軟件，2018，39（1）：91-93.

[5] 徐亮亮.企業(yè)辦公自動(dòng)化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [J].電子技術(shù)與軟件工程，2018（9）：125.

[6] 黃淼，張國(guó)平.基于Spring MVC的高校教務(wù)評(píng)教系統(tǒng)設(shè)計(jì) [J].電子設(shè)計(jì)工程，2016，24（8）：23-26.

[7] 陳梅，蘇晨，高斐.HTML5在Web界面設(shè)計(jì)中的應(yīng)用 [J].電腦知識(shí)與技術(shù)，2018，14（5）：214-215+217.

作者簡(jiǎn)介：陳玲玲（1980—），女，漢族，吉林長(zhǎng)春人，教授，博士，研究方向：認(rèn)知無(wú)線電。