基于 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 所示。