基于前后端分離的多媒體管理系統(tǒng)的設計與實現(xiàn)

摘 要：隨著信息技術和人工智能的日趨成熟，智慧教育時代必將來臨，高校教室由傳統(tǒng)電教向智慧教室的轉型勢在必行。但是，當前智慧教室建設和使用過程中，新引入的多媒體智能設備種類和數(shù)量越來越多、智能化設備故障原因各不相同、教師使用不當?shù)葐栴}都會影響教學活動的正常進行，阻礙了智慧教育的開展。針對以上問題，文章提出以一種高校多媒體資產(chǎn)管理和運維的新思路，并設計實現(xiàn)了基于前后端分離的多媒體管理系統(tǒng)。通過系統(tǒng)可以對高校多媒體設備的地理位置、設備狀態(tài)和運維情況進行管理，保障高校智慧教室設備的穩(wěn)定運行和教學活動的正常進行。

關鍵詞：智慧教室；系統(tǒng)分析；多媒體設備；數(shù)據(jù)分析

中圖分類號：TP311.5 文獻標識碼：A 文章編號：2096-4706（2024）20-0164-05

Design and Implementation of Multimedia Management System Based on Front-end and Back-end Separation

LI Jingwei

（Hangzhou City University， Hangzhou 310015， China）

Abstract： With the increasing maturity of information technology and Artificial Intelligence， the era of smart education is bound to come， and the transformation of college classrooms from traditional e-learning to smart classrooms is inevitable. However， during the current construction and use of smart classrooms， the increasing varieties and number of newly introduced multimedia intelligent devices， the different causes of failure of intelligent devices， and the improper use of teachers will all affect the normal conduct of teaching activities and hinder the development of smart education. In view of the above problems， the paper proposes a new idea of multimedia asset management and operation and maintenance in colleges and universities， and designs and realizes a multimedia management system based on the front-end and back-end separation. It can manage the geographic location， the status of the equipment， and operation and maintenance situation of multimedia equipment in colleges and universities through the system， so as to ensure the stable operation of the equipment of the smart classrooms and the normal operation of teaching activities in colleges and universities.

Keywords： smart classroom; systematic analysis; multimedia equipment; data analysis

0 引 言

自20世紀90年代中期開始我國全力推進教育信息化，新一代信息技術的日趨成熟，在教育領域，以數(shù)字化教育和智慧化教育為目標的智慧教室[1]成為新的熱點。教育智慧化最重要的載體是智慧教室，智慧教室也為整個教育行業(yè)帶來更多新的機遇，智慧教學[2]不僅僅是設備的智慧，更重要的是教學新思維和職業(yè)教育的融合。中控、直錄播等多媒體設備[3]作為智慧教室重要的資產(chǎn)，需要使用現(xiàn)代化的系統(tǒng)對智慧教室設備進行全面有效得管理，保證多媒體設備能夠正常運用于教學活動。實際操作過程中，智慧教室多媒體設備的管理行為均發(fā)生在現(xiàn)場，如教室內設備的運維、設備的返廠維修、設備的調度等，把需要操作的設備信息通過手機端展示，方便運維管理人員實時了解多媒體設備的現(xiàn)狀，因此移動端的多媒體管理系統(tǒng)對設備的維護和管理尤為重要。

1 需求分析

浙大城市學院現(xiàn)有智慧教室149間，每間智慧教室存在若干多媒體設備（如中控、功放、錄播主機、班牌、光能板等），總計擁有4 000多個資產(chǎn)，長時間使用后，設備容易發(fā)生相應故障。為保障教室多媒體設備的情況能被管理人員掌握，現(xiàn)場運維人員能及時了解運維數(shù)據(jù)，本系統(tǒng)將記錄多媒體設備運維數(shù)據(jù)。如圖1所示，多媒體管理系統(tǒng)分為Web管理端和移動操作端，以下詳細分析兩個模塊的需求。

1.1 管理端需求分析

Web管理端由管理人員進行相應操作，圖2主要功能模塊包括：用戶創(chuàng)建并分配相應權限、添加/導入教學樓、添加/導入教室信息、添加/導入設備信息?；緷M足管理人員對基本信息的操作，并且能瀏覽所有設備的健康狀態(tài)、存放地址等情況，把握資產(chǎn)動態(tài)。

1.2 移動操作端需求分析

移動操作端由運維人員和物業(yè)管理人員共同記錄相應操作數(shù)據(jù)，用于管理人員隨時隨地查看所有資產(chǎn)的運維情況，其主要功能包括：資產(chǎn)、故障運維、后勤運維、新增日常運維和查看運維數(shù)據(jù)。移動操作端功能圖如圖3所示。

故障運維：設備發(fā)生告警或者教師上報相應問題后，由現(xiàn)場運維人員進行相應的維修，運維人員在維修好設備后，需要選擇相應的資產(chǎn)，填寫出現(xiàn)的問題和解決的進展，并需要標注問題是否解決。后勤運維：學校后勤人員在每日巡邏教室時，若發(fā)現(xiàn)教室內有缺失的物品，應需及時填寫相關信息，為后續(xù)備用件的替換和尋找缺失物品做準備。日常運維：運維人員每周巡檢教室時，若教室內設備出現(xiàn)問題，在日常運維模塊進行問題的記錄。查看運維：運維人員和物業(yè)管理人員只能看到本人的運維記錄，根據(jù)記錄重點保障未完成的運維服務；管理人員可以看到所有人的運維記錄，統(tǒng)計相應的數(shù)據(jù)分析資產(chǎn)損壞率，及時修復率等。

2 系統(tǒng)架構設計

浙大城市學院多媒體設備管理系統(tǒng)采用前后端分離的架構，總體架構圖如圖4所示，前端使用Vue編寫Web端頁面，VSCode作為Web端開發(fā)的工具；移動端使用uni-APP框架構建H5頁面，HbuilderX作為移動端開發(fā)工具；Nginx[4]是一款輕量級的Web服務器，通過URI或URL提供網(wǎng)絡服務，Nginx占用內存少、啟動快、并發(fā)能力強，在應用服務中廣泛使用；后端使用Spring Boot架構編寫RESTful風格的接口，并進行數(shù)據(jù)的同步，IDEA作為后端開發(fā)的工具；關系型數(shù)據(jù)庫MySQL存儲結構化數(shù)據(jù)（資產(chǎn)信息、運維信息等）；非關系型數(shù)據(jù)庫Redis主要儲存緩存數(shù)據(jù)（如用戶口令、用戶角色等）。

2.1 Vue框架

本系統(tǒng)采用Vue框架構建所媒體系統(tǒng)的Web前端。與其他重量級框架不同的是，Vue是只需要一個輕量的核心庫[5]便可以搭建一套用戶界面，對于復雜的頁面也可以引用各式各樣的插件進行構建，架構簡單，采用組件化模式和聲明式編碼，更好地維護代碼，提高開發(fā)效率。在本系統(tǒng)中，利用Vue的第三方庫，如Vue-router路由框架、Vuex全局狀態(tài)管理框架、Element前端UI框架、Axios前端HTTP框架等，更好地提升系統(tǒng)的功能。

2.2 uni-APP框架

uni-APP是開發(fā)小程序的框架，允許開發(fā)者使用Vue語法編寫代碼，在事件處理方面遵循Vue規(guī)范[6]，編譯文件可在IOS、安卓或H5等平臺上運行，也就是說，uni-APP能讓開發(fā)者使用Vue的語法開發(fā)小程序。uni-APP具有跨平臺、高性能、開放生態(tài)和開發(fā)便捷的特點[7]，開發(fā)者可以避免重復開發(fā)，框架支持原生插件，并且提供了豐富的組件以簡化開發(fā)和調試的流程。多媒體管理系統(tǒng)引入高性能下拉刷新上拉加載組件、富文本組件、彈框組件等，不僅加快了開發(fā)流程，更提升了應用的性能。

2.3 Spring Boot框架

Spring Boot是由Pivotal團隊[8]提供的開源框架，設計該框架的目的是簡化項目的搭建和開發(fā)。Spring Boot技術的特點[9]有：基于maven插件創(chuàng)建可執(zhí)行的JAR包；內置Tomcat容器或Jetty容器，方便應用調試和部署；簡化maven配置，提供能自動進行配置的POMS；不需要XML配置，降低了代碼配置文件編寫的復雜度。

2.4 數(shù)據(jù)庫設計

MySQL數(shù)據(jù)庫[10]以是由MySQL AB公司開發(fā)的開源關系型數(shù)據(jù)庫管理系統(tǒng)，是最近幾年最流行的關系型數(shù)據(jù)管理系統(tǒng)之一，關系型數(shù)據(jù)庫就是將數(shù)據(jù)放在不同的表中，從而提高了數(shù)據(jù)操作的速度和靈活性。MySQL數(shù)據(jù)庫主要優(yōu)點為：為多種語言提供了API接口，提供TCP/IP、JDBC等多種數(shù)據(jù)庫連接方式，方便開發(fā)時調用數(shù)據(jù)庫中的數(shù)據(jù)；支持多種存儲引擎，如MyISAM、InnoDB、BDB等，為不同的業(yè)務場景提供多樣的選擇。

根據(jù)對系統(tǒng)的需求分析，本系統(tǒng)的數(shù)據(jù)表有：用戶表、用戶角色表、用戶和角色關聯(lián)表、菜單表、角色菜單關聯(lián)表、多媒體教學樓信息表、多媒體教室信息表、多媒體資產(chǎn)表和多媒體運維信息表等。下表是主要數(shù)據(jù)庫的表結構信息，表1為用戶表結構信息，表2為用戶角色表結構信息，表3為菜單表結構信息，表4為多媒體教室表結構信息，表5為多媒體教室資產(chǎn)表結構信息。

3 系統(tǒng)頁面展示

3.1 多媒體資產(chǎn)管理平臺Web端展示

多媒體資產(chǎn)管理Web端主要功能有：用戶管理、角色管理、菜單管理、資源列表、教學樓管理、教室管理和設備管理。打開平臺第一步需要通過賬戶密碼驗證登錄，如圖5所示。進入多媒體管理平臺后如圖6所示，頁面采用了側邊導航欄的設計模式，左側顯示的是本平臺Web端的所有功能。

管理人員可以在用戶列表界面新增或刪除用戶、啟用或禁用用戶、編輯用戶信息并給不同用戶分配不同的角色；角色列表頁面能添加不同的角色，并為角色分配相應的菜單和資源；通過編輯菜單列表的數(shù)據(jù)，能改變平臺左側導航欄顯示的內容；資源列表則是賦予各角色能夠打開菜單的權力。如圖7所示，多媒體資產(chǎn)管理Web端除了可以對人員、用戶的權限進行編輯，還可以對教學樓和設備信息進行操作。添加樓宇界面可以為平臺添加學校的各個教學樓和教學樓對應的教室；教學樓列表界面展示所有添加的教學樓信息，管理員也可以在該界面添加或導入新的教學樓；教室列表界面展示已添加的教室，在此界面中，管理員除了可以添加或導入新的教室外，還能查看具體教室中的設備信息，并為該教室添加新的設備；設備列表界面展示所有設備的信息，可以添加或導入新的設備信息，能更新設備狀態(tài)，設備默認狀態(tài)為正常，并且在此界面中也可以查看具體設備的運維日志。

3.2 多媒體資產(chǎn)管理平臺移動端展示

多媒體資產(chǎn)管理平臺移動端是為方便運維人員和后勤保障人員，在具體檢查或維修設備時記錄相關問題的平臺。在移動端，相關人員可以使用本平臺進行資產(chǎn)查詢、故障運維、日常運維、后勤運維和查看運維。打開移動端也需要進行身份認證，如圖8所示，通過身份認證后。

圖9為移動端首頁，其中，資產(chǎn)卡片能向用戶展示不同教室的資產(chǎn)信息，方便用戶了解現(xiàn)場的存在的各個設備信息；故障運維用于記錄現(xiàn)場保障設備的情況，主要記錄設備出現(xiàn)的問題、是否解決、如何解決等信息；當保障人員每隔一段時間進行教室巡檢后，可以將巡檢的結果記錄在日常運維的表單中；后勤運維主要是記錄教室物品丟失的信息，物業(yè)人員每日檢查教室后，可以將教室內缺失的物品登記在該菜單下。當人員身份不是管理員時，在查看運維卡片中，只能看到本人登記的運維信息，用于檢查是否存在還未解決的事件，能及時處理遺留問題。

如圖10所示，管理人員在查看運維卡片中能看到所有人員的運維記錄，運維記錄是按照提交時間的順序進行排序，用戶可以通過時間段、運維類型和運維狀態(tài)進行記錄的篩選。通過分析這些數(shù)據(jù)，管理人員能判斷出現(xiàn)問題概率最高的教室、設備等，也能整理出一些通用的解決方法。后續(xù)，管理人員可以重點關注故障率高的教室和設備，以便降低教室出現(xiàn)故障的次數(shù)，對于常見的解決方法可以整理到知識庫中，用于后續(xù)解決類似問題，提供相應的思路。

4 結 論

隨著智能化、數(shù)字化等一些現(xiàn)代信息技術的應用，多媒體智慧教室應運誕生，智慧教室使用更多的智能化設備供教學使用。但在該過程中，教室內的設備會因老化、使用不當或者其他的原因導致教學活動無法順利進行，如未能及時采取有效措施對智慧教室進行管理，會對教師和學生的學習帶來很大的不便；若處理完成后沒有對處理結果記錄，則會發(fā)生資產(chǎn)變更不明確或處理方法同步不及時等問題。本文設計了多媒體管理系統(tǒng)，通過對智慧教室中的設備進行管理，故障運維信息的填寫等，讓管理者更加明確智慧教室現(xiàn)存的問題，也能對問題的處理方法總結成知識庫。后續(xù)通過現(xiàn)場記錄的這些數(shù)據(jù)，可以分析出哪些教室、哪個時間段、哪些設備出現(xiàn)的問題的頻率較高，根據(jù)這些數(shù)據(jù)可以歸類出智慧教室內發(fā)生故障的原因，并且重點關注出現(xiàn)問題較多的教室和設備，可以有效降低教室故障率，精細化管理智慧教室。

參考文獻：

[1] 聶風華，鐘曉流，宋述強.智慧教室：概念特征、系統(tǒng)模型與建設案例 [J].現(xiàn)代教育技術，2013，23（7）：5-8.

[2] 翦象慧，肖智清，龔全安，等.基于物聯(lián)網(wǎng)技術和智慧課堂的智慧教室系統(tǒng)研究與設計 [J].物流工程與管理，2018，40（12）：170-172.

[3] 韓黎晶，袁凌云.智慧教室多媒體集成管理信息系統(tǒng)的設計與實現(xiàn) [J].電腦與信息技術，2018，26（5）：43-46.

[4] 戴偉，馬明棟，王得玉.基于Nginx的負載均衡技術研究與優(yōu)化 [J].計算機技術與發(fā)展，2019，29（3）：77-80.

[5] 朱二華.基于Vue.js的Web前端應用研究 [J].科技與創(chuàng)新，2017（20）：119-121.

[6] 沈佳棋，倪珊，王杰，等.基于Vue+SpringBoot的分類學科競賽管理系統(tǒng)設計 [J].無線互聯(lián)科技，2020，17（17）：74-77.

[7] 陳思，冷雪.微信小程序開發(fā)方式對比 [J].電子制作，2020（2）：52-53+22.

[8] 張峰.應用SpringBoot改變Web應用開發(fā)模式 [J].科技創(chuàng)新與應用，2017（23）：193-194.

[9] 王永和，張勁松，鄧安明，等.Spring Boot研究和應用 [J].信息通信，2016（10）：91-94.

[10] 胡雯，李燕.MySQL數(shù)據(jù)庫存儲引擎探析 [J].軟件導刊，2012，11（12）：129-131.

作者簡介：李涇渭（1994—），男，漢族，浙江紹興人，初級工程師，碩士研究生，研究方向：高校智慧教室建設及維護。