元件管理系統的設計與實現

摘要：為解決信息物理系統實踐課程中元件管理煩瑣，以及多班級上課公用器件管理不便利的問題，設計了一種基于微信小程序的實驗元件管理系統。該系統采用微信小程序作為前端展示界面，通過SpringBoot和MySQL實現后端數據的存儲和管理。學生用戶可在小程序上進行元件的查看和借用申請，教師用戶可對學生的申請進行審批，還可以發布元件使用說明和實驗室公告。管理員在后臺管理界面進行學生、教師以及元件管理等。

關鍵詞：元件管理系統；微信小程序；后端存儲；MySQL

中圖分類號：G642 文獻標識碼：A

文章編號：1009-3044（2024）31-0155-03

開放科學（資源服務）標識碼（OSID） ：

0 引言

近年來物聯網技術發展迅速，已經成為電子信息領域不可或缺的重要組成部分。高校中以信息物理系統實踐課程為代表的物聯網實驗課程的重要性也隨之提高。在這類實驗課程的教學過程中，實驗元件是不可或缺的重要組成部分，實驗元件的質量和數量會直接影響到實驗結果的準確性和可靠性，因此實驗元件的合理化、規范化管理尤為重要[1]。微信小程序運行于微信平臺之上，使用時只須聯網無須下載，開發者配置開發環境通過一定的開發規范和API進行開發，即可實現小程序的上線和運行，這些優勢讓微信小程序逐漸成為實驗元件管理的新選擇[2]。開發實驗元件管理系統，可以為學生提供更好的實驗體驗和更加自主的實驗環境，幫助授課教師實現實驗元件的在線管理，使實驗元件管理更加便捷、高效。

1 系統設計

1.1 結構設計

實驗元件管理系統的主體結構分為小程序前端、PC網頁前端、后端服務器以及數據庫。功能結構的設計按照用戶類型進行劃分，主要分為學生端、教師端和PC管理員端3個模塊。學生端主要實現元件的借出申請功能，教師端實現對學生借出申請的確認與管理，還能夠進行文件公告的發布以及對元器件進行增加和刪除等。管理員端則實現對用戶、元件、公告等內容的統一管理[3]。

1.2 流程設計

流程設計通過不同角色的用戶交互進行說明：教師用戶使用元件管理系統的小程序前端注冊提交，前端將教師數據發送到服務器，服務器將教師信息寫入數據庫。之后教師便可以登錄小程序發布文件公告、使用說明、元件是否出借等信息，同樣，這些信息會經由服務器傳送到對應數據庫。學生用戶使用元件管理系統小程序端時，后端會將教師寫入的數據庫內容返送給前端，呈現給學生[4]。小程序端流程設計主要包括登錄與注冊流程、教師元件管理流程、學生申請借出流程、管理員管理流程的設計。

小程序端的注冊與登錄流程設計：用戶打開元件管理小程序，點擊對應角色注冊按鈕，進入注冊界面，要求用戶填寫必要的注冊信息，填寫完成點擊注冊按鈕。此時元件管理小程序前端將用戶輸入的注冊信息發送到后端服務器進行驗證和處理，檢查用戶名的唯一性和密碼的有效性，并創建新的用戶賬戶。課程相關學生或老師打開元件管理小程序進入主界面輸入信息登錄，小程序會驗證輸入是否正確，驗證成功后發送請求到后端驗證登錄信息的正確性，成功后跳轉到主頁導航界面，至此注冊和登錄流程完成。

教師/管理員元件管理流程設計：實踐課程教師/ 管理員登錄進入教師端或管理員界面，打開元器件管理，進入界面后選擇要進行的操作。點擊新增進入元件新增界面，輸入相關內容點擊提交完成器件的新增。若要刪除器件，進入元器件管理界面后，則點擊相關器件圖片下方的刪除按鈕，點擊確認即可完成元件的刪除。點擊要修改信息的元件，輸入修改信息，保存后數據庫中的元件信息將會更新，圖1所示為教師/管理員元件管理流程圖。

管理員的管理流程主要包括學生管理、教師管理以及元件分類管理的流程設計。管理員元件管理流程和教師元件管理流程相同如圖1所示，管理員對學生和教師的管理流程相同如圖2所示。管理員打開元件管理程序的學生管理或教師管理界面，在列表界面中每一個信息物理系統實踐課程的選課學生或任課教師都有修改、查看、刪除3個按鈕，點擊對應按鈕即可實現相應的功能。

1.3 數據庫設計

數據庫設計的原則首先要保證數據庫中的數據準確地反映信息物理系統實踐課程實際授課中的情況，不能存在冗余或重復數據。其次，設計要優化查詢速度，在最短時間內提供用戶需要的數據。隨著課程的周期發展，數據庫中的數據量可能會增加，因此數據庫要具有擴展性和靈活性。同時，數據庫的設計要能保證數據的安全性，因此需要采取適當的安全防護措施，避免數據泄露或被不良分子攻擊[5]。基于以上原則，本系統的數據使用MySQL進行數據庫管理，按照元件管理系統的實體關系構建管理員表、學生表、教師表、元件申請表、出借元件表等重要數據表，存儲相關數據信息，表1為管理員表。

2 系統實現

2.1 前端系統的功能與實現

元件管理系統的使用者按照角色劃分可分為信息物理系統實踐課程選課的學生、任課教師、管理員。其中學生和教師的功能在小程序前端體現，管理員功能可以通過PC網頁端接入。本系統小程序前端實現了登錄與注冊模塊、個人中心模塊、元件申請模塊、學生端元件說明公告查看模塊、教師端元件說明及公告模塊、教師端元件借出管理模塊、教師端元件管理模塊的實現、審核回復模塊和信息交流模塊的所有功能。

小程序前端登錄與注冊模塊在整體設計方法上采用引入自定義API的方式，先完成登錄、注冊等組件的編寫，再通過import 函數導入登錄注冊頁面當中，減少代碼復雜度，增加代碼復用性，提高運行效率。學生和教師均可登錄主界面實現不同角色的登錄、注冊、密碼重置功能。個人中心模塊在兩種用戶的界面布局和功能分布上采用相似的結構，功能上一種為對注冊時未填寫或要更改的信息進行更新，另一種為負責其他功能頁面的路由跳轉，包括學生提交的元件申請信息的管理與教師信息交流的管理等。

元件申請借出功能由學生和教師兩端聯動實現，教師端可以進行元件的增加、刪除、修改使用須知、庫存數量等信息。教師端發布信息后，學生登入學生端提交申請單，填寫申請和歸還信息等內容， 前端的主要實現方法是創建表單API，表單則通過form組件實現，表單組件的數據綁定主要通過event.detail={value：{'yuanjian'：'led'}，formId：''}形式實現[6]。教師端元件借出管理模塊的實現第一步為從教師端獲取學生提交的元件借出申請列表等數據，第二步為對引入的列表數據進行渲染，渲染方式與學生端借出申請相同，在元件申請表的基礎上，為教師端額外使用picker-view 組件構建歸還狀態選擇模塊。教師可以在此界面對學生申請借出的元件進行歸還確認，審批出借狀態，通知學生取元件等，元件申請模塊如圖3所示。

2.2 PC 管理員前端系統功能的實現

PC管理員前端實現了和小程序前端相對應的功能。PC端均采用Vue框架開發，Vue也是一種基于Ja?vaScript的開發框架[7，8]。當用戶點擊登錄時，請求會被發送到Java后端邏輯層中的/service/login，邏輯層對賬號密碼進行驗證，完成這一步后，會將系統采集到的用戶賬號密碼數據連同數據庫進行檢索，將后端登錄請求通過Token保存到本地，除了登錄驗證外，需要使用Axios技術實現數據訪問對象和service的創建。完成上述過程后，使用vue-router實現路由跳轉，跳轉到元件管理小程序的網頁管理端。

PC管理員端學生管理模塊詳情界面邏輯與小程序端個人中心類似，區別為Vue將js，wxml，wxss等部分統一寫在Vue文件中，渲染統一放在<template>視圖層中，邏輯統一在<script>層中。使用v-for和v-bind，class-header等組件實現對實踐課學生列表的創建。教師管理模塊實施邏輯與學生管理頁面相同，不同的是教師管理界面在<template>中額外添加了與教師數據表對應的el-table組件，管理員可以在此界面進行教師管理，頁面效果如圖4所示。

PC管理員端元件模塊與小程序端教師用戶不同的是，PC管理員具有管理多個不同教師的元件庫存的權限，通過對教學班的管理教師編號，分配教師的元件管理權限，實施邏輯與小程序端類似，開發語言更換為vue，將按鈕、渲染、數據綁定等功能統一放在vue文件中實現綁定[9]。元件申請信息管理模塊與小程序端大體相同，不同的是PC端額外設計了綁定歸還狀態的table函數，以及searchhandle函數進行查詢管理。PC管理員能夠統一查看、管理、刪除學生提交的申請單，并且可以直觀看到返還確認的情況，方便使用者統一對元件的出借情況進行管理。

2.3 后端模塊的功能實現

后端模塊通過在Controller 層使用Requestmap?ping標注的方法處理登錄請求，調用預先設置的判定函數，判定用戶名和密碼輸入是否正確，用戶是否已經注冊過元件管理小程序，登錄是否正確，生成token 返回服務器[10]。在Entity層配置接受傳參的實體類，在View層配置后端返回實體視圖的輔助類。然后在vo層配置數據庫中表的映射，實現登錄功能。通過創建client類和contact類，創建一個object數組把需要的傳參放入數組中實現添加功能。修改和刪除功能的實現通過先賦值到數組再執行SQL語句，最后使用Axios HTTP請求向本地服務器發起數據庫操作請求，實現增查改刪功能。數據搜索模塊查詢功能的前置操作與增加刪除等類似，先在實體類中使用privateyuanjian id的格式進行聲明，之后創建一個yuanjian?Repository接口，定義查找方法，最后Controller層中注入創建的接口實現搜索功能。

3 系統測試

為檢驗系統功能的實現效果，本文選取黑盒測試法對系統進行了功能測試。基本原理是通過用戶層直接與軟件接入互動，進行數據輸入等操作，例如輸入添加的元件庫存信息，分析輸出結果是否存入數據庫中，并顯示在元件小程序前端來測試軟件系統的功能。在此過程中，測試人員只要看到了出借的元件在前端可視化界面變化，就可以判斷出借元件功能是否運行成功，而不需要花費額外的時間去查看內部的代碼實現。本次測試，預先準備了一組定義好的管理員和不同用戶賬號，分別進行了元件管理系統小程序端登錄測試、學生端元件申請測試、教師端元件管理測試、學生端信息交流測試、PC管理員端登錄測試、PC 管理員端學生管理測試、PC端元件申請信息管理測試，部分測試結果如表2所示。從測試結果來看，信息物理系統實踐課程的學生和教師在元件管理小程序端能夠實現登錄、元件申請借出、正常查看元件使用說明與實驗公告等功能，學生和教師能正常進行交流。PC管理員端的登錄、管理選課學生、管理實驗器件、查看、修改、增加刪除學生提交的元件申請單等均正常實現。

4 結束語

實驗教學是學生自主探究和創新創業的重要組成部分，本文針對信息物理系統實踐課程教學過程中實驗元件管理不便利的問題，設計并實現了一種基于微信小程序的元件管理系統，解決了學生因共用實驗元件只能課上實驗的問題。為學生提供了更好的實驗體驗和更加自主的實驗環境，讓學生們有條件完成更高水平的結課作品，在實踐過程中更加深入了解物聯網專業知識，增強工程實踐能力與創新能力。

參考文獻：

[1] 徐禮長.高校電子信息與物聯網工程實驗教學中心信息化管理實踐[J].電子元器件與信息技術，2022，6（1）：36-37.

[2] 林仙土.基于微信小程序的高校設備管理系統設計與實現[J].無線互聯科技，2023，20（1）：63-65，72.

[3] 汪慶，杜煒，耿英保，等.基于物聯網的實驗教學管理平臺的構建與實現[J].電子技術與軟件工程，2021（13）：165-167.

[4] 楊晨光.以用戶行為為導向的微信小程序微交互設計與研究[D].北京：北京郵電大學，2021.

[5] BACCHIANI L，BRAVETTI M，GIUNTI M，et al.A Java types?tate checker supporting inheritance[J].Science of Computer Pro?gramming，2022，221：102844.

[6] 李麗萍，田浩，袁小平，等.基于微信小程序的實驗室信息管理系統設計與實踐[J]. 實驗室科學，2022，25（1）：61-64.

[7] 王志亮，紀松波.基于SpringBoot的Web前端與數據庫的接口設計[J].工業控制計算機，2023，36（3）：51-53.

[8] 郭艷華.基于Vue框架的海量數據處理系統設計[J].信息與電腦（理論版），2022，34（23）：16-18.

[9] 王以伍，舒暉.基于SpringBoot+Vue前后端分離的高校實驗室預約管理系統的設計與實現[J].現代計算機，2023，29（1）：114-117.

[10] HUANG T，FANG C C.Optimization of software test schedul?ing under development of modular software systems[J].Symme?try，2023，15（1）：195.

【通聯編輯：梁書】