项目架构
教育后台管理系统是提供给相关业务人员使用的一个后台管理系统,业务人员可以在这个后台管理系统中,对课程信息、讲师信息、 学员信息等数据进行维护。
课程管理
营销信息 (营销信息其实就是课程的具体信息)
配置课时(配置课时指的就是对课程内容的配置,课程内容就包括了章节信息和课时信息)
前后端分离已成为互联网项目开发的业界标准使用方式,将前端和后端的开发进行解耦。并且前后端分离会为以后的大型分布式架构、微服务架构、多端化服务(各种客户端,比如浏览器、车载终端、安卓、IOS 等)打下坚实的基础。
前后端分离的核心思想就是前端HTML页面通过AJAX调用后端的API接口,并通过JSON数据进行交互。
前后端分离开发方式需要由前后端工程师共同定义接口;编写接口文档之后都根据这个接口文档进行开发,到项目结束前都要一直进行接口文档的维护。
一个接口的描述至少包括下面几项:
findCourseList
methodName:"findCourseList";
{
"status": "0",
"msg": "success"
}
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 是一个跨平台的项目管理工具。作为 Apache 组织的一个颇为成功的开源项目,其主要服务于基于 Java 平台的项目创建,依赖管理和项目信息管理。Maven 是 Apache 的顶级项目,意为“专家,内行”,它是一个项目管理的工具,Maven 自身是纯 java 开发的,可以使用 Maven 对 java 项目进行构建、依赖管理。
依赖管理:依赖指的就是项目中需要使用的第三方 Jar 包, 一个大一点的工程往往需要几十上百个 Jar 包,按照之前的方式,每使用一种 Jar 就需要导入到工程中,还要解决各种 Jar 冲突的问题;而 Maven 可以对 Jar 包进行统一的管理,包括快速引入 Jar 包,以及对使用的 Jar 包进行统一的版本控制。
一键构建项目:之前创建项目需要确定项目的目录结构,比如 src
存放 Java 源码,resources
存放配置文件,还要配置环境比如 JDK 的版本等等,如果有多个项目就需要每次搞一套配置,十分麻烦;而 Maven 提供了一个标准化的 Java 项目结构,可以通过 Maven 快速创建一个标准的 Java 项目。
下载地址: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 构建的项目和各种依赖的(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>
打开 IDEA 创建一个新的 project,然后选择 File --> Settings --> 搜素 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 项目是一个 普通的 Java 项目,不是 web 项目,所以需要改造。
webapp
文件夹webapp
目录,来修改 Deployment 和 Resources 的路径信息pom.xml
核心配置文件一个 maven 工程都有一个 pom.xml 文件,通过 pom.xml 文件定义项目的信息、项目依赖、引入插件等等。
servlet-api-xxx.jar
包放进来;而作为 maven 工程应当添加 servlet 的坐标,从而导入它的 jar。<?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 就会自动下载这个依赖包
坐标的来源方式:
https://mvnrepository.com/
在 pom.xml 中加入如下配置:
<project ...>
...
<!-- properties 是全局设置,可以设置整个 maven 项目的编译器 JDK 版本 -->
<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 中需要指定一下项目的 JDK 编译版本,maven 默认使用 1.5 版本进行编译 -->
<!-- 注意 build 与 dependencies 是平级关系,标签不要写错位置 -->
<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>
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>
index.jsp
。http://localhost:8080/hello_maven/demo01
。生命周期:使用 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 的坐标,添加坐标时需要指定依赖范围:
课程管理:展示课程列表、根据课程名和状态进行查询、新建课程、课程上架与下架。
营销信息:回显课程信息、修改课程信息(包含了图片上传)。
配置课时(一个课程对应多个章节,一个章节有多个课时):以树形结构的下拉框形式展示课程对应的章节与课时信息、添加章节功能、修改章节功能、修改章节状态功能。
一个课程信息表对多个课程章节表
一个课程章节表对多个课时信息表
一个课时信息表对一个课程媒体表
使用 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 对应一个模块的方式进行开发
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 (JavaScript Object Notation) - JavaScript 对象表示法(JSON 源于 JS)。
XML - 可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言。
JSON - 是一种轻量级的数据交换格式。
相同点: 它们都可以作为一种数据交换格式。
区别:
{
"id" : 1,
"name" : "张小明",
"age" : 25
}
// 自定义 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)
前后端的 AJAX 通讯用的都是 JSON 格式,所以在开发的过程中经常会涉及到 JSON 数据的转换
FastJson
介绍Fastjson
是一个 Java 库,可以将 Java 对象转换为 JSON 格式,当然它也可以将 JSON 字符串转换为 Java 对象。
FastJson
特点如下:
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>
定义一个名为 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
@NoArgsConstructor
public 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 转换为对象
*/
@Test
public 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 转换为集合
*/
@Test
public 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);
}