元件管理系統(tǒng)的設(shè)計與實現(xiàn)

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

關(guān)鍵詞：元件管理系統(tǒng)；微信小程序；后端存儲；MySQL

中圖分類號：G642 文獻(xiàn)標(biāo)識碼：A

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

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID） ：

0 引言

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

1 系統(tǒng)設(shè)計

1.1 結(jié)構(gòu)設(shè)計

實驗元件管理系統(tǒng)的主體結(jié)構(gòu)分為小程序前端、PC網(wǎng)頁前端、后端服務(wù)器以及數(shù)據(jù)庫。功能結(jié)構(gòu)的設(shè)計按照用戶類型進(jìn)行劃分，主要分為學(xué)生端、教師端和PC管理員端3個模塊。學(xué)生端主要實現(xiàn)元件的借出申請功能，教師端實現(xiàn)對學(xué)生借出申請的確認(rèn)與管理，還能夠進(jìn)行文件公告的發(fā)布以及對元器件進(jìn)行增加和刪除等。管理員端則實現(xiàn)對用戶、元件、公告等內(nèi)容的統(tǒng)一管理[3]。

1.2 流程設(shè)計

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

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

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

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

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

數(shù)據(jù)庫設(shè)計的原則首先要保證數(shù)據(jù)庫中的數(shù)據(jù)準(zhǔn)確地反映信息物理系統(tǒng)實踐課程實際授課中的情況，不能存在冗余或重復(fù)數(shù)據(jù)。其次，設(shè)計要優(yōu)化查詢速度，在最短時間內(nèi)提供用戶需要的數(shù)據(jù)。隨著課程的周期發(fā)展，數(shù)據(jù)庫中的數(shù)據(jù)量可能會增加，因此數(shù)據(jù)庫要具有擴(kuò)展性和靈活性。同時，數(shù)據(jù)庫的設(shè)計要能保證數(shù)據(jù)的安全性，因此需要采取適當(dāng)?shù)陌踩雷o(hù)措施，避免數(shù)據(jù)泄露或被不良分子攻擊[5]。基于以上原則，本系統(tǒng)的數(shù)據(jù)使用MySQL進(jìn)行數(shù)據(jù)庫管理，按照元件管理系統(tǒng)的實體關(guān)系構(gòu)建管理員表、學(xué)生表、教師表、元件申請表、出借元件表等重要數(shù)據(jù)表，存儲相關(guān)數(shù)據(jù)信息，表1為管理員表。

2 系統(tǒng)實現(xiàn)

2.1 前端系統(tǒng)的功能與實現(xiàn)

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

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

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

2.2 PC 管理員前端系統(tǒng)功能的實現(xiàn)

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

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

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

2.3 后端模塊的功能實現(xiàn)

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

3 系統(tǒng)測試

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

4 結(jié)束語

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

參考文獻(xiàn)：

[1] 徐禮長.高校電子信息與物聯(lián)網(wǎng)工程實驗教學(xué)中心信息化管理實踐[J].電子元器件與信息技術(shù)，2022，6（1）：36-37.

[2] 林仙土.基于微信小程序的高校設(shè)備管理系統(tǒng)設(shè)計與實現(xiàn)[J].無線互聯(lián)科技，2023，20（1）：63-65，72.

[3] 汪慶，杜煒，耿英保，等.基于物聯(lián)網(wǎng)的實驗教學(xué)管理平臺的構(gòu)建與實現(xiàn)[J].電子技術(shù)與軟件工程，2021（13）：165-167.

[4] 楊晨光.以用戶行為為導(dǎo)向的微信小程序微交互設(shè)計與研究[D].北京：北京郵電大學(xué)，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] 李麗萍，田浩，袁小平，等.基于微信小程序的實驗室信息管理系統(tǒng)設(shè)計與實踐[J]. 實驗室科學(xué)，2022，25（1）：61-64.

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

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

[9] 王以伍，舒暉.基于SpringBoot+Vue前后端分離的高校實驗室預(yù)約管理系統(tǒng)的設(shè)計與實現(xiàn)[J].現(xiàn)代計算機(jī)，2023，29（1）：114-117.

[10] HUANG T，F(xiàn)ANG C C.Optimization of software test schedul?ing under development of modular software systems[J].Symme?try，2023，15（1）：195.

【通聯(lián)編輯：梁書】