基于Java Web的校園智慧辦公系統(tǒng)的設(shè)計與開發(fā)

王李穎 金百東

（遼寧師范大學(xué)計算機(jī)與信息技術(shù)學(xué)院 遼寧省大連市 116081）

在信息化的時代背景下，高校師生之間的溝通大多依賴網(wǎng)絡(luò)。眾多高校致力于智慧校園建設(shè)并不斷加大投入。依據(jù)以往教學(xué)方式，中小學(xué)學(xué)生的作業(yè)大多為紙質(zhì)版或練習(xí)冊，大學(xué)生由于所處階段及學(xué)習(xí)方式的變化與完善，更多地是向任課教師提交電子版作業(yè)，以文檔格式為主。若由各班學(xué)委統(tǒng)一收齊再轉(zhuǎn)發(fā)給老師，工作量較大且耗費時間長；此外，教師向?qū)W生傳達(dá)通知也十分不便。為了能夠科學(xué)收集教師學(xué)生信息，保證線上收發(fā)作業(yè)高效有序進(jìn)行，方便教師與學(xué)生協(xié)同發(fā)展，開發(fā)校園智慧辦公系統(tǒng)迫在眉睫。

1 功能設(shè)計

校園智慧辦公系統(tǒng)功能概要設(shè)計圖如圖1 所示。

圖1 ：校園智慧辦公系統(tǒng)功能概要設(shè)計圖

1.1 管理者部分

1.1.1 信息管理

教師擁有查閱本班全部學(xué)生信息的權(quán)限，便于教師了解班級總體情況及時查閱；若是年級管理者或?qū)W院管理者登錄，在此部分可以分別查詢到對應(yīng)年級或相應(yīng)學(xué)院的全部學(xué)生信息。

1.1.2 密碼重置

用戶需輸入賬號對應(yīng)的原密碼，設(shè)置新密碼經(jīng)再次確認(rèn)后提交，若原密碼輸入不正確或新密碼與再次確認(rèn)輸入不符則均顯示修改密碼失敗，按步驟修改成功后用戶以后使用此賬號登錄網(wǎng)站時即可使用新密碼。

1.1.3 發(fā)布消息

包括選取時間范圍下發(fā)文件和向?qū)W生收取作業(yè)兩個功能。下發(fā)文件需要管理者輸入文件名稱，設(shè)置規(guī)定的起始時間和結(jié)束時間，上傳預(yù)發(fā)布的文件點擊提交可發(fā)布成功；收作業(yè)需要管理者輸入課程名稱，設(shè)置起始時間和結(jié)束時間點擊提交，學(xué)生端將收到需要上交作業(yè)的信息。

1.1.4 瀏覽已發(fā)布信息

教師在本部分可以查詢到下發(fā)文件的記錄，便于查閱已經(jīng)發(fā)布過的文件且可以多次下載另存到本機(jī)電腦。

1.1.5 接收學(xué)生作業(yè)顯示對應(yīng)課程全部學(xué)生的提交作業(yè)記錄，此板塊教師可下載學(xué)生上交的作業(yè)保存在本地便于閱讀和批改。

1.1.6 設(shè)置成員

輸入新的賬號后選擇要添加的身份，可供選擇的身份為：學(xué)生、班級、年級和學(xué)院，選擇完畢后提交即添加成員成功。

1.2 學(xué)生部分

1.2.1 查看個人信息

用于顯示學(xué)生的姓名、學(xué)號、班級、年級、學(xué)院、聯(lián)系方式、登錄密碼，若學(xué)生發(fā)現(xiàn)某項信息與實際不符可聯(lián)系管理員修改。

1.2.2 密碼重置

此功能與上述管理者的密碼重置功能一致。

1.2.3 接收文件

用于及時接收教師下發(fā)的文件，可提前了解相關(guān)課程的作業(yè)題目及要求。

1.2.4 上傳作業(yè)

在仔細(xì)瀏覽教師端發(fā)布的作業(yè)通知后，按照通知要求上傳對應(yīng)科目的作業(yè)文檔。

1.2.5 瀏覽上傳記錄

學(xué)生可以瀏覽自己上交的全部作業(yè)記錄，并下載查閱；若發(fā)現(xiàn)作業(yè)需要修改，則在上傳作業(yè)板塊重新提交。

2 網(wǎng)站開發(fā)

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

開發(fā)者通過navicat 工作區(qū)可愈發(fā)靈活高效地管理MySQL 數(shù)據(jù)庫。本網(wǎng)站使用了用戶表（user）、收作業(yè)表（homework）、下發(fā)文件表（info）、上傳作業(yè)表（up）共四個數(shù)據(jù)表。如表1-表4 所示。

表1 ：用戶表設(shè)計

表2 ：收作業(yè)表設(shè)計

表3 ：下發(fā)文件表設(shè)計

表4 ：上傳作業(yè)表設(shè)計

2.2 前端設(shè)計

2.2.1 UI 界面設(shè)計

網(wǎng)站整體采用漸變風(fēng)格，適量融合帶有漸變色彩的元素。登錄頁面采用上中下三段式分區(qū)域布局，背景添加少許動態(tài)效果。主頁采用左右分欄樣式，Head 和Foot 分別置于頂端和底部，其中Head 區(qū)域和左側(cè)導(dǎo)航欄采用漸變效果，Head 左上角置有網(wǎng)站LOGO。

2.2.2 前端開發(fā)

實現(xiàn)先前設(shè)計的頁面主要用到HTML、CSS 和JavaScript等前端開發(fā)技術(shù)，BootStrap 和JQuery 均是目前成熟且流行的前端開發(fā)框架。在eclipse 工程目錄下新建html、css、js文件進(jìn)行編寫。實現(xiàn)過程中，運用BootStrap 搭建前端頁面框架，使用JQuery 添加動態(tài)操作及部分動畫效果，參照已有設(shè)計圖通過前端代碼把網(wǎng)站界面搭建起來。再著重編寫JavaScript，在JQuery 框架下使用AJAX 技術(shù)，動態(tài)生成頁面局部刷新。如表5 所示。

表5 ：前端代碼文件

2.3 后端開發(fā)

團(tuán)隊使用eclipse 作為集前后端開發(fā)于同一工程目錄的軟件，選用Apache 公司的tomcat 作為開發(fā)及測試過程的服務(wù)器。將開發(fā)軟件與tomcat 連接之后即可在eclipse 中運行啟動服務(wù)器，方便調(diào)試及不斷改進(jìn)。后端主要使用servlet和服務(wù)器打交道。經(jīng)常使用的是doPost()方法，其中包括HttpServletRequest、HttpSession 對象用于產(chǎn)生標(biāo)準(zhǔn)JSON 數(shù)據(jù)進(jìn)行servlet 通信。上傳普通數(shù)據(jù)大多通過form 表單，服務(wù)器端使用getParameter()獲取，上傳作業(yè)相比于普通數(shù)據(jù)較為復(fù)雜，需獲取字節(jié)流后寫入本地文件中保存。下載文檔或作業(yè)把要下載的文件寫進(jìn)輸出流后，用戶即可點擊下載。

圖2 ：校園智慧辦公網(wǎng)站開發(fā)流程設(shè)計圖

數(shù)據(jù)庫操作是后端開發(fā)的重要內(nèi)容，諸如教師對班級學(xué)生的信息管理、學(xué)生對個人信息的查看等均離不開增刪改查數(shù)據(jù)表的操作?；谝陨咸攸c使用MySQL 進(jìn)行數(shù)據(jù)庫管理，在servlet 中加載數(shù)據(jù)庫驅(qū)動程序，建立連接后執(zhí)行SQL 語句靈活處理數(shù)據(jù)。

后端代碼文件如表6 所示。

表6 ：后端代碼文件

2.4 網(wǎng)站特色

本著前端頁面設(shè)計與后端業(yè)務(wù)設(shè)計相分離的設(shè)計思想，前端與后端通過標(biāo)準(zhǔn)的Json 數(shù)據(jù)相互通信，本系統(tǒng)的特色在于應(yīng)用了級聯(lián)AJAX 技術(shù)，只在一個頁面內(nèi)進(jìn)行交互，因此頁面非常整潔。如果不使用AJAX 而是常規(guī)編程，則好多頁面切換起來十分復(fù)雜，操作功能也非常麻煩。此外，結(jié)合后端的servlet 技術(shù)，實現(xiàn)了教師與學(xué)生間互相上傳下載文件的功能，很大程度提高了網(wǎng)絡(luò)教學(xué)辦公的效率，在界面友好性、師生交互性、功能實用性等多方面，取得了很好的效果。

3 關(guān)鍵技術(shù)

3.1 級聯(lián)AJAX技術(shù)

使用AJAX 技術(shù)可以實現(xiàn)對瀏覽器局部區(qū)域的刷新，級聯(lián)AJAX 意味著可以刷新瀏覽器不同局部區(qū)域。Web 開發(fā)過程中，下載文檔模塊右側(cè)顯示表格包括流水號、起始時間、結(jié)束時間等信息，每行對應(yīng)一個下載按鈕，以上均動態(tài)添加到界面。在此基礎(chǔ)上點擊下載按鈕執(zhí)行按鈕對應(yīng)的響應(yīng)事件，獲取對應(yīng)行的屬性值填充到表格下方的隱藏表單中，提交表單將value 值傳輸給名為DownLoad 的Servlet 類。通過使用級聯(lián)AJAX 技術(shù)，不僅在myright 區(qū)域動態(tài)添加表格，還通過點擊按鈕刷新了表格下方的隱藏表單。

3.2 流水號獲取

下載信息模塊右側(cè)表格通過AJAX 動態(tài)添加，實現(xiàn)下載表格對應(yīng)行的文件，需對每行按鈕加消息響應(yīng)，獲取對應(yīng)行的首列元素值。先查找TR 對象，使當(dāng)前對象為每行按鈕（TD對象）的上級結(jié)點，再通過innerHTML 獲取首列的內(nèi)容，提交表單將數(shù)據(jù)傳至后端。此外，流水號格式為當(dāng)天具體時間加三位隨機(jī)數(shù)，在上傳文件時自動生成。

3.3 Formdata文件傳輸

Formdata 是實現(xiàn)文件上傳一項關(guān)鍵技術(shù)。在使用form表單上傳文件時使用action 跳轉(zhuǎn)至servlet 類捕獲服務(wù)器端的字節(jié)流并保存為本地文件。xmlHttp 協(xié)議支持文件與其他input 標(biāo)簽內(nèi)容同時傳輸。多個input 標(biāo)簽的value 值與文件合并成一個數(shù)據(jù)包上傳，再由后端解析數(shù)據(jù)頭分離出各輸入框內(nèi)容后將文件寫入本地保存。

4 功能實現(xiàn)

4.1 網(wǎng)站部分界面

（1）登錄界面以暖色調(diào)為主并保持一定的幾何紋理，背景添加了鼠標(biāo)移動星圖的動態(tài)效果以及登錄框向上滑動的動畫，具體界面如圖3 所示。

圖3 ：校園智慧辦公系統(tǒng)登錄界面

（2）教師主頁功能名稱顯示在左側(cè)導(dǎo)航欄，右側(cè)顯示可操作的內(nèi)容包括發(fā)布信息、下發(fā)文檔等功能，如圖4 所示。

圖4 ：校園智慧辦公系統(tǒng)管理員主頁瀏覽記錄界面

（3）學(xué)生主頁與教師主頁風(fēng)格保持一致，保持簡約美觀，可以完成上傳作業(yè)、瀏覽文檔等功能，部分如圖5 所示。

圖5 ：校園智慧辦公系統(tǒng)學(xué)生端主頁上傳作業(yè)界面

4.2 用戶操作流程

在訪問網(wǎng)站之前，數(shù)據(jù)庫內(nèi)應(yīng)至少保存一個管理員賬號及密碼。用戶輸入用戶名密碼進(jìn)入主頁。首次登錄賬號初始密碼為123456。每個賬號對應(yīng)一種身份，若身份為班級、年級、學(xué)院管理員進(jìn)入教師主頁；若身份為學(xué)生，則進(jìn)入學(xué)生主頁。管理員選擇信息管理一欄可以查看不同權(quán)限的學(xué)生信息。點擊密碼修改，可根據(jù)自身情況設(shè)置新密碼。在發(fā)布消息一欄將每一項填入框中點擊提交，系統(tǒng)會顯示發(fā)布成功的提醒，避免用戶重復(fù)操作。管理員不僅可以下載學(xué)生作業(yè)進(jìn)行批改，還可以增加成員，在設(shè)置新的賬號賦予權(quán)限后，可使用新賬號登錄網(wǎng)站。

4.3 主要測試

實驗表明校園智慧辦公系統(tǒng)支持Windows7 以上64 位操作系統(tǒng)的電腦訪問使用。通過多次重復(fù)點擊各按鈕，記錄頁面不同變化，確保頁面的流暢性。測試反饋表明本網(wǎng)站具有較強(qiáng)的實用性，可滿足用戶需求。

5 結(jié)語

本文提出了一個應(yīng)用于校園的智慧辦公系統(tǒng)，具有界面美觀、操作方便、注重功能實用性的突出優(yōu)勢。最大特色在于使用AJAX 技術(shù)，使得各項操作在同一頁面進(jìn)行，整體界面十分美觀整潔，避免了多個頁面多次切換的繁瑣與復(fù)雜。實現(xiàn)過程使用當(dāng)前流行的Java Web 開發(fā)技術(shù)按功能逐步實現(xiàn)，著力打造針對學(xué)校使用的特色功能。本網(wǎng)站能夠科學(xué)統(tǒng)計教師學(xué)生信息、保證線上收發(fā)作業(yè)正常進(jìn)行、使教師與學(xué)生之間的聯(lián)系更加緊密。隨著智慧辦公網(wǎng)站的投入使用與不斷改進(jìn)，將會加深對高校智慧校園建設(shè)方面的積極意義。