一個(gè)智慧實(shí)驗(yàn)實(shí)訓(xùn)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

雷澤堅(jiān) 李錫輝 劉宣江

關(guān)鍵詞：實(shí)驗(yàn)系統(tǒng)；智慧校園；Vue開發(fā)框架；Spring Boot；MySQL

0 引言

目前，學(xué)校各專業(yè)在收集實(shí)驗(yàn)實(shí)訓(xùn)稿件時(shí)普遍沒有使用在線提交系統(tǒng)[1]，實(shí)際操作過程中，無(wú)論是實(shí)驗(yàn)實(shí)訓(xùn)報(bào)告或是課程設(shè)計(jì)的電子檔和紙質(zhì)檔的收集，都是通過各科的課代表和學(xué)習(xí)委員幫助收集，難免會(huì)出紕漏，也有一些因?yàn)閷?duì)業(yè)務(wù)不熟悉導(dǎo)致出錯(cuò)，進(jìn)而降低了整體的工作效率。若是有一款智慧實(shí)驗(yàn)實(shí)訓(xùn)系統(tǒng)，那將大大減少人力和物力的支出，也能夠減少出現(xiàn)多個(gè)版本，從而導(dǎo)致需要重新打印，進(jìn)而引發(fā)矛盾和資源[2]的浪費(fèi)，本文從此處著手，搭建了一個(gè)智慧實(shí)驗(yàn)實(shí)訓(xùn)系統(tǒng)，意在方便大家，解決學(xué)校和信息工程學(xué)院的各類型實(shí)驗(yàn)實(shí)訓(xùn)問題。

1 系統(tǒng)開發(fā)技術(shù)

1.1 Spring Boot 框架

Spring Boot[3] 基于Spring4.0 設(shè)計(jì)，不僅繼承了Spring框架原有的優(yōu)秀特性，而且還通過簡(jiǎn)化配置來進(jìn)一步加速Spring應(yīng)用的整個(gè)搭建和開發(fā)過程。另外，Spring Boot通過集成大量的框架使得依賴包的版本沖突和引用的不穩(wěn)定性等問題得到了很好的解決。Spring Boot框架開發(fā)還可以實(shí)現(xiàn)前后端分離，相較于傳統(tǒng)的開發(fā)模式，這種更利于維護(hù)。

1.2 MySQL 數(shù)據(jù)庫(kù)

MySQL[4]是一個(gè)關(guān)系型數(shù)據(jù)庫(kù)[5]管理系統(tǒng)，其將數(shù)據(jù)保存在不同的表內(nèi)，而不是將所有數(shù)據(jù)都放在一個(gè)大倉(cāng)庫(kù)中，這樣就增加了速度并提高了靈活性，由于其體積小、速度快、總體擁有成本低，尤其是開放了源代碼這一特點(diǎn)，一般中小型網(wǎng)站的開發(fā)都選擇MySQL 作為網(wǎng)站數(shù)據(jù)庫(kù)。

1.3 Vue 開發(fā)框架

Vue開發(fā)框架是一款用于構(gòu)建用戶界面的JavaS?cript框架。它基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建，并提供了一套聲明式的、組件化的編程模型，幫助開發(fā)者高效地開發(fā)用戶界面，其只關(guān)注視圖層的開發(fā)工作。這種框架不僅容易上手，還便于與第三方庫(kù)或既有項(xiàng)目整合，是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，應(yīng)用此框架可以輕松處理大多數(shù)Web應(yīng)用的場(chǎng)景，并且?guī)缀醪恍枰謩?dòng)優(yōu)化，并且Vue完全有能力處理大規(guī)模的應(yīng)用。

2 系統(tǒng)詳細(xì)設(shè)計(jì)

本文實(shí)現(xiàn)的智慧實(shí)驗(yàn)實(shí)訓(xùn)系統(tǒng)[6]一共分為四個(gè)大的板塊，分別承擔(dān)了實(shí)驗(yàn)室管理、材料管理、學(xué)生管理、預(yù)約管理的功能，其中實(shí)驗(yàn)室管理功能是系統(tǒng)的主要功能，其余各個(gè)部分的功能都是與實(shí)驗(yàn)室管理功能相輔相成的，主要架構(gòu)如圖1所示。

2.1 實(shí)驗(yàn)室管理

實(shí)驗(yàn)室作為智慧實(shí)驗(yàn)實(shí)訓(xùn)系統(tǒng)的最重要部分，在設(shè)計(jì)之初就被列為重點(diǎn)進(jìn)行設(shè)計(jì)，前后端分離，數(shù)據(jù)庫(kù)獨(dú)立以方便維護(hù)。

1） 后端設(shè)計(jì)

在后端設(shè)計(jì)部分，這里將其分為四個(gè)組件，其中的實(shí)體類是最重要的部分，它們分別是：entities 和controllers以及services和repositories，也即實(shí)體類、控制器類、服務(wù)類和倉(cāng)庫(kù)類，此處在實(shí)體類中使用了Java Persistence API （JPA） 來映射數(shù)據(jù)庫(kù)表，并定義了實(shí)驗(yàn)室的各個(gè)屬性，如id、name、description、location、capacity等；控制器類是一個(gè)Spring MVC控制器，它定義了處理HTTP 請(qǐng)求的方法，通過使用注解來映射HTTP請(qǐng)求到相應(yīng)的方法上。其中，該控制器能夠處理獲取所有實(shí)驗(yàn)室、根據(jù)ID獲取單個(gè)實(shí)驗(yàn)室、創(chuàng)建新實(shí)驗(yàn)室、更新現(xiàn)有實(shí)驗(yàn)室的信息、刪除實(shí)驗(yàn)室等操作；倉(cāng)庫(kù)類是一個(gè)Spring Data JPA接口，它提供了一組基本的CRUD操作方法，如findById（）等方法，被用于與數(shù)據(jù)庫(kù)進(jìn)行交互。

該接口繼承了JpaRepository接口，這個(gè)接口提供了一些基本的JPA操作，如save（）、findAll（）等；服務(wù)類提供了對(duì)實(shí)驗(yàn)室的各種操作方法，如獲取所有實(shí)驗(yàn)室、根據(jù)ID獲取單個(gè)實(shí)驗(yàn)室、創(chuàng)建新實(shí)驗(yàn)室、更新現(xiàn)有實(shí)驗(yàn)室的信息、刪除實(shí)驗(yàn)室等。

該服務(wù)類通過調(diào)用LabRepository接口中定義的方法來實(shí)現(xiàn)對(duì)實(shí)驗(yàn)室的操作。

2） 前端設(shè)計(jì)

在前端設(shè)計(jì)部分，主要解決的是人機(jī)交互的問題，此處開發(fā)使用Element Plus組件庫(kù)的組件構(gòu)建，將頁(yè)面設(shè)置出獨(dú)立的組件，實(shí)驗(yàn)室管理功能主要實(shí)現(xiàn)面向老師：預(yù)約和發(fā)布、收集功能，面向?qū)W生：預(yù)約、查看、提交功能，面向?qū)嶒?yàn)室管理人員：維護(hù)、審核功能一共八大功能，且這些功能在此系統(tǒng)中以輸入框的形式體現(xiàn)，因?yàn)槭褂肊lement Plus 構(gòu)建應(yīng)用，所以其UI 界面較為美觀。

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

在數(shù)據(jù)庫(kù)設(shè)計(jì)部分，主要解決數(shù)據(jù)的存儲(chǔ)問題，除了字段問題，外鍵約束也是一個(gè)必須要考量的問題，系統(tǒng)的實(shí)驗(yàn)室管理功能的數(shù)據(jù)庫(kù)字段說明如表1 所示。

2.2 材料管理

材料的管理顯然是設(shè)計(jì)這一個(gè)系統(tǒng)的重要組成部分，實(shí)驗(yàn)的最終結(jié)果是必須要輸出為按照要求和格式的材料，限制于學(xué)校的資源有限，這里未能將收集文件的功能集成到系統(tǒng)之中。故而采用了如圖2所示的由金山辦公出品的WPS群共享文件夾實(shí)現(xiàn)收集文件的功能，方便快捷。

而具體的統(tǒng)計(jì)信息，可以導(dǎo)出Excel報(bào)表后由實(shí)驗(yàn)室管理人員錄入，也能夠?qū)崿F(xiàn)同步的功能。這一部分的前后端設(shè)計(jì)與之前的實(shí)驗(yàn)室管理部分相同，都是以模塊化的方式完成，后端四個(gè)組件，前端使用Ele?ment Plus組件構(gòu)建，但是，這一部分的不同之處在于數(shù)據(jù)庫(kù)的設(shè)計(jì)，這里的材料管理功能的數(shù)據(jù)庫(kù)的字段說明如表2所示。

2.3 學(xué)生管理

這個(gè)系統(tǒng)最重要的就是要面向?qū)W生本人進(jìn)行設(shè)計(jì)，學(xué)生管理關(guān)系著學(xué)生的學(xué)分成績(jī)以及個(gè)人命運(yùn)前途，因此在設(shè)計(jì)這一部分不容半點(diǎn)馬虎。此部分雖然也是與之前的內(nèi)容基本相同，前后端分離，后端四大組件，前端使用Element Plus組件構(gòu)建，自然這也是模塊化開發(fā)的一大好處，無(wú)須很多精力從零開始完善所有的功能，套用已有模板就能完成新功能開發(fā)，此處也是為開源生態(tài)做出自己的貢獻(xiàn)。項(xiàng)目的完成是站在巨人的肩膀上完成的，沒有龐大的開源社區(qū)和同學(xué)老師的幫助，開發(fā)的過程將舉步維艱。同樣的，這里的學(xué)生管理功能的數(shù)據(jù)庫(kù)的字段說明如表3所示。

2.4 預(yù)約管理

最后一環(huán)是預(yù)約的管理。過去的一年里，由于西校區(qū)圖書館的修繕，僅存的電子瀏覽室也被暫停使用，學(xué)校里各個(gè)學(xué)院都有一定的解決方案來方便考研學(xué)生，例如多開放自習(xí)室等政策，但是還有一部分對(duì)實(shí)驗(yàn)環(huán)境，尤其是對(duì)電腦配置有需求的學(xué)生提出了要將各個(gè)學(xué)院機(jī)房有閑置的機(jī)房進(jìn)行資源共享，需要學(xué)校提供一些能夠操作一些對(duì)電腦配置的需求較高的程序或是對(duì)物理以及數(shù)學(xué)模型進(jìn)行模型的渲染和修改。但是管理起來太麻煩，權(quán)責(zé)不明晰。誰(shuí)帶隊(duì)進(jìn)入的實(shí)驗(yàn)室？結(jié)束實(shí)驗(yàn)之后出現(xiàn)問題誰(shuí)負(fù)責(zé)？當(dāng)天的實(shí)驗(yàn)管理人員又該安排誰(shuí)？這個(gè)系統(tǒng)的設(shè)計(jì)考慮到這一點(diǎn)，提出了預(yù)約功能這一概念，節(jié)假日實(shí)驗(yàn)室可以預(yù)約進(jìn)入進(jìn)行實(shí)驗(yàn)，只需要在這個(gè)系統(tǒng)內(nèi)登記必要信息，審核通過即可。預(yù)約管理功能的數(shù)據(jù)庫(kù)的字段說明如表4所示。

3 系統(tǒng)配置說明

在構(gòu)建整體項(xiàng)目的時(shí)候，團(tuán)隊(duì)出現(xiàn)過許多BUG，包括但是不限于后臺(tái)服務(wù)無(wú)法正常啟動(dòng)，前端頁(yè)面顯示不全，側(cè)邊欄與主頁(yè)面重疊等問題，但都迎刃而解，為了能夠復(fù)現(xiàn)團(tuán)隊(duì)的項(xiàng)目，方便后續(xù)優(yōu)化，防止出現(xiàn)“It works on my machine”等系列跨平臺(tái)問題，這里項(xiàng)目對(duì)配置文件有幾點(diǎn)要求。

這里的Vue項(xiàng)目[7]在項(xiàng)目的src目錄下的main.js 文件配置是最重要的一環(huán)，關(guān)系到系統(tǒng)如何處理這個(gè)項(xiàng)目的邏輯，其應(yīng)當(dāng)如下所示：

最后是作為最關(guān)鍵部分的路由，這里添加的是router.js文件，其為跳轉(zhuǎn)頁(yè)面做了技術(shù)上的支持，值得注意的是，這里的所有組件都必須要注入路由才可以完成跳轉(zhuǎn)，側(cè)邊欄才有效果，其配置應(yīng)當(dāng)如下所示：

import Laboratory from ′@/components/Laboratory.vue′

//其余組件類似

const routes = [

{path： ′/laboratory′，

component： Laboratory}，

//其余組件類似]

const router = createRouter（{

history： createWebHistory（），

routes}）

export default router 以上便能配置好Vue項(xiàng)目

3.2 Spring Boot 項(xiàng)目

這個(gè)系統(tǒng)使用了前后端分離的技術(shù)，前后端兩個(gè)項(xiàng)目分布在兩個(gè)不同的端口下，要想實(shí)現(xiàn)通信，必須配置跨域訪問，允許來自不同域名的資源進(jìn)行相互訪問，本系統(tǒng)的WebConfig.java配置如下：

這樣就實(shí)現(xiàn)了前后端分離管理的功能，便于維護(hù)和拆分，當(dāng)有新的業(yè)務(wù)邏輯加入時(shí)，只需要再添加一個(gè)模塊并按照需求更改即可，這樣做，大大提高了開發(fā)人員的維護(hù)效率，減少了做重復(fù)勞動(dòng)的必要。

除此之外，為了能夠?qū)?shù)據(jù)庫(kù)進(jìn)行讀寫操作，這里還需要在application.properties 文件中添加如下配置：

這里請(qǐng)務(wù)必將加粗部分的內(nèi)容替換為本地機(jī)器的內(nèi)容，否則將導(dǎo)致配置無(wú)效，將無(wú)法對(duì)數(shù)據(jù)庫(kù)進(jìn)行讀寫操作。

4 系統(tǒng)整體測(cè)試

4.1 Spring Boot 項(xiàng)目測(cè)試

打開集成編譯環(huán)境，這里編譯選擇的是IntelliJIDEA，首先啟動(dòng)此項(xiàng)目的總進(jìn)程文件：ProjectApplica?tion.java，右鍵點(diǎn)擊運(yùn)行，當(dāng)出現(xiàn)如圖3所示的效果，即出現(xiàn)可以點(diǎn)擊的8080端口藍(lán)色超鏈接時(shí)，項(xiàng)目啟動(dòng)成功，這個(gè)時(shí)候系統(tǒng)的端口就是正常運(yùn)行的。

啟動(dòng)成功之后，可以使用Postman或者IDE自帶的工具等API測(cè)試工具對(duì)其發(fā)送請(qǐng)求，看看是否有數(shù)據(jù)的返回。

首先測(cè)試的是http：//localhost：8080/labs這個(gè)端口，其指向的數(shù)據(jù)庫(kù)是：實(shí)驗(yàn)室管理。這里也成功返回了如圖4所顯示的結(jié)果。經(jīng)各項(xiàng)測(cè)試，認(rèn)為后臺(tái)服務(wù)端運(yùn)行狀態(tài)良好且能讀取到數(shù)據(jù)庫(kù)的信息。

4.2 Vue 項(xiàng)目測(cè)試

Vue項(xiàng)目位于整體項(xiàng)目的一個(gè)目錄下，與后端項(xiàng)目同級(jí)，要想啟動(dòng)這個(gè)項(xiàng)目，需要先到控制臺(tái)切換到這個(gè)項(xiàng)目的文件夾下，本文的是在整體項(xiàng)目目錄下的frontend目錄，執(zhí)行命令：npm run serve，當(dāng)出現(xiàn)如圖5 所示的提示詞和藍(lán)色超鏈接時(shí)，項(xiàng)目啟動(dòng)成功。

打開任意瀏覽器，輸入：http：//localhost：3001/，能夠出現(xiàn)如圖6所示的一個(gè)頁(yè)面即可，這里項(xiàng)目顯示的是示例頁(yè)面，默認(rèn)的顯示界面是laboratory，所以瀏覽器自動(dòng)會(huì)在域名后追加laboratory的顯示，經(jīng)過多輪測(cè)試，在啟動(dòng)了這一項(xiàng)目后顯示均正常。

4.3 整體項(xiàng)目測(cè)試

在完成了以上兩個(gè)端口的測(cè)試之后，就要進(jìn)入系統(tǒng)的最后測(cè)試環(huán)節(jié)。整體項(xiàng)目測(cè)試環(huán)節(jié)，在這一部分，系統(tǒng)需要保持三個(gè)端均在線：前端、后端、數(shù)據(jù)庫(kù)，啟動(dòng)順序應(yīng)該是：數(shù)據(jù)庫(kù)連接→后端項(xiàng)目→前端項(xiàng)目，在按照先前提到之正確的順序啟動(dòng)了項(xiàng)目之后，成功觀測(cè)到系統(tǒng)設(shè)計(jì)之初預(yù)想的效果，如圖7所示。

還需要測(cè)試其與數(shù)據(jù)庫(kù)的互動(dòng)能力，輸入一些示例數(shù)據(jù)，添加之后可以看到，如圖8所示，數(shù)據(jù)出現(xiàn)在下方的表格中。

等待片刻，待服務(wù)器與數(shù)據(jù)庫(kù)產(chǎn)生數(shù)據(jù)交換后，在數(shù)據(jù)庫(kù)中也能觀測(cè)到這些示例數(shù)據(jù)，如圖9所示，即成功。后續(xù)頁(yè)面經(jīng)過多輪項(xiàng)目測(cè)試，其余部分也均能正常工作，成功地實(shí)現(xiàn)了系統(tǒng)的預(yù)期的效果。

為了確保項(xiàng)目能夠正常工作，避免出現(xiàn)頁(yè)面的錯(cuò)亂，這里推薦使用谷歌瀏覽器等主流瀏覽器查看此效果，渲染的效果最好，響應(yīng)速度也是最快的，一般情況下不推薦使用IE瀏覽器查看，因?yàn)檫@里使用的技術(shù)并未專門對(duì)IE瀏覽器做優(yōu)化，也請(qǐng)這部分用戶盡快升級(jí)到Edge瀏覽器以方便使用，獲得最新的安全支持。

5 結(jié)束語(yǔ)

本文使用Spring Boot技術(shù)和Vue開發(fā)框架開發(fā)了一個(gè)智慧實(shí)驗(yàn)實(shí)訓(xùn)系統(tǒng)，經(jīng)過各項(xiàng)綜合測(cè)試與試點(diǎn)應(yīng)用，可以認(rèn)為此系統(tǒng)所提供的幾大功能均能有效幫助學(xué)校和學(xué)生提高各項(xiàng)實(shí)驗(yàn)實(shí)訓(xùn)的效率，達(dá)到了系統(tǒng)設(shè)計(jì)預(yù)期的效果。限制于學(xué)校的資源有限，這個(gè)系統(tǒng)的設(shè)計(jì)還有一些不足之處，一些服務(wù)例如存儲(chǔ)服務(wù)未能實(shí)現(xiàn)自主化。未來，團(tuán)隊(duì)將會(huì)引入更加方便大家使用的各項(xiàng)功能，在盡可能的情況為此系統(tǒng)提供學(xué)校校內(nèi)的存儲(chǔ)服務(wù)，再引入一些時(shí)下熱門提高效率的技術(shù)，例如大語(yǔ)言模型技術(shù)智能答疑，更美觀的、以人為本的UI界面，提高學(xué)校和學(xué)生的用戶體驗(yàn)。