教育平台项目后台管理系统：介绍与搭建（教育直播系统开发文档）

项目架构

项目介绍

教育后台管理系统是提供给相关业务人员使用的一个后台管理系统，业务人员可以在这个后台管理系统中，对课程信息、讲师信息、学员信息等数据进行维护。

课程管理模块

课程管理

新建课程
条件查询：课程名称，状态
课程信息列表展示：ID，课程名称，价格，排序，状态
课程状态的切换：上架，下架

营销信息 (营销信息其实就是课程的具体信息)

回显对应课程的详细信息
修改课程信息，包含了图片上传

配置课时（配置课时指的就是对课程内容的配置，课程内容就包括了章节信息和课时信息）

添加章节
以树形结构的下拉列表方式展示课程对应的章节与课时信息
修改章节
章节章节状态的设置

前后端分离开发

前后端分离已成为互联网项目开发的业界标准使用方式，将前端和后端的开发进行解耦。并且前后端分离会为以后的大型分布式架构、微服务架构、多端化服务（各种客户端，比如浏览器、车载终端、安卓、IOS 等）打下坚实的基础。

前后端分离的核心思想就是前端HTML页面通过AJAX调用后端的API接口，并通过JSON数据进行交互。

接口文档

前后端分离开发方式需要由前后端工程师共同定义接口；编写接口文档之后都根据这个接口文档进行开发，到项目结束前都要一直进行接口文档的维护。

一个接口的描述至少包括下面几项：

名称: findCourseList
描述: 根据条件查询课程信息
URL: http://localhost:8080/edu_home/course/
请求方式: GET
请求参数 methodName:"findCourseList";
响应结果

{ "status": "0", "msg": "success"}

前后端耦合的缺陷 (以 JSP 为例)

UI 出好设计图之后，前端开发工程师只负责将设计图切成 HTML，需要由 Java 开发工程师来将 HTML 套成 JSP 页面，修改问题的时候需要双方协同开发，效率低下。
JSP 页面必须要在支持 Java 的 WEB 服务器上运行（如 Tomcat、Jetty 等），无法使用 Nginx 等（官方宣称单实例 HTTP 并发高达 5 W），性能提升不上来。
第一次请求 JSP，必须要在 WEB 服务器中编译成 Servlet，第一次运行会较慢。之后的每次请求 JSP 都是访问 Servlet 再用输出流输出的 HTML 页面，效率没有直接使用 HTML 高。

前后端分离的优势

前后端分离的模式下，如果发现 Bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象
前后端分离可以减少后端服务器的并发/负载压力。除了接口以外的其他所有HTTP请求全部转移到前端 Nginx 上，接口的请求则转发调用 Tomcat.
前后端分离的模式下，即使后端服务器暂时超时或宕机了，前端页面也会正常访问，只不过数据刷不出来而已。
前后端分离会更加合理的分配团队的工作量，减轻后端团队的工作量，提高了性能和可扩展性。

技术选型

前端技术选型

Vue.js – 是一套用于构建用户界面的渐进式 JavaScript 框架

Element UI 库 – 是饿了么前端出品的基于 Vue.js 的后台组件库，方便程序员进行页面快速布局和构建

node.js – 运行在服务端的 JavaScript 运行环境

axios – 对 ajax 的封装, 简单来说就是 ajax 技术实现了局部数据的刷新，axios 实现了对 ajax 的封装

后端技术选型

Web 层：Servlet 前端控制器，Filter 过滤器，BeanUtils 数据封装

Service 层：业务逻辑处理

Dao 层：MySQL 数据库，Druid 数据库连接池，DBUtils 操作数据库

项目开发环境

开发工具：后端 IntelliJ IDEA，前端 VS code，数据库 SQLYog

开发环境：JDK 11，Maven 3.6.3，MySQL 5.7

Maven 项目管理工具

Maven 介绍

Maven 是一个跨平台的项目管理工具。作为 Apache 组织的一个颇为成功的开源项目，其主要服务于基于 Java 平台的项目创建，依赖管理和项目信息管理。Maven 是 Apache 的顶级项目，意为“专家，内行”，它是一个项目管理的工具，Maven 自身是纯 java 开发的，可以使用 Maven 对 java 项目进行构建、依赖管理。

依赖管理：依赖指的就是项目中需要使用的第三方 Jar 包, 一个大一点的工程往往需要几十上百个 Jar 包，按照之前的方式，每使用一种 Jar 就需要导入到工程中，还要解决各种 Jar 冲突的问题；而 Maven 可以对 Jar 包进行统一的管理，包括快速引入 Jar 包，以及对使用的 Jar 包进行统一的版本控制。

一键构建项目：之前创建项目需要确定项目的目录结构，比如 src 存放 Java 源码，resources 存放配置文件，还要配置环境比如 JDK 的版本等等，如果有多个项目就需要每次搞一套配置，十分麻烦；而 Maven 提供了一个标准化的 Java 项目结构，可以通过 Maven 快速创建一个标准的 Java 项目。

Maven 的使用

下载地址：http://maven.apache.org/download.cgi

Maven 下载后，将 Maven 解压到一个没有中文没有空格的路径下，解压后目录结构如下：

bin：存放了 maven 的命令
boot：存放了一些 maven 本身的引导程序，如类加载器等
conf：存放了 maven 的一些配置文件，如 setting.xml 文件
lib：存放了 maven 本身运行所需的一些 jar 包

配置 Maven 环境变量：配置 MAVEN_HOME ，变量值是 maven 安装的路径；将 MAVEN_HOME 添加到 Path 系统变量。

最后通过命令行运行 mvn -v 命令检查 maven 是否安装成功。

Maven 仓库

Maven 中的仓库是用来存放 maven 构建的项目和各种依赖的（Jar包）。

仓库分类

本地仓库：位于自己计算机中的仓库，用来存储从远程仓库或中央仓库下载的插件和 jar 包。
远程仓库：需要联网才可以使用的仓库，阿里提供了一个免费的 maven 远程仓库。
中央仓库：在 maven 软件中内置一个远程仓库地址 http://repo1.maven.org/maven2，它是中央仓库，服务于整个互联网，它是由 Maven 团队自己维护，里面存储了非常全的 jar 包，它包含了世界上大部分流行的开源项目构件。

本地仓库的配置

Maven 仓库默认是在 C 盘的 .m2 目录下，所以这里要重新配置到别的盘符中。

在 Maven 安装目录中，进入 conf 文件夹, 可以看到一个 settings.xml 文件；打开 settings.xml 文件，在 localRepository 标签下配置仓库目录。

阿里云远程仓库配置

打开 settings.xml，找到 <mirrors> 标签，将如下内容复制到 <mirrors> 中即可：

<mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> <mirrorOf>central</mirrorOf> </mirror>

创建 Maven 项目

IDEA 中配置 Maven

打开 IDEA 创建一个新的 project，然后选择 File –> Settings –> 搜素 maven，修改默认配置配置。

创建 Maven 工程

在 IDEA 中配置好 maven 后使用 maven 快速的去构建一个 Java Web 项目，不选择 archetype。

Maven目录说明：

src/main/java —— 存放项目的 .java 文件 src/main/resources —— 存放项目资源文件，如数据库的配置文件 src/test/java —— 存放所有单元测试 .java 文件，如 JUnit 测试类 target —— 项目输出位置，编译后的 class 文件会输出到此目录 pom.xml —— maven 项目核心配置文件

Maven 工程改造

当前创建的 maven 项目是一个普通的 Java 项目，不是 web 项目，所以需要改造。

在 main 目录下创建一个 webapp 文件夹
选择 project Structure —> facets—> 点击号添加 web —> 选择当前工程 hello_maven
根据新建的 webapp 目录，来修改 Deployment 和 Resources 的路径信息

pom.xml 核心配置文件

一个 maven 工程都有一个 pom.xml 文件，通过 pom.xml 文件定义项目的信息、项目依赖、引入插件等等。

此时，在项目中直接创建一个 Servlet，会出现缺少 jar 包报错；要解决问题，就要将 servlet-api-xxx.jar 包放进来；而作为 maven 工程应当添加 servlet 的坐标，从而导入它的 jar。
在 pom.xml 文件中可以引入依赖包的坐标

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.renda</groupId> <artifactId>hello_maven</artifactId> <version>1.0-SNAPSHOT</version>  <dependencies>  <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> </dependencies></project>

一个 Maven 工程就是由 groupId，artifactId 和 version 作为唯一标识；所以在引用其他第三方库的时候，也是通过这三个变量确定。

坐标的概念：在 maven 中坐标就是为了定位一个唯一确定的 jar 包；maven 拥有大量的构建，需要一个统一规范来唯一标识一个构建。

Maven 坐标主要组成 – 确定一个 jar 在互联网位置：

groupId - 定义当前 Maven 组织名称，通常是公司名artifactId - 定义实际项目名称version - 定义当前项目的当前版本packaging - 打包类型：打成 jar 包或者打成 war 包

maven 的依赖管理，是对项目所依赖的 jar 包进行统一管理：

dependencies表示依赖关系使用 <dependency> 声明一个依赖后，Maven 就会自动下载这个依赖包

坐标的来源方式：

输入网址，进行查询：https://mvnrepository.com/
使用 IDEA 在 pom.xml 文件中右键选择 Generate –> Dependency –> 搜索输入名称

添加插件

在 pom.xml 中加入如下配置：

<project ...> ...  <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>  <maven.compiler.source>11</maven.compiler.source> <maven.compiler.target>11</maven.compiler.target> </properties>   <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.8.1</version> <configuration> <release>11</release> </configuration> </plugin> </plugins> </build></project>

运行 Maven 项目

ServletDemo01

@WebServlet("/demo01")public class ServletDemo01 extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("Hello Maven!"); }}

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>Title</title> </head> <body> <p>This is My First Maven Project</p> </body></html>

配置 Tomcat，部署项目。
运行项目, 默认访问 index.jsp。
访问 Servlet：http://localhost:8080/hello_maven/demo01。

Maven 的常用命令

生命周期：使用 maven 完成项目的构建，项目构建包括：清理、编译、测试、部署等过程。

Maven 通过执行一些简单命令即可实现生命周期的各个过程：

mvn compile – 完成编译操作 , 执行完毕后，会生成 target 目录，该目录中存放了编译后的字节码文件。
mvn clean – 执行完毕后，会将 target 目录删除。
mvn test – 执行完毕后，会在target目录中生成三个文件夹：surefire、surefire-reports（测试报告）、test-classes（测试的字节码文件）
mvn package – 完成打包操作；执行完毕后，会在 target 目录中生成一个文件，该文件可能是 jar 或 war。
mvn install – 将打好的 jar 包安装到本地仓库的操作，执行完毕后，会在本地仓库中出现安装后的 jar 包，方便其他工程引用。

IDEA 界面左侧有一个 maven 视图，里面有对应的命令插件，可以执行上面表格中的命令。

依赖范围介绍

A 依赖 B，需要在 A 的 pom.xml 文件中添加 B 的坐标，添加坐标时需要指定依赖范围：

compile – 编译范围，指 A 在编译时依赖 B，此范围为默认依赖范围。编译范围的依赖会用在编译、测试、运行，由于运行时需要所以编译范围的依赖会被打包。
provided – 只有在当 JDK 或者一个容器已提供该依赖之后才使用， provided 依赖在编译和测试时需要，在运行时不需要，比如：servlet API 被 Tomcat 容器提供。
runtime – 在运行和测试系统的时候需要，但在编译的时候不需要。比如：JDBC 的驱动包。由于运行时需要所以 runtime 范围的依赖会被打包。
test – 在编译和运行时都不需要，它们只有在测试编译和测试运行阶段可用，比如：Junit。由于运行时不需要所以 test 范围依赖不会被打包。
system – 与 provided 类似，但是必须显式的提供一个对于本地系统中 JAR 文件的路径，需要指定 system Path 磁盘路径，system 依赖不推荐使用。

后台系统搭建

课程管理模块功能分析

课程管理：展示课程列表、根据课程名和状态进行查询、新建课程、课程上架与下架。

营销信息：回显课程信息、修改课程信息（包含了图片上传）。

配置课时（一个课程对应多个章节,一个章节有多个课时）：以树形结构的下拉框形式展示课程对应的章节与课时信息、添加章节功能、修改章节功能、修改章节状态功能。

课程管理模块表设计

一个课程信息表对多个课程章节表

一个课程章节表对多个课时信息表

一个课时信息表对一个课程媒体表

环境搭建

使用 Maven 快速构建工程。

导入 pom.xml。

导入工具类及配置文件。

导入实体类。

在项目中添加 Lombok 依赖 jar，Lombok 常用注解：

@Getter/@Setter: 作用类上，生成所有成员变量的 getter / setter 方法
@ToString : 作用于类，覆盖默认的 toString() 方法，可以通过 of 属性限定显示某些字段，通过 exclude 属性排除某些字段
@AllArgsConstructor：生成全参构造器
@NoArgsConstructor：生成无参构造器
@Data: 该注解使用在类上，该注解会提供 getter、setter、equals、hashCode、toString 方法。

导入表对应的实体类。

通用 Servlet

每个模块下都有很多的功能，比如课程模块的新建课程，上架课程，下架课程，根据课程名查询等等功能，每一个功能都是一个 Servlet。但是 Servlet 太多了不好管理，而且 Servlet 越多服务器运行就越慢，资源消耗就越多。

Servlet 对应模块

使用一个 Servlet 对应一个模块的方式进行开发

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title></head><body> <a href="${pageContext.request.contextPath}/test?methodName=addCourse">新建课程</a> <a href="${pageContext.request.contextPath}/test?methodName=findByName">根据课程名查询</a> <a href="${pageContext.request.contextPath}/test?methodName=findByStatus">根据课程状态查询</a></body></html>

TestServlet

/** * 模拟课程模块，模块中有很多功能 * */@WebServlet("/test")public class TestServlet extends HttpServlet { /** * doGet() 方法作为调度器控制器,根据请求的功能不同,调用对应的方法 * * */ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 获取要调用的方法名 String methodName = req.getParameter("methodName"); // 判断执行对应的方法 if("addCourse".equals(methodName)){ addCourse(req,resp); }else if("findByStatus".equals(methodName)){ findByName(req,resp); }else if("findByStatus".equals(methodName)){ findByStatus(req,resp); }else{ System.out.println("访问的功能不存在!"); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req,resp); } /** * 模块对应的功能部分 * */ public void addCourse(HttpServletRequest req, HttpServletResponse resp){ System.out.println("新建课程"); } public void findByStatus(HttpServletRequest req, HttpServletResponse resp){ System.out.println("根据状态查询"); } public void findByName(HttpServletRequest req, HttpServletResponse resp){ System.out.println("根据课程名称查询"); }}

提高代码的可维护行

可以使用反射去对代码进行优化，提升代码的可维护性/可扩展性

/** * 对应的是课程管理模块 */@WebServlet("/test")public class TestServlet extends BaseServlet { /** * 根据请求功能不同，调用不同的方法，起到调度器的作用。 */ @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 获取参数：要访问的方法名 String methodName = req.getParameter("methodName"); if (methodName != null) { // 使用反射方式提升代码的可维护性 try { // 获取字节码对象 Class aClass = this.getClass(); // 根据传入的方法名获取对应的方法对象 Method method = aClass.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class); method.invoke(this, req, resp); } catch (NoSuchMethodException | IllegalAccessException | InvocationTargetException e) { e.printStackTrace(); System.out.println("请求的功能不存在"); } } } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } /** * 添加课程 */ public void addCourse(HttpServletRequest req, HttpServletResponse resp) { System.out.println("新建课程"); } /** * 根据课程名查询 */ public void findByName(HttpServletRequest req, HttpServletResponse resp) { System.out.println("根据课程名查询"); } /** * 根据课程状态查询 */ public void findByStatus(HttpServletRequest req, HttpServletResponse resp) { System.out.println("根据课程状态查询"); }}

抽取通用的 BaseServlet

将反射相关的代码抽取到一个类中 BaseServlet，让 BaseServlet 去继承 HTTPServlet

BaseServlet

public class BaseServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 获取参数：要访问的方法名 String methodName = req.getParameter("methodName"); if (methodName != null) { // 使用反射方式提升代码的可维护性 try { // 获取字节码对象 Class aClass = this.getClass(); // 根据传入的方法名获取对应的方法对象 Method method = aClass.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class); method.invoke(this, req, resp); } catch (NoSuchMethodException | IllegalAccessException | InvocationTargetException e) { e.printStackTrace(); System.out.println("请求的功能不存在"); } } } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); }}

TestServlet 继承 BaseServlet

@WebServlet("/test")public class TestServlet extends BaseServlet { /** * 添加课程 */ public void addCourse(HttpServletRequest req, HttpServletResponse resp) { System.out.println("新建课程"); } /** * 根据课程名查询 */ public void findByName(HttpServletRequest req, HttpServletResponse resp) { System.out.println("根据课程名查询"); } /** * 根据课程状态查询 */ public void findByStatus(HttpServletRequest req, HttpServletResponse resp) { System.out.println("根据课程状态查询"); }}

JSON

JSON 简述

JSON (JavaScript Object Notation) – JavaScript 对象表示法（JSON 源于 JS）。

JSON 是一种轻量级的数据交换格式
JSON 采用完全独立于语言的文本格式，不同的编程语言 JSON 数据是一致的
JSON 易于人阅读和编写，也易于机器解析和生成（一般用于提升网络传输速率）

对比 XML 与 JSON

XML – 可扩展标记语言，是一种用于标记电子文件使其具有结构性的标记语言。

JSON – 是一种轻量级的数据交换格式。

相同点: 它们都可以作为一种数据交换格式。

区别:

XML 是重量级的，JSON 是轻量级的，XML 在传输过程中比较占带宽，JSON 占带宽少，易于压缩。
XML 和 JSON 都用在项目交互下，XML 多用于做配置文件，JSON 用于数据交互
JSON 独立于编程语言存在，任何编程语言都可以去解析 JSON

JSON 语法格式

{ "id" : 1, "name" : "张小明", "age" : 25}

由 {} 括起来
数据以"键 : 值"对的形式出现（键多以字符串形式出现；值可取字符串，数值，或者其他 JSON 对象）
每两个"键 : 值"对以逗号分隔（最后一个"键 : 值"对省略逗号）
参数值如果是 String 类型，就必须加引号；如果是数字类型，引号可加可不加

// 自定义 JSON 数据格式var person = {"name":"Mary", "sex":"女", "age":19};console.log(person);// 数组格式var persons = {"person" : [{"name":"Mary", "sex":"女", "age":19}, {"name":"jack", "sex":"男", "age":20}]};console.log(persons)// 集合格式var personList = [{"name":"小红", "sex":"女", "age":19}, {"name":"小明", "sex":"男", "age":20}];console.log(personList)

JSON 数据的转换

前后端的 AJAX 通讯用的都是 JSON 格式，所以在开发的过程中经常会涉及到 JSON 数据的转换

FastJson 介绍

Fastjson 是一个 Java 库，可以将 Java 对象转换为 JSON 格式，当然它也可以将 JSON 字符串转换为 Java 对象。

FastJson 特点如下：

能够支持将 java bean 序列化成 JSON 字符串，也能够将 JSON 字符串反序列化成 Java bean
速度快
无其他包的依赖，使用比较方便

FastJson 的使用

在 Maven 项目中使用 FastJson 库，需要提前在 Maven 的配置文件中添加此 FastJson 包的依赖

<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.3</version></dependency><dependency> <groupId>com.colobu</groupId> <artifactId>fastjson-jaxrs-json-provider</artifactId> <version>0.3.1</version></dependency>

将 Java 对象转换为 JSON 格式

定义一个名为 Person 的 JavaBean 类

public class Person { private String username; private int age; private String birthday; // getter and setter ...}

可以使用 JSON.toJSONString() 将 Java 对象转换换为 JSON 对象

public class TestFastJson { /** * Java 对象转换为 Json */ @Test public void javaBeanToJSON() { // 创建 Person 对象 Person person = new Person("小明", 23, DateUtils.getDateFormat()); // 转换为 JSON 数据 String jsonString = JSON.toJSONString(person); System.out.println(jsonString); } /** * Java 中的集合转换为 JSON */ @Test public void listToJSON() { // 创建 Person 对象集 Person person1 = new Person("小明", 21, DateUtils.getDateFormat()); Person person2 = new Person("小红", 22, DateUtils.getDateFormat()); Person person3 = new Person("小张", 23, DateUtils.getDateFormat()); List<Person> personList = new ArrayList<>(); Collections.addAll(personList, person1, person2, person3); String jsonString = JSON.toJSONString(personList); System.out.println(jsonString); }}

Fastjson 中的 @JSONField 注解

@Data@AllArgsConstructor@NoArgsConstructorpublic class Person { // 可以通过 name 来指定输出的 JSON 名称 @JSONField(name = "USERNAME", ordinal = 1) private String username; // 可以使用 ordinal 指定 JSON 的字段顺序 @JSONField(name = "AGE", ordinal = 2) private int age; // 使用 serialize 指定是否进行序列化 @JSONField(ordinal = 3, serialize = true) private String birthday;}

将 JSON 字符串转换为 Java 对象

/** * JSON 转换为对象 */@Testpublic void JSONtoJavaBean() { String json = "{"USERNAME":"小明","AGE":23,"birthday":"2020-08-22 23:15:52"}"; Person person = JSON.parseObject(json, Person.class); System.out.println(person);}/** * JSON 转换为集合 */@Testpublic void JSONtoList() { String json = "[{"USERNAME":"小明","AGE":21,"birthday":"2020-08-22 23:17:34"},{"USERNAME":"小红","AGE":22,"birthday":"2020-08-22 23:17:34"},{"USERNAME":"小张","AGE":23,"birthday":"2020-08-22 23:17:34"}]n"; List<Person> personList = JSON.parseArray(json, Person.class); System.out.println(personList);}

想了解更多，欢迎关注我的微信公众号：Renda_Zhang