JavaWeb+MySQL+MVC三层架构实现课程管理系统

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
云数据库 RDS PostgreSQL,高可用系列 2核4GB
简介: JavaWeb+MySQL+MVC三层架构实现课程管理系统

JavaWeb+MySQL实现课程管理系统

Hello,大家好,本周博主为大家带来一个简单的基于JavaWeb的课程管理系统,内容详细,好了,下面步入正题

开发环境

  • jdk1.8
  • mysql5.7
技术栈:

后端:JavaWeb+MySQL

前端:bootstrap+jsp

数据表

category分类表:

CREATE TABLE `category` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '分类id',
  `cat_name` varchar(20) NOT NULL COMMENT '分类名称',
  PRIMARY KEY (`id`)
) 

course课程表:

CREATE TABLE `course` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '课程id',
  `course_name` varchar(20) NOT NULL COMMENT '课程名称',
  `cat_id` int(11) NOT NULL COMMENT '所属分类的id',
  `lesson_nums` int(11) DEFAULT NULL COMMENT '课程数量',
  `price` decimal(7,2) DEFAULT NULL COMMENT '课程价格',
  `cover_img` varchar(255) DEFAULT NULL COMMENT '课程封面图',
  `buy_count` int(11) DEFAULT NULL COMMENT '课程购买的数量',
  `view_count` int(11) DEFAULT NULL COMMENT '查看课程的数量',
  `status` int(11) DEFAULT NULL COMMENT '课程状态:0:下架,1:上架',
  PRIMARY KEY (`id`)
)

项目简介

课程管理系统,可对课程分类,对课程进行增删改查操作,课程支持上传封面图,可对课程名称,价格,分类进行多条件查询,实现课程列表的分页

效果图

在这里插入图片描述

项目结构

Java源码

在这里插入图片描述

前端结构

在这里插入图片描述

核心代码

BaseServlet

该类为通用类,该类继承于HttpServlet,拦截所有请求并通过反射的方式调用方法
public class BaseServlet extends HttpServlet{
    
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 获取请求的URI路径,如果 /user/login   如果访问 /user/register
        String uri = req.getRequestURI(); 
        
        //2. 获取最后 / 后面的内容, login  register
        String methodName = uri.substring(uri.lastIndexOf("/") + 1);
        
        //3. 调用方法
        try {
            Method m = this.getClass().getMethod(methodName, HttpServletRequest.class,HttpServletResponse.class);
            m.invoke(this, req,resp);
        } catch (Exception e) {
            e.printStackTrace();
        } 
        
    }
}

RouteServlet

路由跳转类,因为所有的jsp页面都放进了/WEB-INF下,该目录下的文件只支持转发方式来访问,一是封装了跳转的方法,二是跳转时可携带数据
@WebServlet("/route/*")
public class RouteServlet extends BaseServlet{

    CourseService courseService = new CourseServiceImpl();
    CategoryService categoryService = new CategoryServiceImpl();
    
    private static final Integer PAGE_SIZE = 2;
    
    public void list(HttpServletRequest req, HttpServletResponse resp) {
        try {
            String courseName = req.getParameter("course_name");
            String cid = req.getParameter("cid");
            String min = req.getParameter("min");
            String max = req.getParameter("max");
            String strPageNumb = req.getParameter("pageNumb");
            Integer pageNumb = 1;
            if (!StringUtils.isEmpty(strPageNumb) && NumberUtils.isDigits(strPageNumb)) {
                pageNumb = Integer.valueOf(strPageNumb);
            }
            PageInfo pager = courseService.queryList(pageNumb, PAGE_SIZE, courseName, cid, min, max);
            List<Category> categoryList = categoryService.queryList();
            req.setAttribute("courseName", courseName);
            req.setAttribute("cid", cid);
            req.setAttribute("min", min);
            req.setAttribute("max", max);
            req.setAttribute("categoryList", categoryList);
            req.setAttribute("pager", pager);
            req.getRequestDispatcher("/WEB-INF/list.jsp")
            .forward(req, resp);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    
    public void add(HttpServletRequest req, HttpServletResponse resp) {
        try {
            List<Category> categoryList = categoryService.queryList();
            req.setAttribute("categoryList", categoryList);
            req.getRequestDispatcher("/WEB-INF/add.jsp")
            .forward(req, resp);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    
    
    public void edit(HttpServletRequest req, HttpServletResponse resp) {
        try {
            String id = req.getParameter("id");
            Course course = courseService.getById(id);
            List<Category> categoryList = categoryService.queryList();
            req.setAttribute("categoryList", categoryList);
            req.setAttribute("course", course);
            req.getRequestDispatcher("/WEB-INF/edit.jsp")
            .forward(req, resp);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}

FileUploadUtils

文件工具上传类,该类封装了上传文件方法
public class FileUploadUtils extends HttpServlet{

    /**
     * @param basePath  用户指定的上传目录
     * @return  返回上传之后的文件名称
     * @throws FileUploadException 
     */
    public static String upload(String basePath,HttpServletRequest req) throws Exception{
        
        
        //1. 先上传文件,并返回上传的文件名称,便于将来通过名字找到该文件
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload fileUpload = new ServletFileUpload(factory);
        
        //将request请求的内容解析成List集合 {input[type=file],input[type=text],}
        List<FileItem> list = fileUpload.parseRequest(req);
        
        String dbpath = "";
        for(FileItem item:list){            
            if(item.isFormField()){
                //普通的文本框: <input type="text" name="username" value="张三丰">        
                String fieldName = item.getFieldName();        //获取字段名 username\route_id
                String fieldValue = item.getString("UTF-8");//获取字段值 张三丰 
                req.setAttribute(fieldName, fieldValue);  
            }else{
                //文件上传框  <input type="file" class="form-control" name="img_src">
                //1. 获取文件输入流
                InputStream input = item.getInputStream();
                
                if(input.available() > 0){
                    //2. 获取文件输出流
                    //String basePath = "D:/uploads/";
                    
                    //确定目标文件名
                    String destFileName = UUID.randomUUID().toString().replace("-", "");
                    
                    //确定目标文件后缀:.png  .jpg  .gif 
                    String originName = item.getName();
                    String suffix = originName.substring(originName.lastIndexOf("."));
                    
                    //保存到数据库中的相对路径
                    dbpath = destFileName+suffix;
                    
                    //如果当前文件的父级目录不存在,则创建
                    File destFile = new File(basePath+dbpath);
                    if(!destFile.getParentFile().isDirectory()){
                        destFile.getParentFile().mkdirs();
                    }
                    //创建文件输出流
                    FileOutputStream output = new FileOutputStream(destFile);
                    
                    //3. 开始读写(上传、拷贝)
                    byte[] arr = new byte[1024];
                    int res = 0;
                    while( (res = input.read(arr)) > 0){
                        output.write(arr, 0, res);
                    }
                    
                    //关闭资源
                    input.close();
                    output.close();
                }
                
            }
        }
        
        return dbpath; // 返回文件名称
    }
}

前端部分代码

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> 
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>    
<!DOCTYPE html>
<html lang="en">
<head>
    <%
        request.setAttribute("APP_PATH", request.getContextPath());
        
    %>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 相对路径,相对于当前访问的文件的位置开始查找 -->
    <link rel="stylesheet" href="${APP_PATH}/static/admin/css/bootstrap.min.css">
    <style>
       .cus-container{
           width: 1368px;
       }
       .success th,table td{text-align:center;}
    </style>
</head>
<body>
    <div class="container cus-container">
        
        <h3 class="text-center" style="font-weight:bold">课程列表</h3>
        
          <div>
            <!-- 搜索框div -->
            <div id="search-user" style="float: left; margin: 10px 0px;">
                <form class="form-inline" action="${APP_PATH }/route/list" method="post" >
                    <div class="form-group">
                        <label for="course_name">课程名称</label>
                        <input type="text" name="course_name" value="${courseName }" class="form-control" id="course_name" >
                    </div>
                    
                    <div class="form-group">
                        <label>课程分类</label>
                        <select class="form-control" name="cid">
                            <option value="">请选择</option>
                            <c:forEach items="${categoryList }" var="cat">
                                <option value="${cat.id }" ${cid == cat.id ? "selected":""}>${cat.cat_name}</option>
                            </c:forEach>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="exampleInputName2">价格:</label>
                        <input type="text" name="min" value="${min }" class="form-control" >-<input type="text" name="max" value="${max }" class="form-control" >
                        </div>
                    
                    
                   <input type="submit"  class="btn btn-default" value="查询">
                  
                </form>    
            </div>

        </div>
        
        
        <div>
            <!-- 添加、删除的按钮 -->
            <div style="float: right;margin: 10px 0px;">
                <a class="btn btn-primary" href="${APP_PATH}/route/add">添加课程</a>
            </div>
        </div>
      
       <table class="table table-bordered clearfix">
        <tr class="success"> 
            <th>课程序号</th>          
            <th>课程名称</th>
            <th>分类名称</th>            
            <th>总课时</th>
            <th>课程价格</th>
            <th>课程封面</th>
            <th>购买数量</th>
            <th>观看数量</th>
            <th>状态</th>
            <th>操作</th>
        </tr> 
        
        <c:forEach items="${pager.courseList }" var="course">
            <tr>
            <td style="vertical-align:middle;width:100px">
                        ${course.id }
                </td>
                <td style="vertical-align:middle;width:135px">
                    ${course.course_name }
                </td>
                
                <td style="vertical-align:middle;">
                    ${course.cat_name }
                </td>
                <td style="vertical-align:middle;">
                    ${course.lesson_nums }
                </td>
                <td style="vertical-align:middle;">
                    ${course.price }
                </td>
                <td style="width:200px;height:100px;vertical-align:middle;">
                    <img src="http://127.0.0.1/upload/images/${course.cover_img }" style="width:100%;height:100%">
                </td>
                <td style="vertical-align:middle;">                
                    ${course.buy_count }
                </td>
                
                <td style="vertical-align:middle;">                
                    ${course.view_count }
                </td>
                
                <td style="vertical-align:middle;">                
                    <c:if test="${course.status == 0 }">已下架</c:if>
                    <c:if test="${course.status == 1 }">已上架</c:if>
                </td>
                
                <td style="vertical-align:middle;width:135px">
                        <a class="btn btn-default btn-sm" href="${APP_PATH}/route/edit?id=${course.id}">修改</a>&nbsp;
                    <a class="btn btn-default btn-sm" href="${APP_PATH}/course/delete?id=${course.id}&cover_img=${course.cover_img}">删除</a>
                </td>
            </tr>
            
        </c:forEach>
        
      </table>

   <!-- 分页导航 -->
      <div>
          <!-- 分页导航 -->
        <nav style="float: left;">
            <ul class="pagination">
             
              <li ${pager.pageNumb == 1 ? "class='disabled'":""}>
                <a href="${APP_PATH }/route/list?pageNumb=${pager.prevPageNumb}&course_name=${courseName}&cid=${cid}&min=${min}&max=${max}" aria-label="Previous">
                  <span aria-hidden="true">上一页</span>
                </a>
              </li>
              <c:forEach begin="1" end="${pager.pageCount }" var="i">
                  <li ${pager.pageNumb == i ? "class='active'":"" }>
                      <a href="${APP_PATH }/route/list?pageNumb=${i}&course_name=${courseName}&cid=${cid}&min=${min}&max=${max}">${i}</a>
                  </li>
              </c:forEach>
             
              
              <li ${pager.pageNumb == pager.pageCount ? "class='disabled'":""}>
                <a href="${APP_PATH }/route/list?pageNumb=${pager.nextPageNumb}&course_name=${courseName}&cid=${cid}&min=${min}&max=${max}" aria-label="Previous">
                  <span aria-hidden="true">下一页</span>
                </a>
              </li>
              
              
              
            </ul>
        </nav>
        <div style="float: right;margin-top: 25px;">
            <span>共${pager.total}条记录,分${pager.pageCount}页显示</span>
        </div>
      </div>
    </div>
</body>
</html>

add.jsp

==注意:form表单需加 enctype="multipart/form-data"==
将表单设置为支持图片上传

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html>
<html lang="en">
<head>
    <%
        request.setAttribute("APP_PATH", request.getContextPath());
    %>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="${APP_PATH}/static/admin/css/bootstrap.min.css">
    <script src="${APP_PATH}/static/admin/js/jquery-2.1.0.min.js"></script>
    <script src="${APP_PATH}/static/admin/js/bootstrap.min.js"></script>

</head>
<body>

    <div class="container cus-container">
        <h3 class="text-center" style="font-weight:bold">添加课程</h3>

        <form action="${APP_PATH}/course/addHandle" method="post" 
              enctype="multipart/form-data">
            <div class="form-group">
              <label for="user">课程名称:</label>
              <input type="text" class="form-control" name="course_name">
            </div>
            
            <div class="form-group">
              <label for="user">所属分类:</label>
              <select class="form-control" name="cid">
                 <option value="0">请选择</option>
                 <c:forEach items="${categoryList }" var="cat">
                     <option value="${cat.id }">${cat.cat_name }</option>
                 </c:forEach>
              </select>
            </div>
            
            <div class="form-group">
              <label for="user">课程封面图:</label>
              <input type="file" class="form-control" name="cover_img">
            </div>
            
            <div class="form-group">
              <label for="user">课时数:</label>
              <input type="text" class="form-control" name="lesson_nums">
            </div>
            
            <div class="form-group">
              <label for="user">价格:</label>
              <input type="text" class="form-control" name="price">
            </div>
            
            <div class="form-group">
              <label for="user">状态:</label>
              <div class="radio">
                  <label>
                    <input type="radio" name="status" value=1>
                    上架
                  </label>
              </div>
              <div class="radio">
                  <label>
                    <input type="radio" name="status" value="0">
                    下架
                  </label>
              </div>
            </div>
            
            <div class="text-center">
                <input type="submit" class="btn btn-primary" value="提交">
                <button type="reset" class="btn btn-default">重置</button>   
            </div>         
          </form>
       
    </div>
</body>
</html>

结语

项目到此就结束了,对本项目感兴趣的小伙伴,可在下方链接获取完整项目

戳,获取完整项目 ---> 项目地址

提取码: hmpp

相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/mysql&nbsp;
相关文章
|
2月前
|
SQL 前端开发 关系型数据库
如何开发一套研发项目管理系统?(附架构图+流程图+代码参考)
研发项目管理系统助力企业实现需求、缺陷与变更的全流程管理,支持看板可视化、数据化决策与成本优化。系统以MVP模式快速上线,核心功能包括需求看板、缺陷闭环、自动日报及关键指标分析,助力中小企业提升交付效率与协作质量。
|
29天前
|
数据采集 机器学习/深度学习 运维
量化合约系统开发架构入门
量化合约系统核心在于数据、策略、风控与执行四大模块的协同,构建从数据到决策再到执行的闭环工作流。强调可追溯、可复现与可观测性,避免常见误区如重回测轻验证、忽视数据质量或滞后风控。初学者应以MVP为起点,结合回测框架与实时风控实践,逐步迭代。详见相关入门与实战资料。
|
2月前
|
JSON 文字识别 BI
如何开发车辆管理系统中的加油管理板块(附架构图+流程图+代码参考)
本文针对中小企业在车辆加油管理中常见的单据混乱、油卡管理困难、对账困难等问题,提出了一套完整的系统化解决方案。内容涵盖车辆管理系统(VMS)的核心功能、加油管理模块的设计要点、数据库模型、系统架构、关键业务流程、API设计与实现示例、前端展示参考(React + Antd)、开发技巧与工程化建议等。通过构建加油管理系统,企业可实现燃油费用的透明化、自动化对账、异常检测与数据分析,从而降低运营成本、提升管理效率。适合希望通过技术手段优化车辆管理的企业技术人员与管理者参考。
|
2月前
|
消息中间件 缓存 JavaScript
如何开发ERP(离散制造-MTO)系统中的生产管理板块(附架构图+流程图+代码参考)
本文详解离散制造MTO模式下的ERP生产管理模块,涵盖核心问题、系统架构、关键流程、开发技巧及数据库设计,助力企业打通计划与执行“最后一公里”,提升交付率、降低库存与浪费。
|
1月前
|
前端开发 JavaScript BI
如何开发车辆管理系统中的车务管理板块(附架构图+流程图+代码参考)
本文介绍了中小企业如何通过车务管理模块提升车辆管理效率。许多企业在管理车辆时仍依赖人工流程,导致违章处理延误、年检过期、维修费用虚高等问题频发。将这些流程数字化,可显著降低合规风险、提升维修追溯性、优化调度与资产利用率。文章详细介绍了车务管理模块的功能清单、数据模型、系统架构、API与前端设计、开发技巧与落地建议,以及实现效果与验收标准。同时提供了数据库建表SQL、后端Node.js/TypeScript代码示例与前端React表单设计参考,帮助企业快速搭建并上线系统,实现合规与成本控制的双重优化。
|
2月前
|
数据采集 运维 数据可视化
AR 运维系统与 MES、EMA、IoT 系统的融合架构与实践
AR运维系统融合IoT、EMA、MES数据,构建“感知-分析-决策-执行”闭环。通过AR终端实现设备数据可视化,实时呈现温度、工单等信息,提升运维效率与生产可靠性。(238字)
|
2月前
|
人工智能 监控 测试技术
告别只会写提示词:构建生产级LLM系统的完整架构图​
本文系统梳理了从提示词到生产级LLM产品的八大核心能力:提示词工程、上下文工程、微调、RAG、智能体开发、部署、优化与可观测性,助你构建可落地、可迭代的AI产品体系。
466 51
|
1月前
|
机器学习/深度学习 人工智能 缓存
面向边缘通用智能的多大语言模型系统:架构、信任与编排——论文阅读
本文提出面向边缘通用智能的多大语言模型(Multi-LLM)系统,通过协同架构、信任机制与动态编排,突破传统边缘AI的局限。融合合作、竞争与集成三种范式,结合模型压缩、分布式推理与上下文优化技术,实现高效、可靠、低延迟的边缘智能,推动复杂场景下的泛化与自主决策能力。
219 3
面向边缘通用智能的多大语言模型系统:架构、信任与编排——论文阅读
|
1月前
|
人工智能 自然语言处理 安全
AI助教系统:基于大模型与智能体架构的新一代教育技术引擎
AI助教系统融合大语言模型、教育知识图谱、多模态交互与智能体架构,实现精准学情诊断、个性化辅导与主动教学。支持图文语音输入,本地化部署保障隐私,重构“教、学、评、辅”全链路,推动因材施教落地,助力教育数字化转型。(238字)
|
2月前
|
消息中间件 数据采集 NoSQL
秒级行情推送系统实战:从触发、采集到入库的端到端架构
本文设计了一套秒级实时行情推送系统,涵盖触发、采集、缓冲、入库与推送五层架构,结合动态代理IP、Kafka/Redis缓冲及WebSocket推送,实现金融数据低延迟、高并发处理,适用于股票、数字货币等实时行情场景。
278 3
秒级行情推送系统实战:从触发、采集到入库的端到端架构

推荐镜像

更多