教育平台项目后台管理系统：介绍与搭建

项目架构

项目介绍

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

课程管理模块

课程管理

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

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

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

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

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

前后端分离开发

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

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

接口文档

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

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

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

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

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

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

前后端分离的优势

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

技术选型

前端技术选型

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>

    <!-- import package coordinates -->
    <dependencies>
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <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 就会自动下载这个依赖包