教育后台管理系统是提供给相关业务人员使用的一个后台管理系统,业务人员可以在这个后台管理系统中,对课程信息、讲师信息、 学员信息等数据进行维护。 课程管理 营销信息 (营销信息其实就是课程的具体信息) 配置课时(配置课时指的就是对课程内容的配置,课程内容就包括了章节信息和课时信息) 前后端分离已成为互联网项目开发的业界标准使用方式,将前端和后端的开发进行解耦。并且前后端分离会为以后的大型分布式架构、微服务架构、多端化服务(各种客户端,比如浏览器、车载终端、安卓、IOS 等)打下坚实的基础。 前后端分离的核心思想就是前端HTML页面通过AJAX调用后端的API接口,并通过JSON数据进行交互。 前后端分离开发方式需要由前后端工程师共同定义接口;编写接口文档之后都根据这个接口文档进行开发,到项目结束前都要一直进行接口文档的维护。 一个接口的描述至少包括下面几项: 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 解压到一个没有中文没有空格的路径下,解压后目录结构如下: 配置 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> 中即可: 打开 IDEA 创建一个新的 project,然后选择 File --> Settings --> 搜素 maven,修改默认配置配置。 在 IDEA 中配置好 maven 后使用 maven 快速的去构建一个 Java Web 项目,不选择 archetype。 Maven目录说明: 当前创建的 maven 项目是一个 普通的 Java 项目,不是 web 项目,所以需要改造。 一个 maven 工程都有一个 pom.xml 文件,通过 pom.xml 文件定义项目的信息、项目依赖、引入插件等等。 一个 Maven 工程就是由 groupId,artifactId 和 version 作为唯一标识;所以在引用其他第三方库的时候,也是通过这三个变量确定。 坐标的概念:在 maven 中坐标就是为了定位一个唯一确定的 jar 包;maven 拥有大量的构建,需要一个统一规范来唯一标识一个构建。 Maven 坐标主要组成 - 确定一个 jar 在互联网位置: maven 的依赖管理,是对项目所依赖的 jar 包进行统一管理: 坐标的来源方式: 在 pom.xml 中加入如下配置: 生命周期:使用 maven 完成项目的构建,项目构建包括:清理、编译、测试、部署等过程。 Maven 通过执行一些简单命令即可实现生命周期的各个过程: IDEA 界面左侧有一个 maven 视图,里面有对应的命令插件,可以执行上面表格中的命令。 A 依赖 B,需要在 A 的 pom.xml 文件中添加 B 的坐标,添加坐标时需要指定依赖范围: 课程管理:展示课程列表、根据课程名和状态进行查询、新建课程、课程上架与下架。 营销信息:回显课程信息、修改课程信息(包含了图片上传)。 配置课时(一个课程对应多个章节,一个章节有多个课时):以树形结构的下拉框形式展示课程对应的章节与课时信息、添加章节功能、修改章节功能、修改章节状态功能。 一个课程信息表对多个课程章节表 一个课程章节表对多个课时信息表 一个课时信息表对一个课程媒体表 使用 Maven 快速构建工程。 导入 pom.xml。 导入工具类及配置文件。 导入实体类。 在项目中添加 Lombok 依赖 jar,Lombok 常用注解: 导入表对应的实体类。 每个模块下都有很多的功能,比如课程模块的新建课程,上架课程,下架课程,根据课程名查询等等功能 ,每一个功能都是一个 Servlet。但是 Servlet 太多了不好管理,而且 Servlet 越多服务器运行就越慢,资源消耗就越多。 使用一个 Servlet 对应一个模块的方式进行开发 index.jsp TestServlet 可以使用反射去对代码进行优化,提升代码的可维护性/可扩展性 将反射相关的代码抽取到一个类中 BaseServlet,让 BaseServlet 去继承 HTTPServlet BaseServlet TestServlet 继承 BaseServlet JSON (JavaScript Object Notation) - JavaScript 对象表示法(JSON 源于 JS)。 XML - 可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言。 JSON - 是一种轻量级的数据交换格式。 相同点: 它们都可以作为一种数据交换格式。 区别: 前后端的 AJAX 通讯用的都是 JSON 格式,所以在开发的过程中经常会涉及到 JSON 数据的转换 Fastjson 是一个 Java 库,可以将 Java 对象转换为 JSON 格式,当然它也可以将 JSON 字符串转换为 Java 对象。 FastJson 特点如下: 在 Maven 项目中使用 FastJson 库,需要提前在 Maven 的配置文件中添加此 FastJson 包的依赖 定义一个名为 Person 的 JavaBean 类 可以使用 JSON.toJSONString() 将 Java 对象转换换为 JSON 对象 Fastjson 中的 @JSONField 注解 想了解更多,欢迎关注我的微信公众号:Renda_Zhang项目架构
项目介绍
课程管理模块
前后端分离开发
接口文档
{
"status": "0",
"msg": "success"
}
前后端耦合的缺陷 (以 JSP 为例)
前后端分离的优势
技术选型
前端技术选型
后端技术选型
项目开发环境
Maven 项目管理工具
Maven 介绍
Maven 的使用
Maven 仓库
仓库分类
本地仓库的配置
阿里云远程仓库配置
<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
创建 Maven 工程
src/main/java —— 存放项目的 .java 文件
src/main/resources —— 存放项目资源文件,如数据库的配置文件
src/test/java —— 存放所有单元测试 .java 文件,如 JUnit 测试类
target —— 项目输出位置,编译后的 class 文件会输出到此目录
pom.xml —— maven 项目核心配置文件
Maven 工程改造
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>
groupId - 定义当前 Maven 组织名称,通常是公司名
artifactId - 定义实际项目名称
version - 定义当前项目的当前版本
packaging - 打包类型:打成 jar 包或者打成 war 包
dependencies表示依赖关系
使用 <dependency> 声明一个依赖后,Maven 就会自动下载这个依赖包
添加插件
<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>
运行 Maven 项目
@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!");
}
}
<%@ 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>
Maven 的常用命令
依赖范围介绍
后台系统搭建
课程管理模块功能分析
课程管理模块表设计
环境搭建
通用 Servlet
Servlet 对应模块
<%@ 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>
/**
* 模拟课程模块,模块中有很多功能
* */
@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
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);
}
}
@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 简述
对比 XML 与 JSON
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)
JSON 数据的转换
FastJson 介绍
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 格式
public class Person {
private String username;
?
private int age;
?
private String birthday;
?
// getter and setter ...
}
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);
}
}
@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 字符串转换为 Java 对象
/**
* 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);
}