一種前后端分離的在線教育平臺設計

摘要：隨著現代信息技術的快速發展，教師利用教育平臺發布課程線上資源，學生通過各類網絡終端進行在線學習、考試已成為一種趨勢。為提供一個高效、便捷的在線學習環境，滿足學生多元化的學習需求，文章基于SpringBoot和Vue技術設計了一個集課程學習與在線考試功能于一體的在線教育平臺。平臺前端采用Vue.js架構，后端采用SpringBoot服務架構，數據庫采用MySQL。平臺運行結果表明，用戶可以在平臺中完成課程學習和在線考試，系統運行穩定，用戶體驗佳，實用性較強。平臺的實現為其他在線教育平臺開發提供新思路。

關鍵詞：在線教育；在線考試；Vue；SpringBoot

中圖分類號：TP273.4" 文獻標志碼：A

0 引言

在數字化浪潮的推動下，眾多教育培訓機構與學校紛紛將課程內容與學習資料轉移到線上，實現教育資源的數字化、網絡化。由此，在線教育平臺如雨后春筍般蓬勃發展，已深度嵌入現代教育體系。在線教育平臺的服務質量直接影響著教師的技能傳授與學生的知識獲取。不斷優化在線教育平臺功能，開發一個穩定、高效、便捷的優質在線教育平臺是推動在線教育蓬勃發展的重要一環。

目前，已有眾多開放教育學習資源平臺面向社會大眾，提供了海量且豐富的線上課程資源，為學習者提供了隨時隨地的學習機會。然而，這些在線教育平臺在學習支持服務方面仍存在諸多不足。例如，網絡資源建設尚不完善，缺乏深度的人際情感交互服務，個性化指導不足以及督導體系亟待完善等問題［1］。這些問題不僅影響了學習者的學習體驗，還制約了在線教育平臺的持續健康發展。

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

1 平臺設計

該平臺主要包括學生和教師2類用戶，學生可以通過平臺瀏覽課程、參加在線考試，并查看學習進度和成績；教師可以在平臺上創建課程、設置考試題目和答案以及查看學生的學習情況。平臺設計的功能包括用戶管理、課程管理、考試管理等。用戶管理功能包括用戶的注冊、登錄和個人信息管理；課程管理功能包括課程的發布、編輯和刪除；考試管理功能包括考試的創建、參加和批改、成績的查詢和統計分析。平臺模塊設計如圖1所示。

平臺架構是一個多層次、模塊化的設計方案，旨在提供一個高效、穩定和可擴展的技術平臺。平臺架構如圖2所示。該架構采用了前、后端分離的模式，" 包括用戶層、前端層、后端層、網關層和持久層。這5層架構確保了前端與后端之間的解耦，同時使得開發和維護更為簡單和高效。

1.1 前端層

前端層主要負責用戶界面的展示和交互。在本架構中，項目采用了Vue.js作為主要的前端框架。這是因為Vue.js技術提供了豐富的組件化開發功能，可以快速地構建復雜的用戶界面。同時，Vue.js技術支持響應式數據綁定，使得數據的更新和視圖的更新同步進行，大幅提高了開發效率。

1.2 后端層

后端層是整個平臺的核心，負責處理業務邏輯和數據存儲。在本架構中，項目使用了SpringBoot作為主要的后端框架。SpringBoot集成了許多常用的開源庫和工具，如MyBatis、JPA等，可以快速地搭建出一個高性能的后端服務。此外，SpringBoot還提供了強大的依賴管理功能，可以輕松地引入或移除所需的庫和工具。

1.3 數據存儲

為了確保數據的安全性和穩定性，項目選擇MySQL作為主數據庫，用于存儲用戶信息、訂單信息等關鍵數據。同時，項目還使用了Redis作為緩存數據庫，以提高數據的讀取速度。Nginx則被用作反向代理服務器，可將請求進行有效分流，減輕服務器的壓力。

1.4 安全性

為了確保平臺的安全性，項目采用了HTTPS協議來加密數據，防止數據在傳輸過程中被竊取。同時，項目還使用了JWT（JSON Web Token）技術來實現用戶的身份驗證和授權，確保只有經過認證的用戶才能訪問受保護的資源。

在數據庫設計中，項目采用了MySQL數據庫［9］進行數據存儲。在數據庫中，一對一關系可以用來連接用戶表和用戶詳細信息表，每位用戶都有唯一的詳細信息記錄；一對多關系適用于課程表和章節表，每項課程可以包含多個章節；多對多關系則可以用于學生表和課程表，學生可以注冊多個課程，而一個課程也可以被多位學生注冊。

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

2 平臺實現

2.1 用戶中心

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

2.1.1 我的收藏

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

2.1.2 考試記錄

用戶可以在該模塊中查看自己的考試歷史記錄，包括已完成的考試、未完成的考試以及考試成績等信息。這有助于用戶跟蹤自己的學習進度和成績變化，及時調整學習計劃和方法。

2.1.3 賬號安全

為了保護用戶的賬號安全，平臺提供了密碼修改、綁定手機、綁定郵箱等功能。用戶可以定期更新密碼，增強賬號的安全性。同時，用戶通過綁定手機和郵箱，即使忘記密碼也可以通過手機驗證碼或郵箱鏈接快速找回。

2.2 課程中心

平臺課程中心是在線教育平臺的核心功能之一，主要為學生提供豐富的課程內容，方便學生進行在線學習，并為教師提供便捷的課程管理工具。

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

2.3 考試中心

考試中心模塊也是在線教育平臺的核心功能之一，是學生學習的檢驗與評估工具。與傳統的筆試考試方式相比，在線考試可以更全面、客觀地評估學生對課程內容的學習情況和掌握情況［10］。傳統的筆試考試受限于時間和地點，學生須要到指定的考場參加考試，而在線考試則允許學生在任何時間、任何地點進行考試，極大地提高了考試的靈活性和便利性。在線考試還可以實時對答卷進行批改，并及時給予學生成績和評價，幫助學生及時了解自己的學習狀況，調整自己的學習計劃。對于學生而言，考試中心模塊提供了一個重要的學習評估機制。通過參加在線考試，學生可以及時了解自己的學習水平和學習成果，發現自己的不足之處，進而調整學習方法和學習計劃，提高學習效果。考試中心還可以激發學生的學習興趣和學習動力，促進學生的自主學習和自我提高。對于教師而言，考試中心是一個方便、高效的考核工具。教師可以根據課程要求，靈活設置考試內容和考試形式，還可以通過了解學生對課程的掌握情況，為學生提供個性化的學習指導。同時，考試中心可以幫助教師評估教學效果，發現教學中存在的問題，不斷改進教學方法和教學內容，提高教學質量和教學效果。

3 平臺測試

為了完成平臺部署，技術人員在阿里云上注冊賬號并購買一個云服務器。云服務器選用雙核4G、10 MB帶寬、系統環境為CentOS 7.3的操作系統。云服務器安裝了Xshell、JDK、MySQL等平臺系統運行所依賴的環境。技術人員將SpringBoot項目打包，并通過Xshell上傳到Linux云服務上。同時，在阿里云上購買一個域名并進行綁定指向阿里云服務器IP地址，通過域名即可訪問本項目。平臺在阿里云服務器的部署流程如圖3所示。

系統測試包括性能測試和功能測試。性能測試用于評估系統、應用程序或其他軟件組件在各種負載條件下的性能和響應能力，旨在確定系統的性能瓶頸、資源利用率和響應時間等指標，以確保系統能夠滿足用戶需求和預期的性能要求。測試人員進行了性能壓力測試，采用了并發量為100、總測試次數為100的測試方案，向服務器發送請求，即相當于100個用戶訪問系統。經測試，系統的登錄接口、在線課程學習接口、在線考試接口均可以進行平穩響應，響應平均時間不超過3 s，但在并發量加大時，平臺響應速度下降明顯，高達10 s以上，甚至出現拒絕服務。

在功能測試方面，系統完成了用戶登錄、注冊、課程增刪改查、題庫增刪改查、試卷增刪改查、成績增刪改查和課程討論等功能。功能測試用例如表1所示。本項目將所有功能進行一一測試，實現結構與前臺對接，通過postman提前進行數據測試，驗證功能接口的實用性，然后通過本機IP，測試在其他電腦上是否可以正常鏈接。在這個過程中，本文發現了同源策略問題，并將其改正；然后通過本機IP，在其他電腦調用此功能；最后與前端進行對接，寫入真實數據，渲染數據到頁面上，此項目測試完畢。

4 結語

本文給出的前、后端分離的在線教育平臺設計主要完成了在線課程學習和在線考試2大功能。這2個基本功能共同構成了一個完整的在線學習平臺，為傳統教育模式提供了線上學習環節的補充，提高了教育資源的可達性和教學效率。平臺采用了前后端分離的開發模式。前端基于Vue3技術，后端采用SpringBoot框架，數據庫使用MySQL。目前，平臺只能在PC端使用。未來，隨著技術的進步和教育理念的更新，系統還會推出移動端功能，以滿足更廣泛的用戶個性化學習需求，并為廣大學習者提供更加個性化和高效的學習體驗。

參考文獻

［1］劉娜娜.數據支持下在線教育平臺學習支持服務策略研究［J］.電腦知識與技術，2024（11）：101-103.

［2］江家龍.基于Vue.js框架的餐飲Web APP設計與實現［J］.科技創新與應用，2023（36）：128-132，136.

［3］武鈺.人機混合平臺中模型可解釋性對信任的影響［D］.北京：北京郵電大學，2023.

［4］趙志文，郝東來，李民靖.基于SSM框架的無人機監管平臺［J］.現代計算機，2023（12）：84-88.

［5］徐超，李振葉，吳慧強.基于前后端分離架構構建醫療元數據管理信息平臺［J］.辦公自動化，2023（22）：56-58，18.

［6］劉泓杰.基于Vue.js的視頻營銷創作平臺的研究與設計［D］.北京：北京郵電大學，2023.

［7］婁增輝.基于區塊鏈的職業院校可信數據平臺研究［D］.南京：南京信息工程大學，2023.

［8］孟莉莉，吳旦鈞，藍建平，等.微服務架構在分布式水質監測平臺中的應用［J］.電子技術與軟件工程，2022（22）：224-228.

［9］李論，唐瑞明，鄒俊平，等.“互聯網+”背景下高職院校在線心理咨詢管理平臺的設計與實現［J］.科技與創新，2024（1）：81-83.

［10］黃培.數字化賦能視域下高校教師教學勝任力研究［J］.辦公自動化，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

基金項目：安徽省自然科學研究重點項目；項目編號：KJ2021A1483。

作者簡介：汪強（1978— ），男，助教，碩士；研究方向：計算機及應用技術。