单体项目

项目介绍

业务人员可以在后台管理系统中，对课程信息、讲师信息、学员信息等数据进行维护

课程管理模块中都包含的内容:

课程信息页面展示
课程营销信息配置
配置节( 即课程内容管理)

接口文档规范

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

名称: findCourseList
描述: 根据条件查询课程信息
URL: http://localhost:8080/home/course/
请求方式: GET
请求参数

json

methodName:"findCourseList";

响应结果

json

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

前后端分离架构的优势

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

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

前后端分离的优势

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

技术选型

前端技术选型

前端技术	说明
Vue.js	是一套用于构建用户界面的渐进式 JavaScript 框架
Element UI库	element-ui 是饿了么前端出品的基于 Vue.js 的后台组件库，方便程序员进行页面快速布局和构建
node.js	简单的说 Node.js 就是运行在服务端的 JavaScript 运行环境
axios	对 ajax 的封装, 简单来说就是 ajax 技术实现了局部数据的刷新，axios 实现对 ajax 的封装

后端技术选型

后端技术	说明
Web 层	a) Servlet：前端控制器 b) Filter：过滤器 c) BeanUtils：数据封装
Service 层	a) 业务处理
dao 层	a) Mysql：数据库 b) Druid：数据库连接池 c) DBUtils: 操作数据库

需求分析

实现以下功能:

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

营销信息

营销信息,其实就是设置课程的详细信息
回显课程信息
修改课程信息,包含了图片上传

配置节

配置节指的是对课程下所属的章节与节进行配置(一个课程对应多个章节,一个章节有多个节)
以树形结构的下拉框形式, 展示课程对应的章节与节信息
添加章节功能
修改章节功能
修改章节状态功能

课程管理模块表设计

创建数据库及表

lagou_edu.sql

course 表

sql

CREATE DATABASE IF NOT EXISTS `lagou_edu` DEFAULT CHARACTER SET utf8;

USE `lagou_edu`;

DROP TABLE IF EXISTS `course`;

CREATE TABLE `course` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'id',
  `course_name` varchar(255) DEFAULT NULL COMMENT '课程名',
  `brief` varchar(255) DEFAULT NULL COMMENT '课程一句话简介',
  `teacher_name` varchar(255) DEFAULT NULL COMMENT '讲师名称',
  `teacher_info` varchar(255) DEFAULT NULL COMMENT '讲师介绍',
  `total_course_time` int(5) DEFAULT NULL COMMENT '节数',
  `sales` int(11) DEFAULT '0' COMMENT '显示销量',
  `actual_sales` int(11) DEFAULT '0' COMMENT '真实销量',
  `price` double(10,2) DEFAULT NULL COMMENT '原价',
  `price_tag` varchar(255) DEFAULT NULL COMMENT '原价标签',
  `discounts` double(10,2) DEFAULT NULL COMMENT '优惠价',
  `course_description` longtext COMMENT '课程描述',
  `course_img_url` varchar(255) DEFAULT NULL COMMENT '课程分享图片url',
  `is_new` tinyint(1) DEFAULT NULL COMMENT '是否新品',
  `is_new_des` varchar(255) DEFAULT NULL COMMENT '广告语',
  `last_operator_id` int(11) DEFAULT NULL COMMENT '最后操作者',
  `create_time` datetime DEFAULT NULL COMMENT '记录创建时间',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `is_del` tinyint(1) DEFAULT '0' COMMENT '是否删除,0未删除，1删除',
  `total_duration` int(11) DEFAULT NULL COMMENT '总时长(分钟)',
  `share_title` varchar(255) DEFAULT NULL COMMENT '分享title',
  `share_description` text COMMENT '分享描述',
  `share_image_title` varchar(255) DEFAULT NULL COMMENT '分享图title',
  `status` int(2) DEFAULT NULL COMMENT '课程状态，0-草稿，1-上架',
  `sort_num` int(11) DEFAULT NULL COMMENT '课程排序，用于后台保存草稿时用到',
  `course_type` tinyint(3) DEFAULT NULL COMMENT '课程类型: 1 音视频课 2 伴读课',
  `last_notice_time` datetime DEFAULT NULL COMMENT '最后课程最近通知时间',
  `preview_first_field` varchar(255) DEFAULT NULL COMMENT '课程预览第一个字段',
  `preview_second_field` varchar(255) DEFAULT NULL COMMENT '课程预览第二个字段',
  `is_gray` tinyint(1) DEFAULT '0' COMMENT '是否是灰度课程',
  `grade` tinyint(2) DEFAULT '0' COMMENT '0 初级 1 初中级 2 中级 3 中高级 4 高级',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB

course_lesson 表

sql

DROP TABLE IF EXISTS `course_lesson`;

CREATE TABLE `course_lesson` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'id',
  `course_id` int(11) NOT NULL COMMENT '课程id',
  `section_id` int(11) NOT NULL DEFAULT '0' COMMENT '章节id',
  `theme` varchar(255) NOT NULL COMMENT '节主题',
  `duration` int(11) NOT NULL DEFAULT '0' COMMENT '节时长(分钟)',
  `is_free` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否免费',
  `start_img_url` varchar(255) DEFAULT NULL COMMENT '节背景图',
  `text_content` mediumtext COMMENT '节内容',
  `markdown_text_content` mediumtext COMMENT '节内容（markdown文本）',
  `transcode` varchar(100) DEFAULT NULL COMMENT '转码集合',
  `resource_url` varchar(255) DEFAULT NULL COMMENT '课程资源路径',
  `last_operator_id` int(11) DEFAULT NULL COMMENT '最后操作者id',
  `create_time` datetime DEFAULT NULL COMMENT '记录创建时间',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `is_del` tinyint(1) DEFAULT '0' COMMENT '是否删除',
  `order_num` int(11) DEFAULT NULL COMMENT '排序字段',
  `ali_file_url` varchar(255) DEFAULT NULL COMMENT '阿里云视频文件URL',
  `ali_file_dk` varchar(255) DEFAULT NULL COMMENT '阿里云视频文件的DK',
  `ali_file_edk` varchar(255) DEFAULT NULL COMMENT '阿里云视频文件的EDK',
  `ali_file_vid` varchar(50) DEFAULT NULL COMMENT '阿里云视频资源文件ID',
  `status` int(2) DEFAULT NULL COMMENT '节状态,0-隐藏，1-未发布，2-已发布',
  `is_timing_publish` tinyint(1) DEFAULT '0' COMMENT '是否定时发布',
  `publish_time` datetime DEFAULT '1970-01-01 08:00:00' COMMENT '定时发布时间',
  PRIMARY KEY (`id`) USING BTREE,
  KEY `course_id_index` (`course_id`,`section_id`) USING BTREE,
  KEY `idx_sectionId_orderNum` (`section_id`,`order_num`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=52 DEFAULT CHARSET=utf8;

course_media 表

sql

DROP TABLE IF EXISTS `course_media`;

CREATE TABLE `course_media` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '课程媒体主键ID',
  `course_id` int(11) NOT NULL COMMENT '课程Id',
  `section_id` int(11) NOT NULL COMMENT '章ID',
  `lesson_id` int(11) NOT NULL COMMENT '节ID',
  `channel` int(2) DEFAULT NULL COMMENT '媒体渠道，1-阿里云',
  `media_type` int(2) DEFAULT NULL COMMENT '媒体类型，0-音频，1-视频',
  `cover_image_url` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '封面图URL',
  `duration` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '时长（06:02）',
  `file_id` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '媒体资源文件ID',
  `file_url` varchar(512) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '媒体文件URL,目前只有音频使用',
  `file_edk` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '媒体资源文件对应的EDK',
  `file_size` double(10,2) DEFAULT NULL COMMENT '文件大小MB',
  `file_name` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '文件名称',
  `file_dk` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '媒体资源文件对应的DK',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `status` int(2) DEFAULT NULL COMMENT '媒体状态',
  `is_del` tinyint(1) DEFAULT '0' COMMENT '是否删除，0未删除，1删除',
  `last_operator_id` int(11) DEFAULT NULL COMMENT '最后操作者ID',
  `duration_num` int(11) DEFAULT NULL COMMENT '时长，秒数（主要用于音频在H5控件中使用）',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE KEY `uniq_lessonid_channel_mediatype_idx` (`lesson_id`,`channel`,`media_type`) USING BTREE,
  KEY `fileid_idx` (`file_id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

course_section 表

sql

DROP TABLE IF EXISTS `course_section`;

CREATE TABLE `course_section` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'id',
  `course_id` int(11) NOT NULL COMMENT '课程id',
  `section_name` varchar(255) NOT NULL COMMENT '章节名',
  `description` varchar(255) NOT NULL COMMENT '章节描述',
  `last_operator` varchar(255) DEFAULT NULL COMMENT '最后操作者',
  `create_time` datetime NOT NULL COMMENT '记录创建时间',
  `update_time` datetime NOT NULL COMMENT '更新时间',
  `is_visible` tinyint(1) DEFAULT '1' COMMENT '是否可见',
  `is_del` tinyint(4) DEFAULT NULL COMMENT '是否删除 0-未删除，1-已删除',
  `order_num` int(11) DEFAULT NULL COMMENT '排序字段',
  `last_operator_id` int(11) DEFAULT NULL COMMENT '最后操作者ID',
  `status` int(1) DEFAULT NULL COMMENT '状态，0:隐藏；1：待更新；2：已发布',
  PRIMARY KEY (`id`) USING BTREE,
  KEY `course_id_index` (`course_id`) USING BTREE,
  KEY `idx_course_id` (`course_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=44 DEFAULT CHARSET=utf8;

表关系介绍

环境搭建

创建项目

使用 Maven 快速构建工程, 项目名为: lagou_edu_home

选择 maven 直接 next
填写项目相关信息,创建 maven 项目
当前maven项目还不是一个 web 项目,进行一下改造

详见 Maven工程改造

导入pom.xml

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.lagou</groupId>
    <artifactId>lagou_edu_home</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <!-- 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>

    <dependencies>
        <!-- Servlet -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13</version>
            <scope>test</scope>
        </dependency>

        <!--    Beanutils    -->
        <dependency>
            <groupId>commons-beanutils</groupId>
            <artifactId>commons-beanutils</artifactId>
            <version>1.8.3</version>
        </dependency>

        <!--   DBUtils    -->
        <dependency>
            <groupId>commons-dbutils</groupId>
            <artifactId>commons-dbutils</artifactId>
            <version>1.6</version>
        </dependency>

        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.1.1</version>
        </dependency>


        <!-- 数据库相关 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.37</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.9</version>
        </dependency>

        <!--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>

        <!--  文件上传 -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>1.4</version>
        </dependency>

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.2.1</version>
        </dependency>

        <!--   Lombok  -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.0</version>
            <scope>provided</scope>
        </dependency>

    </dependencies>

    <build>
        <plugins>

            <!--  maven编译插件 -->
            <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>

导入工具类及配置文件

导入连接池工具类以及数据库配置文件

导入实体类

1. Lombok 介绍

在项目中使用 Lombok 可以减少很多重复代码的书写。比如说 getter/setter/toString 等方法的编写。

2. IDEA中安装 lombok插件

打开IDEA的 Setting –> 选择 Plugins 选项 –> 搜索 lombok –> 点击安装 –> 安装完成重启 IDEA

3. 添加依赖

在项目中添加 Lombok 依赖 jar，在 pom 文件中添加如下部分

xml

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.0</version>
    <scope>provided</scope>
</dependency>

导入表对应的实体类

通用Servlet

需求分析

课程模块下有两个子模块:

营销信息
配置节(课程内容管理)

每个模块下都有很多的功能, 比如课程模块的新建课程, 上架课程,下架课程,根据课程名查询等等功能 , 每一个功能都是一个 Servlet

Servlet 太多了,不好管理, 而且 Servlet 越多服务器运行就越慢,资源消耗就越多

Servlet 对应模块

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

index.jsp

javascript

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
    <%--  一个模块对应一个Servlet  --%>
    <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

java

// 模拟课程模块 ,模块中有很多功能
@WebServlet("/test")
public class TestServlet extends HttpServlet {

    // doGet()方法作为调度器 控制器,根据请求的功能不同,调用对应的方法
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //1.获取参数
        //获取要调用的方法名
        String methodName = req.getParameter("methodName");

        //2.业务处理
        //判断 执行对应的方法
        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);
    }

	// 2.模块对应的功能部分
    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("根据课程名称查询");
    }

}

提高代码的可维护行

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

反射的知识回顾:

第一步：先获取请求携带的方法参数值

第二步：获取指定类的字节码对象

第三步：根据请求携带的方法参数值，再通过字节码对象获取指定的方法

第四步：最后执行指定的方法

java

@WebServlet("/test")
public class TestServlet extends HttpServlet {

	// doGet()方法作为调度器 控制器,根据请求的功能不同,调用对应的方法
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        try {
            //1.获取参数 获取要调用的方法名
            String methodName = req.getParameter("methodName");

            //2.业务处理
            if(methodName != null){
                //通过反射优化代码,提升代码的可维护性
                //1.获取字节码对象  this = TestServlet对象
                Class c = this.getClass();

                //2.根据传入的方法名, 获取对应方法对象,执行方法即可
                Method method = c.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);

                //3.调用Method对象的 invoke()方法,执行对应的功能
                method.invoke(this,req,resp);
            }
        } catch (Exception e) {
            System.out.println("请求的功能不存在! !");
            e.printStackTrace();
        }

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }


    // 2.模块对应的功能部分
    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("根据课程名称查询");
    }
}

抽取通用的 BaseServlet

当前代码依然存在问题:每个 Servlet 都需要写一份相同的反射代码

解决方案: 将反射相关的代码抽取到一个类中 BaseServlet, 让 BaseServlet 去继承 HTTPServlet

BaseServlet

java

public class BaseServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        try {
            //1.获取参数
            //获取要调用的方法名
            String methodName = req.getParameter("methodName");

            //2.业务处理
            if(methodName != null){
                //通过反射优化代码,提升代码的可维护性
                //1.获取字节码对象  this = TestServlet对象
                Class c = this.getClass();

                //2.根据传入的方法名, 获取对应方法对象,执行方法即可
                Method method = c.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);

                //3.调用Method对象的 invoke()方法,执行对应的功能
                method.invoke(this,req,resp);
            }
        } catch (Exception e) {
            System.out.println("请求的功能不存在! !");
            e.printStackTrace();
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

修改 TestServlet , 继承 BaseServlet

java

@WebServlet("/test")
public class TestServlet extends BaseServlet {

    /**
     *  在模块对应的Servlet中只保留 业务相关代码
     *  当有请求访问到 TestServlet时, 发现没有doGet和doPost方法,就回去父类中找,从而执行BaseServlet中的
     *  doGet方法
     * */
    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("根据课程名称查询");
    }
}

版本差异(旧版 → 当前)

特性	旧版（本文编写时）	当前（Spring Boot 3.5.x）
项目结构	传统 Web 工程（webapp/WEB-INF）	Maven 标准结构 + Boot 自动配置
Servlet 包名	javax.servlet.*	jakarta.servlet.*
部署	外部 Tomcat + war	内嵌 Tomcat + jar，或 war 部署
数据访问	JDBC/JSP	MyBatis/JPA + Thymeleaf
单体边界	单体应用	仍是主流起步形态；可演进为微服务

单体项目结构是理解 Web 应用分层的基础；新项目建议直接采用 Spring Boot 3.5.x 分层结构（Controller/Service/Mapper），本文的分层思想依然适用。