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

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS MySQL,高可用系列 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

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
18天前
|
存储 SQL 关系型数据库
Mysql高可用架构方案
本文阐述了Mysql高可用架构方案,介绍了 主从模式,MHA模式,MMM模式,MGR模式 方案的实现方式,没有哪个方案是完美的,开发人员在选择何种方案应用到项目中也没有标准答案,合适的才是最好的。
88 3
Mysql高可用架构方案
|
19天前
|
存储 前端开发 调度
Flux 与传统的 MVC 架构模式区别
Flux是一种用于构建用户界面的架构模式,与传统的MVC架构不同,它采用单向数据流,通过Dispatcher统一管理数据的分发,Store负责存储数据和业务逻辑,View只负责展示数据,使得应用状态更加可预测和易于维护。
|
1月前
|
监控 关系型数据库 MySQL
深入了解MySQL主从复制:构建高效稳定的数据同步架构
深入了解MySQL主从复制:构建高效稳定的数据同步架构
125 1
|
2月前
|
NoSQL 关系型数据库 MySQL
微服务架构下的数据库选择:MySQL、PostgreSQL 还是 NoSQL?
在微服务架构中,数据库的选择至关重要。不同类型的数据库适用于不同的需求和场景。在本文章中,我们将深入探讨传统的关系型数据库(如 MySQL 和 PostgreSQL)与现代 NoSQL 数据库的优劣势,并分析在微服务架构下的最佳实践。
|
3月前
|
设计模式 前端开发 数据库
哇塞!Rails 的 MVC 架构也太牛了吧!快来看看这令人惊叹的编程魔法,开启新世界大门!
【8月更文挑战第31天】《Rails中的MVC架构解析》介绍了Ruby on Rails框架核心的MVC设计模式,通过模型(Model)、视图(View)和控制器(Controller)三部分分离应用逻辑,利用Active Record进行数据库操作,ERB模板渲染视图,以及控制器处理用户请求与业务逻辑,使代码更易维护和扩展,提升团队开发效率。
70 0
|
14天前
|
SQL 存储 缓存
【赵渝强老师】MySQL的体系架构
本文介绍了MySQL的体系架构,包括Server层的7个主要组件(Connectors、Connection Pool、Management Service & Utilities、SQL Interface、Parser、Optimizer、Query Caches & Buffers)及其作用,以及存储引擎层的支持情况,重点介绍了InnoDB存储引擎。文中还提供了相关图片和视频讲解。
【赵渝强老师】MySQL的体系架构
|
19天前
|
存储 前端开发 数据可视化
在实际项目中,如何选择使用 Flux 架构或传统的 MVC 架构
在实际项目中选择使用Flux架构或传统MVC架构时,需考虑项目复杂度、团队熟悉度和性能需求。Flux适合大型、高并发应用,MVC则适用于中小型、逻辑简单的项目。
|
17天前
|
设计模式 前端开发 Java
javaweb中MVC讲解!
JavaWeb MVC是一种设计模式,用于将Web应用的模型(Model)、视图(View)和控制器(Controller)分离,以实现职责解耦。模型负责数据管理和业务逻辑,视图负责展示数据,控制器负责处理用户请求并协调模型和视图。三层架构则将应用分为表现层、业务逻辑层和数据访问层,每层各司其职,提高系统的灵活性和可维护性。MVC主要应用于表现层,而三层架构则更侧重于整体系统结构。两者可以共存,共同提升项目的开发效率和质量。
27 1
|
2月前
|
存储 前端开发 Java
JavaWeb基础6——Request,Response,JSP&MVC
Request继承体系、获取请求头行体的方法、IDEA使用模板创建Servlet、请求参数中文乱码解决、请求转发、Respones重定向、Response响应字节字符数据、JSP、EL 表达式、JSTL标签、MVC模式和三层架构
JavaWeb基础6——Request,Response,JSP&MVC
|
2月前
|
设计模式 前端开发 数据库
理解mvc架构
mvc架构
31 4
下一篇
无影云桌面