雷澤堅 李錫輝 劉宣江

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

0 引言

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

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

1.1 Spring Boot 框架

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

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

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

1.3 Vue 開發(fā)框架

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

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

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

2.1 實驗室管理

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

1） 后端設(shè)計

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

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

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

2） 前端設(shè)計

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

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

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

2.2 材料管理

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

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

2.3 學生管理

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

2.4 預約管理

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

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

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

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

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

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

//其余組件類似

const routes = [

{path： ′/laboratory′，

component： Laboratory}，

//其余組件類似]

const router = createRouter（{

history： createWebHistory（），

routes}）

export default router 以上便能配置好Vue項目

3.2 Spring Boot 項目

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

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

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

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

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

4.1 Spring Boot 項目測試

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

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

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

4.2 Vue 項目測試

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

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

4.3 整體項目測試

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

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

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

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

5 結(jié)束語

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