项目架构
项目介绍
教育后台管理系统是提供给相关业务人员使用的一个后台管理系统,业务人员可以在这个后台管理系统中,对课程信息、讲师信息、 学员信息等数据进行维护。
课程管理模块
课程管理
新建课程条件查询:课程名称,状态课程信息列表展示: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 的使用
下载地址:/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 软件中内置一个远程仓库地址 /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>/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="/POM/4.0.0"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /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><!-- /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 就会自动下载这个依赖包
坐标的来源方式:
输入网址,进行查询:/
使用 IDEA 在 pom.xml 文件中右键选择 Generate --> Dependency --> 搜索输入名称
添加插件
在 pom.xml 中加入如下配置:
<project ...>...<!-- properties 是全局设置,可以设置整个 maven 项目的编译器 JDK 版本 --><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><!-- 重点 --><piler.source>11</piler.source><piler.target>11</piler.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 项目
ServletDemo01
@WebServlet("/demo01")public class ServletDemo01 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected 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() 方法作为调度器 控制器,根据请求的功能不同,调用对应的方法** */@Overrideprotected 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("访问的功能不存在!");}}@Overrideprotected 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 {/*** 根据请求功能不同,调用不同的方法,起到调度器的作用。*/@Overrideprotected 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("请求的功能不存在");}}}@Overrideprotected 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 {@Overrideprotected 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("请求的功能不存在");}}}@Overrideprotected 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*/@Testpublic void javaBeanToJSON() {// 创建 Person 对象Person person = new Person("小明", 23, DateUtils.getDateFormat());// 转换为 JSON 数据String jsonString = JSON.toJSONString(person);System.out.println(jsonString);}/*** Java 中的集合转换为 JSON*/@Testpublic 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\":\"-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\":\"-08-22 23:17:34\"},{\"USERNAME\":\"小红\",\"AGE\":22,\"birthday\":\"-08-22 23:17:34\"},{\"USERNAME\":\"小张\",\"AGE\":23,\"birthday\":\"-08-22 23:17:34\"}]\n";List<Person> personList = JSON.parseArray(json, Person.class);System.out.println(personList);}
如果觉得《教育平台项目后台管理系统:介绍与搭建》对你有帮助,请点赞、收藏,并留下你的观点哦!