基于Java（SpringBoot）+Vue+MySQL 實現（Web）的網絡課程平臺

基于 SpringBoot 的網絡課程平臺

1 緒論

1.1 引言

本科題研究并實現了一個面向網絡學習的平臺，為需要學習的人提供了一個學習的平臺。任何人都課在本平臺進行注冊登錄，學習觀看視頻。

本平臺是一個關于網絡課程學習平臺，學員科自主選擇視頻學習，可以根據視頻的內容，視頻講師，視頻是否需要付費選擇適合自己的課程。實現學員通過網絡課程平臺學習的目的。

1.2 網絡課程平臺

網絡課程平臺是用計算機網絡將教學內容傳遞到有需求的人手里，使用學習者從知識的被動接受者轉為了知識的主動構建者。它改變了傳統教師課程授課的線性教學模式，轉而讓學習者突破時間和空間限制的非線性自主學習模式，網絡課程平臺具有以下基本特點：

1、高度仿真的虛擬教室，實時交互與錄制點播相結合；即播即錄，實施培訓開始同步進行錄制、結束后可立即進行點播、方便適應多重培訓場景。Gensee 虛擬教室系統。

2、以培訓內容為中心，便于客戶根據自己的需要進行選擇，并有利于整合優質的課程資源，形成課程資源中心。

3、提供培訓教師與學員之間實時或非實時的、多種方式的互動，最大限度的保證培訓效果。

4、強大的內容管理系統，批量的課程授權，對學員學習次數的控制，時間的監控，學習行為的跟蹤，為管理提供很大的方便。

5、良好的擴展性能，能與公司網站、其它的培訓、教學產品進行無縫銜接；管理者可以設置管理平臺的顏色、字體大小、版面布局。

6、基于 Web 的訪問方式，通過瀏覽器可以直接訪問，無需下載任何客戶端軟件，簡單易用。

1.3 網絡課程平臺的提出

基于對已有的網絡課程平臺分析可知，通過網絡教學是目前最好的做法。而網絡教學必須要建立在平臺之上，為此我的畢業設計選擇了網絡課程平臺的這樣一個課題。平臺主要是管理員通過網絡，管理員將課程內容上傳到平臺。學員在平臺選擇需要的，適合自己的課程進行學習。網絡課程平臺能為教師在網上實施教學提供全面的工具支持，并且能屏蔽復雜的技術實現過程，使得教師能夠集中精力制作教學視頻，學員通過它可以自主的進行學習交流，而不受時間與空間的限制。網絡課程平臺的以互聯網技術和數據庫技術為基礎，它具有以下特點：

（1）以基于 Web 的課程信息為核心，具有實時交互、信息獲取方便等優勢；

（2）其核心技術為數據存儲，數據的檢索、查詢，便于課程資源流通和共享；

1.4 網絡課程平臺的研究狀況

近年來，網絡技術的發展日新月異，通過網絡教學已經成為了一個全球的大趨勢。國內外很多大學會邀請一些信息技術公司為自己的學校建立一個網課平臺，來管理教學，也方便學員們課后更好的復習。一些我們熟悉的網課平臺，例如：MOOC 中國大學員慕課平臺，超新學習通等。

由于網絡中的教學可以實現對信息資源的共享，在網上可以找尋到最優秀的教材和教法，使學習者在網上可以輕松的學到最新的知識，因此是網絡教學必定是改革發展的方向。網絡課程更能為學習者提供一個建構主義的學習環境，充分體現學員的首創精神，學員有更多的機會在不同環境下去運用他們所學的知識,而且學員可以根據反饋來形成對客觀事物的認識和解決實際問題的方案，從根本上提高教學質量。網絡教學的迅速發展及普及，促進了教學設計理論的發展和完善。

目前，網絡教學在國內外受到密切的關注，對網絡課程、網上學習工具和環境的建構進行了深入的研究。從不同的學術會議、刊物等等來看，網絡教學的設計研究主要是關于建構主義學習環境的設計和協作學習的設計等方面。網絡課件的設計依據建構主義學習理論的思想，就是以學習者為中心的設計。網絡教學在很大程度上依賴于學員的自主學習，所以網絡課件的基本功能結構也應按學員自主學習的要求來設計的。

本課題針對近年來國內外網絡教學的發展情況,研究并實現了一個面向網絡學習的課件系統，本系統實現了以“網絡”為中心的設計思想。

1.5 網絡課程平臺的建設目標

在對國內外眾多優秀網絡課程平臺的研究與經驗總結經驗上，擬定本系統平臺的設計目標為：

滿足教師在本平臺上傳視頻。
提供給學員選擇課程的頁面，能進行視頻的觀看，能在課程下對本課程進行評論，交流。
可以統計學員登錄人數，學員注冊人數，學員學習人數，夠買課程人數的數據，并形成圖表展現出來。

1.6 本文結構

本文的章節安排如下：

第一章緒論部分，說明本文的研究背景和設計目標。為接下來的系統后臺的分析和設計基礎做準備。

第二章系統開環境與技術，簡單介紹系統實現過程中用到的技術。如 MyEclipse，Maven,SrpingBoot,Vue,Node,MyBatisPlus 等。

第三章系統分析與設計，對網絡課程平臺中的后臺進行需求分析，根據需求分析設計相應的功能與表結構。

第四章系統實現，給出系統后臺的具有實現，包括實現效果的核心代碼說明。

第五章總結余展望，本文所做的工作進行總結，并針對目前工作中的不足對未來工作的展望。

2 系統開發環境與技術

2.1 系統開發環境

網絡課程平臺的后臺以 IntelliJ IDEA 為開發工具，Maven 工具來管理項目 jar 包。用 Visual Studio Code 實現前端效果。

2.1.1 IntelliJ IDEA 開發工具介紹

IntelliJ IDEA，是 Java 編程語言開發的集成環境。IntelliJ 在業界被公認為最好的 Java 開發工具，尤其在智能代碼助手、代碼自動提示、重構、JavaEE 支持、各類版本工具(git、SVN 等)、JUnit、CVS 整合、代碼分析、創新的 GUI 設計等方面的功能可以說是超常的。IDEA 是 JetBrains 公司的產品，這家公司總部位于捷克共和國的首都布拉格，開發人員以嚴謹著稱的東歐程序員為主。

選擇 IDEA 主要的原因是 IIDEA 有更加智能的協助開發、代碼提示、參數提示、快速完成語句和 Lombok 插件用注釋大大的減少我的代碼量，能夠幫助我更快的編寫代碼。

2.1.2 Maven 工具介紹

Maven 對項目進行模型抽象，充分運用的面向對象的思想，Maven 可以通過一小段描述信息來管理項目的構建，報告和文檔的軟件項目管理工具。Maven 除了以程序構建能力為特色之外，還提供高級項目管理工具。簡單的來說 Maven 是一個項目管理工具。使用 Maven 具有以下好處：

（1）依賴管理：對第三方方 jar 包進行統一管理，通過 Maven 定義 jar 包的坐標，自動從 Maven 倉庫中下載到工程

（2）生命周期：生命周期的一鍵構建，提供了一套對項目生命周期管理的標準,開發人員,測試人員統一使用 maven 進行項目的構建.項目的生命周期管理:編譯,測試,打包,部署,運行。

2.1.3 Visual Studio Code 工具介紹

VSCode 是一種簡化且高效的代碼編輯器，同時支持諸如調試，任務執行和版本管理之類的開發操作。它的目標是提供一種快速的編碼編譯調試工具。VisualStudioCode 支持多種編程語言，集成的終端，您可以在編輯器中運行腳本，編譯軟件，調試腳本，設置斷點以及進行版本管理。

2.2 系統開發技術

網絡課程平臺是基于 SpringBoot+Vue 的模式開發出來的。后端實現用的是 SpringBoot 實現，前端頁面使用的 Vue+ElementUi。操作數據庫用的技術是 MybatisPlus。

2.2.1 SpringBoot 介紹

Spring Boot 并不是用來替代 Spring 的解決方案，而是和 Spring 框架緊密結合用于提升 Spring 開發者體驗的工具。同時它集成了大量常用的第三方庫配置，Spring Boot 應用中這些第三方庫幾乎可以是零配置的開箱即用（out-of-the-box），大部分的 Spring Boot 應用都只需要非常少量的配置代碼（基于 Java 的配置），開發者能夠更加專注于業務邏輯。

2.2.2 Vue 介紹

設 Vue (讀音 /vju/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。Vue 具有輕量級框架，簡單易學雙向數據綁定，組件化，視圖、數據結構分離，虛擬 DOM,運行速度快的特點。

2.2.3 MyBatisPlus 簡介

MyBatis-Plus（簡稱 MP）是一個 MyBatis 的增強工具，在 MyBatis 的基礎上只做增強不做改變，為簡化開發、提高效率而生。具有無侵入，損耗小，強大的 CRUD 操作，支持 Lambda 形式調用，支持多種數據庫，支持主鍵自動生成，支持 XML 熱加載，支持 ActiveRecord 模式，支持自定義全局通用操作，支持關鍵詞自動轉義，內置代碼生成器，內置分頁插件，內置性能分析插件，內置全局攔截插件，內置 SQL 注入剝離器等特性。

2.3 系統數據存儲技術

系統數據存我主要用來 MySQL 來存儲用戶信息，課程信息。用 Redis 存儲用戶訪問量，用戶手機驗證碼。用阿里的云對象存儲 OOS 來存儲圖片信息。用阿里的視頻點播服務 vod 來存儲課程視頻信息。

2.3.1 MySQL 介紹

MySQL 是一款關系型數據庫，關系型數據庫最關鍵的結構式表，由二維表及其之間的聯系所組成的一個數據組織，關系型數據庫具有以下優點：

1、易于維護：都是使用表結構，格式一致；

2、使用方便：SQL 語言通用，可用于復雜查詢；

3、復雜操作：支持 SQL，可用于一個表以及多個表之間非常復雜的查詢。

2.3.2 Redis 介紹

Redis 是一種非關系型數據庫，嚴格的來說不是算是一種數據庫，應該是一種數據結構化存儲方法的集合。使用 Redis 主要是因為關系型數據庫讀寫性能差，固定表構，靈活度稍欠，高并發讀寫需求，對關系型數據庫來說，硬盤 I/O 是一個很大的瓶頸。Redis 具有格式靈活，速度快，高擴展性，低成本的優點。

而在眾多非關系型數據庫中選擇 Redis，主要是因為它支持復數據類型，有 String，list，set，zset,hash 類型。

2.3.3 云對象存儲 OOS 簡介

對象存儲服務（Object Storage Service，OSS）是一種海量、安全、低成本、高可靠的云存儲服務，適合存放任意類型的文件。容量和處理能力彈性擴展，多種存儲類型供選擇，全面優化存儲成本。

2.3.4 視頻點播服務 vod 簡介

阿里云視頻點播（ApsaraVideo VoD）是集音視頻采集、編輯、上傳、自動化轉碼處理、媒體資源管理、高效云剪輯處理、分發加速、視頻播放于一體的一站式音視頻點播解決方案。用戶課將視頻上傳到阿里平臺，平臺會返回一個視頻 ID,根據視頻 id，可以獲取到視頻在網絡中的地址，根據地址播放。也可以獲取到視頻播放憑證，根據視頻播放憑證播放視頻。

3 系統設計

3.1 功能模塊設計概要

整個網絡課程平臺主要包括：后臺管理模塊，能夠進行網絡課程的管理，課程講師的管理，課程分類的管理，記錄每天登陸人數、注冊人數等信息，并生成圖表。前臺用戶模塊，主要實現賬號注冊，用戶登錄，課程信息的展示，講師的展示，個人訂單中心，個人收藏的管理。未注冊的學員可以訪問課程信息，老師信息。當學員需要通過平臺學習課程視頻時，必須登錄，未登錄的學員會強制跳轉到登錄頁面。登錄后的學員可以查看自己購買的課程和未支付的訂單，未支付的訂單可以進行撤銷，已支付的訂單不可以撤銷。學員進入收藏頁面可以看自己收藏的課程，收藏的課程可以取消。學員不可以進入后臺管理系統，后臺管理系統只能允許管理員和老師登錄。

3.2 系統架構

系統架構是系統設計的基礎

3.2.1 基于 B/S 體系

整個網絡課程平臺采用了 Browser/Web/DataBase 的 3 層體系結構，Browser/Server 的體系中，用戶可以通過瀏覽器向分布在網絡上的服務器發出請求，服務器對瀏覽器的進行處理，將用戶所需信息返回到瀏覽器。在客戶機端僅通過瀏覽器軟件實現同用戶輸入/輸出，而應用程序在服務器端進行安裝和運行，服務器將完成對數據庫的訪問和應用程序的執行。瀏覽器發出請求，而其余數據請求，加工，結果返回以及動態網絡生成等工作全部由 Web Server 完成。

在 Browser/Server 三層體系結構下，表示層（presentation）、功能層（business）、數據層（data service）被分割成 3 個相對獨立的單元。其中表示層使用的是 Vue+ElementUI 實現，功能層使用的是 SpringBoot 實現，數據層主要用來 MybatisPlus 實現。

3.2.2 詳細介紹

在本網絡課程平臺的表示層中我不僅使用了 Vue+ElementUi，還使用了 Nginx 的正向代理。所謂的正向代理就是就是用戶訪問指定的接口，通過對 Nginx 配置監聽端口，并設置監聽路徑。實現用戶訪問通過指定的接口可以訪問到其他其他接口。

在本網絡課程平臺的表示層中我不僅使用了 SpringBoot 還使用了 Nacos,Nacos 是阿里巴巴推出來的一個新開源項目，是一個更易于構建云原生應用的動態服務發現、配置管理和服務管理平臺。Nacos 致力于幫助您發現、配置和管理微服務。Nacos 提供了一組簡單易用的特性集，幫助您快速實現動態服務發現、服務配置、服務元數據及流量管理。Nacos 幫助您更敏捷和容易地構建、交付和管理微服務平臺。 Nacos 是構建以“服務”為中心的現代應用架構 (例如微服務范式、云原生范式) 的服務基礎設施。

3.3 系統功能模塊設計

本平臺的軟件設計分為管理后臺和網站前臺。

管理后臺要分為登錄模塊，課程模塊，課程分類模塊，教師模塊，統計中心，如圖 3.1 所示。

圖 3.1 網絡課程平臺管理后臺

網站前臺主要分為學員登錄模塊，網站首頁，課程信息，教師信息，訂單信息，個人收藏，具體如圖 3.2 所示。

圖 3.2 網絡課程平臺用戶模塊

系統主要功能介紹如下：

后臺登錄模塊：完成管理員和老師的登錄。

后臺首頁：能夠實時統計今天登錄人數，觀看視頻人數，購買課程人數。

后臺課程管理模塊：完成對課程的修改課程基本信息，如課程的簡介，課程的章節，小節內容。，視頻的上傳，講授課程的講師，課程價格修改。刪除課程視頻，課程章節，課程。新增課程視頻，課程章節，查詢課程。

后臺老師管理模塊：完成對講師的個人信息修改，新增講師，按條件查詢。

后臺課程分類管理：上傳 Execl 文件，并解析生成數據庫數據。生成后課查看課程分類的樹狀圖。

后臺統計中心模塊：每天晚上 1 點，自動生成前一天的登錄人數，觀看視頻人數，購買課程人數等數據保存到數據庫中。可在統計中心中看到可視化圖形數據。管理人員可手動生成前七天的數據，保存到數據庫中。

前臺登錄模塊：完成學員登錄，注冊。

前臺首頁：未登錄的學員也可訪問本頁，本頁熱門課程是根據課程的瀏覽量排序顯示前八條。本頁的熱門老師則是根據老師所講授的所有課程的瀏覽量選擇出前八條數據顯示。本頁的輪播圖則是今日推薦課程，推薦課程則需要講授交付費用，管理員設置。

4 數據庫的分析與設計

4.1 系統數據庫建模及其創建

使用數據庫系統的好處就是由數據庫管理系統的的特點或優點決定的。使用數據庫系統的好處很多，列如，可以大大提高應用開發的效率，方便用戶使用，減輕數據庫系統管理人員維護負擔，等等。使用數據庫系統可以大大提高應用開發效率。用為在數據庫系統中應用程序必考慮數據的定義，存儲和數據的存取的具體路徑，這些工作都由 DBMS 來完成。用一個通俗的比喻，使用了 DBMS 就如有了一個好參謀，好助手，許多工具的技術工作都由這個助手來完成。開發人員就可以專注于應用邏輯設計，而不必為了數據庫管理的許許多多復雜的細節操心。還有，當用戶邏輯改變，數據的邏輯結構也需要改變時，由于數據庫系統提供了數據語序之間的獨立性，數據結構的改變就是 DBA 的責任，開發人員不必修改應用程序，或者只需要修改很少的應用程序，從而簡化了應用程序的編制，又大大減少了應用程序的維護和修改。使用數據庫管理系統可以減輕數據庫系統管理人員維護系統的負擔。因為 DBMS 在數據庫建立，運用和維護時對數據庫進行統一的管理和控制，包括數據的完整性，安全性，多用戶并發控制，故障恢復等，都由 DBMS 執行。總之，使用數據庫的優點很多，既便于數據的集中管理，控制冗余，提高數據的利用率和一致性，又利于應用程序的開發和維護。

4.2 數據表及其功能設計的分析與設計

本次開發的網課課程平臺中的數據庫包含以下幾個方面：

課程信息：包括課程名，課程講師，課程圖片，課時，課程價格等。

課程章節信息：課程章節與課程信息的主鍵關聯，主要包含的信息有章節名。

課程小節信息：課程小節與課程章節的主鍵關聯，主要包含的信息有小節名，視頻在阿里云點播的 id，視頻名，是否可以免費試看。

課程分類：課程分類是一個自關聯表。主要信息課程分類名。

講師信息：包括講師的姓名，講師的介紹，講師的頭銜，講師的頭像。

學員信息：包括登錄的用戶名，登錄的密碼，昵稱，性別，手機號，用戶頭像。

課程評論信息：主要與課程，講師，學員關聯，包含了學員頭像，學員評論內容。

課程訂單信息：課程訂單信息與課程和學員關聯，包含訂單號，訂單金額，支付類型，訂單狀態。

課程支付信息：課程支付信息與課程訂單關聯，主要交易成功的訂單信息。

統計信息：將每日生成的統計信息存放到此表，主要包括用戶登錄人次，視頻觀看人次，課程購買人次，注冊人次。

本平臺使用 MySQL 作為數據庫管理系統，數據庫命名為 ljh_edu，該數據庫中包含的數據表及其功能如表 4.1 所示。

表 4.1 數據庫包含的數據表及其功能

數據表	功能
edu_course	課程基本信息
edu_course_description	課程詳細介紹
edu_chapter	課程章節信息
edu_video	課程小節信息
edu_comment	課程評論信息
crm_banner	首頁的輪播圖信息
edu_subject	課程分類信息
edu_teacher	講師基本信息
t_order	訂單信息
t_pay_log	訂單支付信息
ucenter_member	學員基本信息
statistics_daily	統計信息
edu_course_collect	學員收藏的課程

4.3 數據庫詳細設計設計

在平臺數據庫的設計中我并未用到外鍵，主要原因是外鍵會產生級聯問題，每次級聯 deleted 或 update 的時候，都要級聯操作相關的外鍵表，不論有沒有這個表要，尤其是在高并發的場景下，這會導致性能的瓶頸。在有外鍵時，開發和維護都及其的不方便，為此我將所有的外鍵關聯概念都移到了應用層解決，數據庫中沒有任何的外鍵關聯。

我為每張表都設計了版本（version）字段，是為了實現樂觀鎖，主要目的是為了解決事務并發帶來的問題。刪除（is_deleted）字段，是為了實現邏輯刪除，用戶在選擇刪除數據后數據不再顯示，數據庫的數據并未被刪除。創建時間（gmt_create）字段，修改時間（gmt_modified）字段。

（1）課程基本信息表（edu_course）

課程基本信息表主要用于存放課程基本信息，主要包括課程的 id，講師 id，課程分類 id，課程父級分類 id，課程名 title，課程價格 price，課時數 lesson_num，課程圖片 cover，課程購買數 buy_count，課程瀏覽數 view_count，課程狀態 status。其中課程 id 作為關鍵字。課程基本信息表結構如表 4.2 所示。

表 4.2 課程信息表（edu_course）

字段名	數據類型	注釋	備注
id	char	課程 ID	主鍵
teacher_id	char	課程講師 ID	不是 null
subject_id	char	課程專業 ID	不是 null
subject_parent_id	char	課程專業父級 ID	不是 null
title	varchar	課程標題	不是 null
price	decimal	課程銷售價格，設置為 0 則可免費觀看	不是 null
lesson_num	int	總課時	不是 null
cover	varchar	課程封面圖片路徑	不是 null
buy_count	bigint	銷售數量	不是 null
view_count	bigint	瀏覽數量	不是 null
version	bigint	樂觀鎖	不是 null
status	varchar	課程狀態 Draft 未發布 ?Normal 已發布	不是 null
is_deleted	tinyint	邏輯刪除 1（true）已刪除， 0（false）未刪除	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（2）課程詳細介紹表（edu_course_description）

課程詳細介紹表基本字段有，課程 id，課程詳細介紹 description，其中課程 id 為主鍵，且與課程基本信息表中的課程 id 相同。課程詳細介紹表的表結構如表 4.3 所示。

表 4.3 課程詳細介紹表（edu_course_description）

字段名	數據類型	注釋	備注
id	char	課程 ID	主鍵
description	text	課程簡介	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（3）課程章節信息表（edu_chapter）

課程章節信息表基本字段有，章節 id，課程 id，章節名稱 title,章節排序 sort，且與課程基本信息表中的課程 id 相同。課程章節信息表的表結構如表 4.4 所示。

表 4.4 課程章節信息表（edu_chapter）

字段名	數據類型	注釋	備注
id	char	章節 ID	主鍵
course_id	char	課程 ID	不是 null
title	varchar	章節名稱	不是 null
sort	int	顯示排序	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（4）課程小結信息表（edu_video）

課程小節信息表基本字段有，小節 id，課程 id，章節 id，小節的名稱 title，小節視頻在云端的 id,小節視頻在云端的名字，小節的排序 sort，小節視頻的播放次數 play_count，小節視頻是否免費 is_free。其中小節 id 為主鍵。課程小結信息表的表結構如表 4.5 所示。

表 4.5 課程小結信息表（edu_video）

字段名	數據類型	注釋	備注
id	char	視頻 ID	主鍵
course_id	char	課程 ID	不是 null
chapter_id	char	章節 ID	不是 null
title	varchar	節點名稱	不是 null
video_source_id	varchar	云端視頻資源	不是 null
video_original_name	varchar	原始文件名稱	不是 null
sort	int	排序字段	不是 null
play_count	bigint	播放次數	不是 null
is_free	tinyint	是否可以試聽：0 收費 1 免費	不是 null
status	varchar	Empty 未上傳 Transcoding 轉碼中 ?Normal 正常	不是 null
version	bigint	樂觀鎖	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（5）課程評論信息表（edu_comment）

課程評論信息表基本字段有，課程評論 id，課程 id，講師 id，學員 id，學員昵稱 nickname,學員頭像 avatar，評論內容 content。其中課程評論 id 為主鍵。課程評論信息表的表結構如表 4.6 所示。

表 4.6 課程評論信息表（edu_comment）

字段名	數據類型	注釋	備注
id	char	課程評論 id	主鍵
course_id	varchar	課程 id	不是 null
teacher_id	char	講師 id	不是 null
member_id	varchar	學員 id	不是 null
nickname	varchar	學員昵稱	不是 null
avatar	varchar	學員頭像
content	varchar	評論內容
is_deleted	tinyint	邏輯刪除 1（true）已刪除， 0（false）未刪除
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（6）首頁的輪播圖信息信息表（crm_banner）

首頁的輪播圖信息信息表基本字段有，輪播圖 id，輪播圖名稱 title，輪播圖圖片路徑 image_url，輪播圖連接地址 link_url，輪播圖排序 sort。其中課輪播圖 id 為主鍵。首頁的輪播圖信息信息表的表結構如表 4.7 所示。

表 4.7 首頁的輪播圖信息信息表（crm_banner）

字段名	數據類型	注釋	備注
id	char	輪播圖 ID	主鍵
title	varchar	輪播圖標題
image_url	varchar	輪播圖圖片地址	不是 null
link_url	varchar	輪播圖鏈接地址
sort	int	輪播圖排序	不是 null
is_deleted	tinyint	邏輯刪除 1（true）已刪除， 0（false）未刪除	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null
gmt_modified	char	ID	不是 null

（7）課程分類信息表（edu_subject）

課程分類信息表基本字段有，課程類別 id，類別名稱 title，父類別 id，排序 sort。其中課程類別 id 為主鍵。課程分類信息表的表結構如表 4.8 所示。

表 4.8 課程分類信息表（edu_subject）

字段名	數據類型	注釋	備注
id	char	課程類別 ID	主鍵
title	varchar	類別名稱	不是 null
parent_id	char	父類別 ID	不是 null
sort	int	排序字段	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（8）講師基本信息表（edu_teacher）

講師基本信息表基本字段有，講師 id，講師姓名 name，講師簡介 intro，講師資歷 career，講師頭銜 level，講師頭銜 avatar，講師排序 sort。其中講師 id 為主鍵。講師基本信息表的表結構如表 4.9 所示。

表 4.9 講師基本信息表（edu_teacher）

字段名	數據類型	注釋	備注
id	char	講師 ID	主鍵
name	varchar	講師姓名	不是 null
intro	varchar	講師簡介	不是 null
career	varchar	講師資歷,一句話說明講師	不是 null
level	int	頭銜 1 高級講師 2 首席講師
avatar	varchar	講師頭像	不是 null
sort	int	排序
is_deleted	tinyint	邏輯刪除 1（true）已刪除， 0（false）未刪除	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（9）訂單信息表（t_order）

訂單信息表基本字段有，訂單 id，訂單號 order_no，課程 id，課程名稱 course_title，課程封面 course_cover，講師名稱 teacher_name，學員 ids，學員昵稱 nikename，學員手機號 mobile，訂單金額 total_fee，訂單支付類型 pay_type，訂單支付狀態 status。其中訂單 id 為主鍵。訂單信息表的表結構如表 4.10 所示。

表 4.10 訂單信息表（t_order）

字段名	數據類型	注釋	備注
id	char	訂單 id	主鍵
order_no	varchar	訂單號	不是 null
course_id	varchar	課程 id	不是 null
course_title	varchar	課程名稱
course_cover	varchar	課程封面
teacher_name	varchar	講師名稱
member_id	varchar	學員 id	不是 null
nickname	varchar	學員昵稱
mobile	varchar	學員手機
total_fee	decimal	訂單金額（分）
pay_type	tinyint	支付類型（1：微信 2：支付寶）
status	tinyint	訂單狀態（0：未支付 1：已支付）
is_deleted	tinyint	邏輯刪除 1（true）已刪除， 0（false）未刪除	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（10）訂單支付信息表（t_pay_log）

訂單支付信息表基本字段有，訂單支付 id，訂單號 order_no，支付完成時間 pay_time，支付金額 total_fee，交易流水號 transaction_id，交易狀態 trade_state，支付類型 pay_type。其中訂單支付 id 為主鍵。訂單支付信息表的表結構如表 4.11 所示。

表 4.11 訂單支付信息表（t_pay_log）

字段名	數據類型	注釋	備注
id	char	訂單支付 id	主鍵
order_no	varchar	訂單號	不是 null
pay_time	datetime	支付完成時間
total_fee	decimal	支付金額（分）
transaction_id	varchar	交易流水號
trade_state	char	交易狀態
pay_type	tinyint	支付類型（1：微信 2：支付寶）	不是 null
attr	text	其他屬性
is_deleted	tinyint	邏輯刪除 1（true）已刪除， 0（false）未刪除	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（11）學員基本信息表（ucenter_member）

學員基本信息表基本字段有，學員 id，手機號 mobile，密碼 password，昵稱 nickname，性別 sex，年齡 age，學員頭像 avatar，學員簽名 sign。其中學員 id 為主鍵。學員基本信息表的表結構如表 4.12 所示。

表 4.12 學員基本信息表（ucenter_member）

字段名	數據類型	注釋	備注
id	char	學員 id	主鍵
mobile	varchar	手機號
password	varchar	密碼
nickname	varchar	昵稱
sex	tinyint	性別 1 女，2 男
age	tinyint	年齡
avatar	varchar	學員頭像
sign	varchar	學員簽名
is_disabled	tinyint	是否禁用 1（true）已禁用， ?0（false）未禁用	不是 null
is_deleted	tinyint	邏輯刪除 1（true）已刪除， 0（false）未刪除	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（12）統計信息表（statistics_daily）

統計信息表基本字段有，統計 id，統計日期 date_calculated，注冊人數 register_num，登錄人數 login_num，video_view_num 每日播放視頻人數 video_view_num，每日課程購買人數 course_num。其中統計 id 為主鍵。統計信息表的表結構如表 4.13 所示。

表 4.13 統計信息表（statistics_daily）

字段名	數據類型	注釋	備注
id	char	統計 ID	主鍵
date_calculated	varchar	統計日期	不是 null
register_num	int	注冊人數	不是 null
login_num	int	登錄人數	不是 null
video_view_num	int	每日播放視頻人數	不是 null
course_num	int	每日購買課程人數	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

（13）學員收藏的課程表（edu_course_collect）

學員收藏的課程表基本字段有，收藏 id，課程 id，學員 id。其中收藏 id 為主鍵。學員收藏的課程表的表結構如表 4.14 所示。

表 4.14 學員收藏的課程表（edu_course_collect）

字段名	數據類型	注釋	備注
id	char	收藏 ID	主鍵
course_id	char	課程講師 ID	不是 null
member_id	char	學員 ID	不是 null
is_deleted	tinyint	邏輯刪除 1（true）已刪除， 0（false）未刪除	不是 null
gmt_create	datetime	創建時間	不是 null
gmt_modified	datetime	更新時間	不是 null

5 系統實現

5.1 系統頁面結構設計

5.1.1 后臺管理頁面設計

網絡課程平臺的后臺管理頁面主要分成了三個部分，分別為頂部的導航欄，左部的信息頁面，右部的主頁面。

為了減少代碼量和頁面的美觀，所以我使用了 vue 官方提供的模板，在此模板的基礎上進行自己頁面的開發，大大的提高了我的開發效率和頁面的美觀。整個頁面通過 Vue 的 components 模板組合到一起。通過模板的繼承實現。后臺管理頁面實現效果如圖 5.1 所示。

圖 5.1 后臺管理頁面

頂部導航欄：面包屑導航欄顯示條，管理員頭像。

左部頁面：講師管理，課程分類管理，課程管理，統計分析。

右部頁面：為主體，根據選擇的頁面不同，顯示不同的效果。

5.1.2 前臺頁面設計

網絡課程平臺的前臺頁面主要分成了三個部分，分別為頂部信息航欄，中部的主體頁面，底部的網站信息。前臺頁面實現效果如圖 5.2 所示。

圖 5.2 前臺頁面實現效果

5.2 系統功能模塊實現

5.2.1 后臺管理員模塊

后臺管理也面一共分為 6 個大的模塊。后臺管理員登錄模塊，后臺管理首頁模塊，講師管理模塊，課程類別管理模塊，課程管理模塊，統計中心模塊

（1）后臺管理員模塊登錄

后臺管理員是系統默認角色，其他用戶無法注冊，所有我將管理的賬號密碼放在了代碼中，管理員輸入賬號和密碼后，前端發送一個 get 請求，后臺將接收到的賬號和密碼，與代碼中默認的賬號密碼做校驗沒如果校驗成功，就返回用戶名，角色，token 給前端。前端接收到返回的數據表示登錄成功并將返回的數據設置到 cokie 中，在訪問后面的頁面時，會先去檢查 cokie 中是否存在 token。如果不存在就返回登錄頁面。管理員登錄界面如圖 5.3 所示：

圖 5.3 管理員登錄界面

（2）后臺管理首頁模塊

在管理人員登錄后可以看到后臺管理首頁主要顯示的內容為管理頭像，功能選擇條，各類數據統計結果。管理頭像是管理員登錄后，前端將后臺的數據保存在 cokie 中，在需要顯示管理員信息時就可以直接從 cokie 中獲取。功能選折條可以通過 vue 的靜態路由設置。各類數據統計中的今日登錄人次與今日視頻播放次數，是在學員登錄本網絡課程平臺的前臺時與播放視頻時，會去查詢 Redis 中是否有今日登錄人次的鍵，如果未查詢到就設置一個并且設置值為 1，如果查詢到就將原有值加 1。

為了避免高并發引起的數據錯誤，為此我使用了 Redis 分布式鎖。在每個線程去操作 Redis 數據時，先去查看操作此數據特定的 Redis 鍵，如果線程可以設置該鍵或該鍵已經過期，就代表線程取到了操作 Redis 數據的權限，將此鍵的值設置為系統時間往回 1s，在這段時間內該線程可以操作 Redis 數據，在該線程操作完數據后需要將該鎖刪除。如果線程不可以設置該鍵或該鍵還未過期，代表此數據其他線程正在操作，本線程需要等待。

今日統計數據中的今日注冊人數和今日下單總量的數據設置與其他兩個不同，這兩個數據我是通過統計數據庫中的記錄條數得出的。管理后臺首頁效果圖，如圖 5.4 所示。

圖 5.4 管理后臺首頁

（3）講師管理模塊

講師管理模塊分為兩個部分。

一個是講師列表，展示所示講師的基本信息，對講師的基本信息修改，刪除。可以根據講師的名字，講師的頭銜，添加講師的時間區間查詢講師。講師列表如圖 5.5 所示。

圖 5.5 講師列表

另外一個部分就是講師詳情頁的，可在頁面進行添加，修改講師的個人詳情操作。首先先判斷 URL 中是否含有 id，當 url 路徑中沒有 id 就是新增操作，當 url 路徑中有講師的 id 就為修改操作。運用了動態路由匹配，一個“路徑參數”使用冒號 : 標記，當匹配到一個路由是，參數值會被設置到 this.$route.params,可以每個組建中使用。講師頭像上傳需要先將講師的上傳到阿里的對象 OSS，上傳成功后阿里云會給我們返回一個 response，從 response 中取出我們需要到圖片地址，拿到的地址可以直接用瀏覽器打開。將這個返回的地址存放到講師頭像字段，保存到數據庫即可。講師信息編輯頁面如圖 5.6 所示:

圖 5.6 講師信息編輯頁面

（4）課程類別管理模塊

課程類別管理模塊分為兩個部分。

一個是課程類別展示，前端向后端發起數據請求，后端接收收到請求后，將數據保存為一個 List 集合，再在前端中使用 element-UI，使其邊成一個樹形結構。在頁面上也可以通過搜索欄進行搜索特定的課程類別。課程類別展示列表如圖 5.7 所示。

圖 5.7 課程類別管理頁面

一個是上傳課程類別，管理將課程類別寫在 execl 表格中，第一列一級類別，第二列為二級類別。在代碼中通過阿里提供的工具類解析 execl 文件得到其中的數據。保存到本地數據庫。效果如圖 5.8 所示。

圖 5.8 上傳課程類別頁面

（5）課程管理模塊

課程管理模塊分為兩個部分。

一個是課程列表，展示所有課程的基本信息，并且可以對課程的基本信息修改，刪除。可以根據課程類別，課程標題，講師名字查詢課程信息。課程列表如圖 5.9 所示。

圖 5.9 課程管理頁面

一個是課程課程發布模塊，這個模塊有三個頁面組成，第一個頁面可以對課程的基本信息進行編輯，主要有課程標題，課程類別，課程講師，課程介紹，課程價格等編輯，其中課程介紹用到了 element-UI 提供的富文本框，富文本能添加圖片，文字樣式。如圖 5.10。

圖 5.10 課程基本信息編輯頁面

第二個頁面時對課程章節的一些操作，可以在此頁面上添加課程章節和課程小結。每個課程小結可以添加一個視頻。存放此視頻我用到了阿里提供的視頻點播技術。視頻點播 VOD 是集音視頻采集、編輯、上傳、自動化轉碼處理、媒體資源管理、分發加速于一體的一站式音視頻點播解決方案。可以方便我們對視頻的管理，還可對視頻加密，用上傳視頻的返回發視頻源 id，獲取播放憑證進行播放。提高我們視頻的安全性.如圖 5.11。

圖 5.11 課程章節編輯頁面

最后一個頁面為課程發布頁面，這個頁面主要顯示一些課程的基本信息，以做確認，如圖 5.12。

圖 5.12 課程發布頁面

（6）統計中心模塊

統計中心模塊分為兩大模塊。

一個是生成指定日期數據的操作頁面，可以生成七日內的數據，我在將登出次數，和視頻觀看次數的數據保存到 Redis 時，設置了 key 值的有效期，有效期為 8 天，一旦超過這個時間，Redis 會自動將 key 刪除。Redis 是一個基于內存的存儲，所以需要將不常用的信息清除。生成指定日期數據的頁面如圖 5.13 所示

圖 5.13 生成指定日期數據的頁面

一個是數據圖形化展示頁面，在此我用來數據可視化中 Echarts，將數據數據中的數據呈折線圖的方式展現出來，并且折線圖可以清晰的看到整體的變化趨勢，管理員可以選擇用生成圖形化數據的類型和日期。如圖 5.14 所示。

圖 5.14 圖形化數據展示的頁面

5.2.2 前臺學員模塊

前臺學員模塊分為 6 大模塊，學員登錄注冊模塊，前臺首頁模塊，前臺課程模塊，前臺講師模塊，個人訂單模塊，個人收藏模塊。

（1）學員登錄注冊模塊

學員登錄注冊主要分為三個部分，注冊部分，登錄部分，個人中心部分。

注冊部分，學員點擊頂部導航欄的注冊后，跳轉到注冊頁面，學員需要在此頁面中輸入昵稱，手機號，手機號驗證碼，登錄密碼。其中手機號驗證碼的發送是使用的阿里提供的三網通信，驗證碼是由 RandomUtil 生成的隨機數。生成驗證碼后，將驗證碼保存在 Redis 中，設置過期時間為 5 分鐘。通過阿里的三網通信將驗證碼作為短信發送到手機。學員將昵稱，手機號，驗證碼，密碼輸入后。后臺會將存放在 Redis 中的數據取出，與用戶輸入的驗證碼比對。通過后，在根據手機號查詢學員信息，如果查詢到了代表學員已經被注冊了，如未查詢到，代表此手機號可以進行注冊。為了保證用戶的信息安全，需要將密碼進行 MD5 加密。學員注冊頁面效果如圖 5.15 所示。

圖 5.15 學員注冊頁面

登錄部分，學員在注冊成功后，頁面會跳轉到登錄頁面，在登錄頁面學員需要輸入手機號和密碼。由于密碼是用 MD5 加密的，MD5 加密后的數據時不可逆的。所以后臺接收到頁面傳的手機號和密碼，根據手機號查詢到學員信息。將學員輸入的密碼進行 MD5 加密后，與學員信息中的密碼做對比如果相同登錄成功。用 JWTUtils 生成 Token 和用戶信息，返回到給前端。學員登錄頁面效果如圖 5.16 所示。

圖 5.16 學員登錄頁面

個人中心部分，學員在登錄成功后，頁面會跳轉到前臺首頁，在首頁的頂部導航欄會顯示用戶頭像和退出按鈕。點擊退出登錄就會退出登錄，并清除 cokie 保存的 token 和學員信息。點擊用戶頭像會跳轉到用戶個人中心頁面，顯示學員的基本信息，并可在此頁面完善，修改自己的基本信息。個人中心頁面效果如圖 5.17 所示。

圖 5.17 個人中心頁面

（2）前臺首頁模塊

前臺首頁模塊，主要顯示分為三個部分，第一部分輪播圖，是廣告位，和平臺宣傳欄。第二部分為熱門課程，第三部分為熱門講師。熱門課程根據的是課程的瀏覽量排序，顯示前 4 的課程，熱門講師，是根據講師講授的所有課程的瀏覽數排序，顯示前 4 位講師。效果如圖 5.18 所示。

圖 5.18 前臺首頁頁面

（3）前臺課程模塊

前臺課程模塊分為三個頁面，所有課程展示頁面，課程詳細信息頁面，視頻播放頁面。

課程展示頁面，顯示所有課程，學員可根據課程類別，課程關注數，課程發布時間，課程價格等，篩選和排序課程。如圖 5.19 所示。

圖 5.19 課程展示頁面

課程詳細信息頁面，主要包含了課程基本信息，課程章節信息，課程講師信息，評論信息等。在此頁面上可以對需要付費的課程進行購買，對自己喜歡的課程可以進行收藏，如果是免費課程，或者已經購買過的視頻就可以直接觀看。如果是付費視頻未購買，或已經購買了但是為未登陸的用戶，則需要登陸后購買該課程，學員可以根據其他學員對視頻的評論選擇是否購買該課程，也可也以發表自己的評論。頁面效果如圖 5.20 所示。

圖 5.20 課程詳細信息頁面

視頻播放頁面，在用戶登錄購買課程后，可以觀看課程視頻。課程視頻是根據視頻源 Id 獲取播放憑證后，使用阿里云提供的 js，進行播放。視頻播放頁面效果如圖 5.21 所示。

圖 5.21 視頻播放頁面

（4）前臺講師模塊

前臺講師模塊，主要有兩個頁面。

講師展示頁面，將所有講師的基本信息展示在頁面上。進行顯示。效果如圖 5.22 所示。

圖 5.22 講師展示頁面

講師詳情頁面，顯示講師的基本信息與講授課程。效果如圖 5.23 所示

圖 5.23 講師詳情頁面

（5）個人訂單模塊

個人訂訂單模塊主要顯示的是所有的訂單，學員可在此也頁面完成訂單訂單的支付，也可以取消訂單，已經完成的訂單不能取消。效果如圖 5.24 所示。

圖 5.24 訂單詳情頁面

點擊去支付后，頁面跳轉到支付頁面，我使用的的是支付掃碼支付。支付寶發沙箱環境為我們提供了一個接近于真實的測試環境，使用支付寶發沙箱環境首先需要下載支付寶的秘鑰生成工具，生成應用私鑰和應用公鑰，登錄支付寶的研發者平臺獲取根據應用公鑰生成支付寶私鑰，根據支付的開發文檔，下載依賴，后編碼即可使用。支付時需要下載支付寶沙箱版。當學員掃碼之后會提示支付成功，跳轉到課程詳情頁面。如果超時未支付，也會提示二維碼過期請刷新頁面。效果如圖 5.25 所示

圖 5.25 支付頁面

（6）個人收藏模塊

個人收藏模塊，用戶可將自己喜歡的課程收藏，在本頁顯示。也可以在本頁取消收藏。效果如圖 5.26 所示。