一個智慧實驗實訓系統的設計與實現

雷澤堅 李錫輝 劉宣江

關鍵詞：實驗系統；智慧校園；Vue開發框架；Spring Boot；MySQL

0 引言

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

1 系統開發技術

1.1 Spring Boot 框架

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

1.2 MySQL 數據庫

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

1.3 Vue 開發框架

Vue開發框架是一款用于構建用戶界面的JavaS?cript框架。它基于標準HTML、CSS和JavaScript構建，并提供了一套聲明式的、組件化的編程模型，幫助開發者高效地開發用戶界面，其只關注視圖層的開發工作。這種框架不僅容易上手，還便于與第三方庫或既有項目整合，是一套用于構建用戶界面的漸進式框架，應用此框架可以輕松處理大多數Web應用的場景，并且幾乎不需要手動優化，并且Vue完全有能力處理大規模的應用。

2 系統詳細設計

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

2.1 實驗室管理

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

1） 后端設計

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

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

該服務類通過調用LabRepository接口中定義的方法來實現對實驗室的操作。

2） 前端設計

在前端設計部分，主要解決的是人機交互的問題，此處開發使用Element Plus組件庫的組件構建，將頁面設置出獨立的組件，實驗室管理功能主要實現面向老師：預約和發布、收集功能，面向學生：預約、查看、提交功能，面向實驗室管理人員：維護、審核功能一共八大功能，且這些功能在此系統中以輸入框的形式體現，因為使用Element Plus 構建應用，所以其UI 界面較為美觀。

3） 數據庫設計

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

2.2 材料管理

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

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

2.3 學生管理

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

2.4 預約管理

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

3 系統配置說明

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

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

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

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 項目

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

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

除此之外，為了能夠對數據庫進行讀寫操作，這里還需要在application.properties 文件中添加如下配置：

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

4 系統整體測試

4.1 Spring Boot 項目測試

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

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

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

4.2 Vue 項目測試

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

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

4.3 整體項目測試

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

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

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

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

5 結束語

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