一種前后端分離的在線教育平臺(tái)設(shè)計(jì)

摘要：隨著現(xiàn)代信息技術(shù)的快速發(fā)展，教師利用教育平臺(tái)發(fā)布課程線上資源，學(xué)生通過各類網(wǎng)絡(luò)終端進(jìn)行在線學(xué)習(xí)、考試已成為一種趨勢(shì)。為提供一個(gè)高效、便捷的在線學(xué)習(xí)環(huán)境，滿足學(xué)生多元化的學(xué)習(xí)需求，文章基于SpringBoot和Vue技術(shù)設(shè)計(jì)了一個(gè)集課程學(xué)習(xí)與在線考試功能于一體的在線教育平臺(tái)。平臺(tái)前端采用Vue.js架構(gòu)，后端采用SpringBoot服務(wù)架構(gòu)，數(shù)據(jù)庫采用MySQL。平臺(tái)運(yùn)行結(jié)果表明，用戶可以在平臺(tái)中完成課程學(xué)習(xí)和在線考試，系統(tǒng)運(yùn)行穩(wěn)定，用戶體驗(yàn)佳，實(shí)用性較強(qiáng)。平臺(tái)的實(shí)現(xiàn)為其他在線教育平臺(tái)開發(fā)提供新思路。

關(guān)鍵詞：在線教育；在線考試；Vue；SpringBoot

中圖分類號(hào)：TP273.4" 文獻(xiàn)標(biāo)志碼：A

0 引言

在數(shù)字化浪潮的推動(dòng)下，眾多教育培訓(xùn)機(jī)構(gòu)與學(xué)校紛紛將課程內(nèi)容與學(xué)習(xí)資料轉(zhuǎn)移到線上，實(shí)現(xiàn)教育資源的數(shù)字化、網(wǎng)絡(luò)化。由此，在線教育平臺(tái)如雨后春筍般蓬勃發(fā)展，已深度嵌入現(xiàn)代教育體系。在線教育平臺(tái)的服務(wù)質(zhì)量直接影響著教師的技能傳授與學(xué)生的知識(shí)獲取。不斷優(yōu)化在線教育平臺(tái)功能，開發(fā)一個(gè)穩(wěn)定、高效、便捷的優(yōu)質(zhì)在線教育平臺(tái)是推動(dòng)在線教育蓬勃發(fā)展的重要一環(huán)。

目前，已有眾多開放教育學(xué)習(xí)資源平臺(tái)面向社會(huì)大眾，提供了海量且豐富的線上課程資源，為學(xué)習(xí)者提供了隨時(shí)隨地的學(xué)習(xí)機(jī)會(huì)。然而，這些在線教育平臺(tái)在學(xué)習(xí)支持服務(wù)方面仍存在諸多不足。例如，網(wǎng)絡(luò)資源建設(shè)尚不完善，缺乏深度的人際情感交互服務(wù)，個(gè)性化指導(dǎo)不足以及督導(dǎo)體系亟待完善等問題［1］。這些問題不僅影響了學(xué)習(xí)者的學(xué)習(xí)體驗(yàn)，還制約了在線教育平臺(tái)的持續(xù)健康發(fā)展。

本文基于SpringBoot、Vue等技術(shù)設(shè)計(jì)了在線教育平臺(tái)。平臺(tái)包括用戶管理、課程管理、資源管理和在線考試管理等，為用戶提供一個(gè)無縫、高效的全方位學(xué)習(xí)支持平臺(tái)。平臺(tái)采用前、后端分離的開發(fā)模式，前端、后端之間通過應(yīng)用程序編程接口（Application Programming Interface，API）來進(jìn)行交互［2］。平臺(tái)前端采用Vue 3框架，其響應(yīng)式數(shù)據(jù)的綁定和模塊化的構(gòu)建極大地簡(jiǎn)化了交互式界面的創(chuàng)建過程［3］。平臺(tái)選用了Element Plus和Ant Design Vue這2個(gè)用戶界面（User Interface，UI）組件庫。其中，Element Plus是“餓了么”大前端團(tuán)隊(duì)開源的產(chǎn)品。是團(tuán)隊(duì)專門為Vue 3打造的一套組件庫，含有一系列精美的UI元素，如按鈕、輸入框和表格，使得界面設(shè)計(jì)既能快速反應(yīng)又富有吸引力［4］。Ant Design是螞蟻集團(tuán)為React打造的企業(yè)級(jí)開源產(chǎn)品，作為Ant Design的Vue版本，帶來了一套風(fēng)格統(tǒng)一且功能豐富的UI組件，支持廣泛的國(guó)際化和主題定制選項(xiàng)，滿足了多樣化的項(xiàng)目需求［5］。此外，為了加速前端開發(fā)并優(yōu)化開發(fā)體驗(yàn)，項(xiàng)目選擇了Vite作為打包構(gòu)建工具。Vite以其快速的啟動(dòng)時(shí)間和熱重載功能而聞名，顯著提升了開發(fā)的效率［6］。平臺(tái)后端采用了SpringBoot作為主要開發(fā)框架。SpringBoot是一種用于快速開發(fā)Spring應(yīng)用程序的框架，簡(jiǎn)化了Spring應(yīng)用程序的搭建和部署過程，提高了開發(fā)效率［7］。在項(xiàng)目開發(fā)中，選擇合適的技術(shù)至關(guān)重要，不僅要合適，還要盡可能地方便使用。為了簡(jiǎn)化數(shù)據(jù)庫操作和提高開發(fā)效率，項(xiàng)目選擇了MyBatis Plus作為項(xiàng)目的持久層框架。MyBatis Plus是MyBatis的增強(qiáng)工具包，不僅繼承了MyBatis的核心優(yōu)勢(shì)，還通過內(nèi)置的代碼生成器和通用CRUD接口，極大地減少了重復(fù)代碼的編寫，使得數(shù)據(jù)庫操作變得更加直觀和高效［8］。

1 平臺(tái)設(shè)計(jì)

該平臺(tái)主要包括學(xué)生和教師2類用戶，學(xué)生可以通過平臺(tái)瀏覽課程、參加在線考試，并查看學(xué)習(xí)進(jìn)度和成績(jī)；教師可以在平臺(tái)上創(chuàng)建課程、設(shè)置考試題目和答案以及查看學(xué)生的學(xué)習(xí)情況。平臺(tái)設(shè)計(jì)的功能包括用戶管理、課程管理、考試管理等。用戶管理功能包括用戶的注冊(cè)、登錄和個(gè)人信息管理；課程管理功能包括課程的發(fā)布、編輯和刪除；考試管理功能包括考試的創(chuàng)建、參加和批改、成績(jī)的查詢和統(tǒng)計(jì)分析。平臺(tái)模塊設(shè)計(jì)如圖1所示。

平臺(tái)架構(gòu)是一個(gè)多層次、模塊化的設(shè)計(jì)方案，旨在提供一個(gè)高效、穩(wěn)定和可擴(kuò)展的技術(shù)平臺(tái)。平臺(tái)架構(gòu)如圖2所示。該架構(gòu)采用了前、后端分離的模式，" 包括用戶層、前端層、后端層、網(wǎng)關(guān)層和持久層。這5層架構(gòu)確保了前端與后端之間的解耦，同時(shí)使得開發(fā)和維護(hù)更為簡(jiǎn)單和高效。

1.1 前端層

前端層主要負(fù)責(zé)用戶界面的展示和交互。在本架構(gòu)中，項(xiàng)目采用了Vue.js作為主要的前端框架。這是因?yàn)閂ue.js技術(shù)提供了豐富的組件化開發(fā)功能，可以快速地構(gòu)建復(fù)雜的用戶界面。同時(shí)，Vue.js技術(shù)支持響應(yīng)式數(shù)據(jù)綁定，使得數(shù)據(jù)的更新和視圖的更新同步進(jìn)行，大幅提高了開發(fā)效率。

1.2 后端層

后端層是整個(gè)平臺(tái)的核心，負(fù)責(zé)處理業(yè)務(wù)邏輯和數(shù)據(jù)存儲(chǔ)。在本架構(gòu)中，項(xiàng)目使用了SpringBoot作為主要的后端框架。SpringBoot集成了許多常用的開源庫和工具，如MyBatis、JPA等，可以快速地搭建出一個(gè)高性能的后端服務(wù)。此外，SpringBoot還提供了強(qiáng)大的依賴管理功能，可以輕松地引入或移除所需的庫和工具。

1.3 數(shù)據(jù)存儲(chǔ)

為了確保數(shù)據(jù)的安全性和穩(wěn)定性，項(xiàng)目選擇MySQL作為主數(shù)據(jù)庫，用于存儲(chǔ)用戶信息、訂單信息等關(guān)鍵數(shù)據(jù)。同時(shí)，項(xiàng)目還使用了Redis作為緩存數(shù)據(jù)庫，以提高數(shù)據(jù)的讀取速度。Nginx則被用作反向代理服務(wù)器，可將請(qǐng)求進(jìn)行有效分流，減輕服務(wù)器的壓力。

1.4 安全性

為了確保平臺(tái)的安全性，項(xiàng)目采用了HTTPS協(xié)議來加密數(shù)據(jù)，防止數(shù)據(jù)在傳輸過程中被竊取。同時(shí)，項(xiàng)目還使用了JWT（JSON Web Token）技術(shù)來實(shí)現(xiàn)用戶的身份驗(yàn)證和授權(quán)，確保只有經(jīng)過認(rèn)證的用戶才能訪問受保護(hù)的資源。

在數(shù)據(jù)庫設(shè)計(jì)中，項(xiàng)目采用了MySQL數(shù)據(jù)庫［9］進(jìn)行數(shù)據(jù)存儲(chǔ)。在數(shù)據(jù)庫中，一對(duì)一關(guān)系可以用來連接用戶表和用戶詳細(xì)信息表，每位用戶都有唯一的詳細(xì)信息記錄；一對(duì)多關(guān)系適用于課程表和章節(jié)表，每項(xiàng)課程可以包含多個(gè)章節(jié)；多對(duì)多關(guān)系則可以用于學(xué)生表和課程表，學(xué)生可以注冊(cè)多個(gè)課程，而一個(gè)課程也可以被多位學(xué)生注冊(cè)。

課程表（course）用于存放平臺(tái)中的課程數(shù)據(jù)，展示課程的基本信息；課程章節(jié)表（course_chapter）用于存放課程目錄中章節(jié)的基本信息；課程小節(jié)表（course_video）用于存放在課程章節(jié)中，存儲(chǔ)每小節(jié)的基本信息；題目表（question）用于存放考試中心模塊中題目的基本信息數(shù)據(jù)表；題庫表（question_bank）用于存放題目，將題目按照不同題庫進(jìn)行分類，每一個(gè)題庫下面可以包含多個(gè)題目；考試試卷表（exam_paper）用于存放試卷基本信息；考試題目記錄表（exam_question_records）用于記錄試卷中的所有題目，判斷用戶是否已答題以及是否回答正確等；考試題目答案記錄表（exam_answer_records）用于存放用戶在考試答題過程中提交的所有題目答案信息；考試記錄表（exam_records）用于存放用戶考試的開考時(shí)間、答題時(shí)間、得分等詳細(xì)信息，用戶的每一次考試都會(huì)被記錄到該表中。

2 平臺(tái)實(shí)現(xiàn)

2.1 用戶中心

用戶在進(jìn)入平臺(tái)后，可以看到平臺(tái)的導(dǎo)航欄分為首頁、課程中心、考試中心、登錄/注冊(cè)4大部分，登錄系統(tǒng)可以進(jìn)入用戶中心。在個(gè)人信息模塊中，用戶不僅可以查看和修改基本信息，如姓名、性別、出生日期、聯(lián)系方式，還可以上傳或更換頭像等，同時(shí)也可以查看我的收藏、考試記錄等信息。

2.1.1 我的收藏

用戶可以將自己感興趣的課程添加到收藏夾，方便下次快速查找并學(xué)習(xí)。在我的收藏模塊中，用戶可以看到所有已收藏的課程列表，對(duì)收藏的課程進(jìn)行增加、刪除或重新排序。

2.1.2 考試記錄

用戶可以在該模塊中查看自己的考試歷史記錄，包括已完成的考試、未完成的考試以及考試成績(jī)等信息。這有助于用戶跟蹤自己的學(xué)習(xí)進(jìn)度和成績(jī)變化，及時(shí)調(diào)整學(xué)習(xí)計(jì)劃和方法。

2.1.3 賬號(hào)安全

為了保護(hù)用戶的賬號(hào)安全，平臺(tái)提供了密碼修改、綁定手機(jī)、綁定郵箱等功能。用戶可以定期更新密碼，增強(qiáng)賬號(hào)的安全性。同時(shí)，用戶通過綁定手機(jī)和郵箱，即使忘記密碼也可以通過手機(jī)驗(yàn)證碼或郵箱鏈接快速找回。

2.2 課程中心

平臺(tái)課程中心是在線教育平臺(tái)的核心功能之一，主要為學(xué)生提供豐富的課程內(nèi)容，方便學(xué)生進(jìn)行在線學(xué)習(xí)，并為教師提供便捷的課程管理工具。

課程中心由以下2個(gè)部分組成：（1）課程瀏覽。學(xué)生可以瀏覽平臺(tái)上發(fā)布的各種課程，包括課程名稱、簡(jiǎn)介、授課教師等詳細(xì)信息；（2）在線觀看。學(xué)生可以在線觀看和收藏已發(fā)布課程的視頻內(nèi)容，隨時(shí)隨地進(jìn)行學(xué)習(xí)。這種學(xué)習(xí)方式與傳統(tǒng)的學(xué)習(xí)方式形成了鮮明的對(duì)比。傳統(tǒng)的學(xué)習(xí)方式通常須要學(xué)生到特定的教室或培訓(xùn)機(jī)構(gòu)進(jìn)行課堂學(xué)習(xí)，受限于時(shí)間和空間的限制。然而，通過在線學(xué)習(xí)，學(xué)生在任何地方、任何時(shí)間都能夠方便地獲取到高質(zhì)量的教育資源，不再受時(shí)間和空間的限制。學(xué)生可以根據(jù)自己的學(xué)習(xí)節(jié)奏和習(xí)慣進(jìn)行學(xué)習(xí)，極大地提高了學(xué)習(xí)的靈活性和便利性。同時(shí)，學(xué)生可以根據(jù)自己的學(xué)習(xí)進(jìn)度和理解程度自主選擇學(xué)習(xí)內(nèi)容和學(xué)習(xí)方式，更加貼近個(gè)性化的學(xué)習(xí)需求。當(dāng)用戶進(jìn)入課程中心之后，頁面會(huì)分頁展示不同種類的課程，用戶可以進(jìn)行篩選或搜索，選擇想要觀看的課程，進(jìn)入該課程的詳情頁面進(jìn)行在線學(xué)習(xí)。

2.3 考試中心

考試中心模塊也是在線教育平臺(tái)的核心功能之一，是學(xué)生學(xué)習(xí)的檢驗(yàn)與評(píng)估工具。與傳統(tǒng)的筆試考試方式相比，在線考試可以更全面、客觀地評(píng)估學(xué)生對(duì)課程內(nèi)容的學(xué)習(xí)情況和掌握情況［10］。傳統(tǒng)的筆試考試受限于時(shí)間和地點(diǎn)，學(xué)生須要到指定的考場(chǎng)參加考試，而在線考試則允許學(xué)生在任何時(shí)間、任何地點(diǎn)進(jìn)行考試，極大地提高了考試的靈活性和便利性。在線考試還可以實(shí)時(shí)對(duì)答卷進(jìn)行批改，并及時(shí)給予學(xué)生成績(jī)和評(píng)價(jià)，幫助學(xué)生及時(shí)了解自己的學(xué)習(xí)狀況，調(diào)整自己的學(xué)習(xí)計(jì)劃。對(duì)于學(xué)生而言，考試中心模塊提供了一個(gè)重要的學(xué)習(xí)評(píng)估機(jī)制。通過參加在線考試，學(xué)生可以及時(shí)了解自己的學(xué)習(xí)水平和學(xué)習(xí)成果，發(fā)現(xiàn)自己的不足之處，進(jìn)而調(diào)整學(xué)習(xí)方法和學(xué)習(xí)計(jì)劃，提高學(xué)習(xí)效果?？荚囍行倪€可以激發(fā)學(xué)生的學(xué)習(xí)興趣和學(xué)習(xí)動(dòng)力，促進(jìn)學(xué)生的自主學(xué)習(xí)和自我提高。對(duì)于教師而言，考試中心是一個(gè)方便、高效的考核工具。教師可以根據(jù)課程要求，靈活設(shè)置考試內(nèi)容和考試形式，還可以通過了解學(xué)生對(duì)課程的掌握情況，為學(xué)生提供個(gè)性化的學(xué)習(xí)指導(dǎo)。同時(shí)，考試中心可以幫助教師評(píng)估教學(xué)效果，發(fā)現(xiàn)教學(xué)中存在的問題，不斷改進(jìn)教學(xué)方法和教學(xué)內(nèi)容，提高教學(xué)質(zhì)量和教學(xué)效果。

3 平臺(tái)測(cè)試

為了完成平臺(tái)部署，技術(shù)人員在阿里云上注冊(cè)賬號(hào)并購(gòu)買一個(gè)云服務(wù)器。云服務(wù)器選用雙核4G、10 MB帶寬、系統(tǒng)環(huán)境為CentOS 7.3的操作系統(tǒng)。云服務(wù)器安裝了Xshell、JDK、MySQL等平臺(tái)系統(tǒng)運(yùn)行所依賴的環(huán)境。技術(shù)人員將SpringBoot項(xiàng)目打包，并通過Xshell上傳到Linux云服務(wù)上。同時(shí)，在阿里云上購(gòu)買一個(gè)域名并進(jìn)行綁定指向阿里云服務(wù)器IP地址，通過域名即可訪問本項(xiàng)目。平臺(tái)在阿里云服務(wù)器的部署流程如圖3所示。

系統(tǒng)測(cè)試包括性能測(cè)試和功能測(cè)試。性能測(cè)試用于評(píng)估系統(tǒng)、應(yīng)用程序或其他軟件組件在各種負(fù)載條件下的性能和響應(yīng)能力，旨在確定系統(tǒng)的性能瓶頸、資源利用率和響應(yīng)時(shí)間等指標(biāo)，以確保系統(tǒng)能夠滿足用戶需求和預(yù)期的性能要求。測(cè)試人員進(jìn)行了性能壓力測(cè)試，采用了并發(fā)量為100、總測(cè)試次數(shù)為100的測(cè)試方案，向服務(wù)器發(fā)送請(qǐng)求，即相當(dāng)于100個(gè)用戶訪問系統(tǒng)。經(jīng)測(cè)試，系統(tǒng)的登錄接口、在線課程學(xué)習(xí)接口、在線考試接口均可以進(jìn)行平穩(wěn)響應(yīng)，響應(yīng)平均時(shí)間不超過3 s，但在并發(fā)量加大時(shí)，平臺(tái)響應(yīng)速度下降明顯，高達(dá)10 s以上，甚至出現(xiàn)拒絕服務(wù)。

在功能測(cè)試方面，系統(tǒng)完成了用戶登錄、注冊(cè)、課程增刪改查、題庫增刪改查、試卷增刪改查、成績(jī)?cè)鰟h改查和課程討論等功能。功能測(cè)試用例如表1所示。本項(xiàng)目將所有功能進(jìn)行一一測(cè)試，實(shí)現(xiàn)結(jié)構(gòu)與前臺(tái)對(duì)接，通過postman提前進(jìn)行數(shù)據(jù)測(cè)試，驗(yàn)證功能接口的實(shí)用性，然后通過本機(jī)IP，測(cè)試在其他電腦上是否可以正常鏈接。在這個(gè)過程中，本文發(fā)現(xiàn)了同源策略問題，并將其改正；然后通過本機(jī)IP，在其他電腦調(diào)用此功能；最后與前端進(jìn)行對(duì)接，寫入真實(shí)數(shù)據(jù)，渲染數(shù)據(jù)到頁面上，此項(xiàng)目測(cè)試完畢。

4 結(jié)語

本文給出的前、后端分離的在線教育平臺(tái)設(shè)計(jì)主要完成了在線課程學(xué)習(xí)和在線考試2大功能。這2個(gè)基本功能共同構(gòu)成了一個(gè)完整的在線學(xué)習(xí)平臺(tái)，為傳統(tǒng)教育模式提供了線上學(xué)習(xí)環(huán)節(jié)的補(bǔ)充，提高了教育資源的可達(dá)性和教學(xué)效率。平臺(tái)采用了前后端分離的開發(fā)模式。前端基于Vue3技術(shù)，后端采用SpringBoot框架，數(shù)據(jù)庫使用MySQL。目前，平臺(tái)只能在PC端使用。未來，隨著技術(shù)的進(jìn)步和教育理念的更新，系統(tǒng)還會(huì)推出移動(dòng)端功能，以滿足更廣泛的用戶個(gè)性化學(xué)習(xí)需求，并為廣大學(xué)習(xí)者提供更加個(gè)性化和高效的學(xué)習(xí)體驗(yàn)。

參考文獻(xiàn)

［1］劉娜娜.數(shù)據(jù)支持下在線教育平臺(tái)學(xué)習(xí)支持服務(wù)策略研究［J］.電腦知識(shí)與技術(shù)，2024（11）：101-103.

［2］江家龍.基于Vue.js框架的餐飲Web APP設(shè)計(jì)與實(shí)現(xiàn)［J］.科技創(chuàng)新與應(yīng)用，2023（36）：128-132，136.

［3］武鈺.人機(jī)混合平臺(tái)中模型可解釋性對(duì)信任的影響［D］.北京：北京郵電大學(xué)，2023.

［4］趙志文，郝東來，李民靖.基于SSM框架的無人機(jī)監(jiān)管平臺(tái)［J］.現(xiàn)代計(jì)算機(jī)，2023（12）：84-88.

［5］徐超，李振葉，吳慧強(qiáng).基于前后端分離架構(gòu)構(gòu)建醫(yī)療元數(shù)據(jù)管理信息平臺(tái)［J］.辦公自動(dòng)化，2023（22）：56-58，18.

［6］劉泓杰.基于Vue.js的視頻營(yíng)銷創(chuàng)作平臺(tái)的研究與設(shè)計(jì)［D］.北京：北京郵電大學(xué)，2023.

［7］婁增輝.基于區(qū)塊鏈的職業(yè)院?？尚艛?shù)據(jù)平臺(tái)研究［D］.南京：南京信息工程大學(xué)，2023.

［8］孟莉莉，吳旦鈞，藍(lán)建平，等.微服務(wù)架構(gòu)在分布式水質(zhì)監(jiān)測(cè)平臺(tái)中的應(yīng)用［J］.電子技術(shù)與軟件工程，2022（22）：224-228.

［9］李論，唐瑞明，鄒俊平，等.“互聯(lián)網(wǎng)+”背景下高職院校在線心理咨詢管理平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)［J］.科技與創(chuàng)新，2024（1）：81-83.

［10］黃培.數(shù)字化賦能視域下高校教師教學(xué)勝任力研究［J］.辦公自動(dòng)化，2023（18）：28-31.

（編輯 王雪芬）

Design of online education platform with front-end and back-end separation

WANG "Qiang

（Department of Information and Artificial Intelligence， Anhui Business College， Wuhu 241000， China）

Abstract： With the rapid development of modern information technology， it has become a trend for teachers to use educational platforms to publish online course resources， and for students to engage in online learning and exams through various network interruptions. To provide an efficient and convenient online learning environment to meet students’ diverse learning needs， based on SpringBoot and Vue technology， this paper designs an online education platform that integrates course learning and online examination functions. The front-end of the platform adopts Vue.js architecture， the back-end adopts SpringBoot service architecture， and the database uses MySQL. The platform operation results show that users can complete course learning and online exams on the platform， with a good user experience， stable system operation， and strong practicality. The implementation of the platform provides some new ideas for the development of other online education platforms.

Key words： online education; online examination; Vue; SpringBoot

基金項(xiàng)目：安徽省自然科學(xué)研究重點(diǎn)項(xiàng)目；項(xiàng)目編號(hào)：KJ2021A1483。

作者簡(jiǎn)介：汪強(qiáng)（1978— ），男，助教，碩士；研究方向：計(jì)算機(jī)及應(yīng)用技術(shù)。