基于Web+SSM的在线课堂管理平台设计与实现

﹏ヽ暗。殇╰゛Y 2024-03-27 16:03 87阅读 0赞

目 录

1 需求分析 1  
1.1 需求来源 1  
1.2 系统功能 1  
1.3 详细功能 1  
2 概要设计 2  
2.1 系统架构 2  
2.2 系统结构设计 3  
2.3 系统流程图 4  
3 运行环境、开发语言 5  
3.1 运行环境CPU：1 核内存：2G 5  
3.2 开发语言 5  
4 详细设计 6  
4.1 程序清单 6  
4.2 数据库设计 9  
4.3 主要功能 12  
4.3.1 登录注册功能 12  
4.3.2 课程管理功能 13  
4.3.3 公告管理功能 15  
4.3.4 作业管理功能 16  
4.3.5 资源管理功能 17  
4.3.6 学生管理功能 17  
5 调试与分析 18  
6 功能测试 19  
6.1 登录注册功能测试 19  
6.2 课程管理功能测试 19  
6.3 公告管理功能测试 21  
6.4 作业管理功能测试 22  
6.5 资源管理功能测试 22  
7 结论与心得 24  
8 参考资料 25

3运行环境、开发语言  
3.1运行环境CPU：1 核内存：2G  
数据库：MySQL 5.7  
Java WEB 服务器：Tomcat 9  
服务器：阿里云轻量应用服务器  
操作系统：CentOS Linux release 7.4.1708  
3.2开发语言  
后端语言：Java SE 9  
后端框架：Spring、Struts2、Mybatis 等前端语言：HTML、CSS、JavaScript  
前端框架：ZUI、JQuery 等  
1.3详细功能  
登录注册模块：包括登录子模块和注册子模块。登录子模块的功能为：用户可输入邮箱、密码、验证码进行登录，系统可判断该用户角色，进入相应用户页面。注册子模块功能为：用户可选择角色，输入邮箱、密码等信息进行注册。  
课堂管理模块：包括教师管理课堂子模块和学生加入及删除课堂子模块。教师管理课堂子模块功能为：教师可创建一个课堂并设置课堂名，产生唯一邀请码， 教师也可删除自己创建的课堂。学生加入及删除课堂子模块功能为：通过邀请码， 学生可添加到相应的课堂中进行学习，也可退出某课堂。  
公告管理模块：包括公告管理子模块、公告查看子模块。功能管理子模块功能为：教师可发布公告、修改公告、删除公告。公告查看子模块功能为：教师和学生均可查看公告。  
作业管理模块：包括作业管理子模块、作业查看及提交子模块。作业管理子模块功能为：教师可发布作业，可查看、下载学生提交的电子作业、并提供 ZIP

打包下载功能。作业查看及提交子模块功能为：学生可以查看作业，并对电子文档作业进行提交。  
资源管理模块：包括资源上传子模块、资源下载子模块。资源上传子模块功能为：教师可上传各种类型的教学资源。资源下载子模块功能为：学生可下载各类型的教学资源。  
学生管理模块：教师可对于某个课堂所拥有的学生进行管理，可查看学生信息，删除学生。

<%@ page contentType="text/html;charset=UTF-8" %>
    <!DOCTYPE html>
    <html>
    <head>
        <title>登录</title>
    
        <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.8.1/css/zui.min.css">
        <script src="//cdn.bootcss.com/zui/1.8.1/lib/jquery/jquery.js"></script>
        <script src="//cdn.bootcss.com/zui/1.8.1/js/zui.min.js"></script>
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
        <style>
            .page {
        
                width: 100%;
                height: 100%;
                background: url("/image/login_bg.jpg") fixed no-repeat center center;
                background-size: cover;
                position: absolute;
            }
    
    
    
    
    
            .login {
        
                width: 500px;
                height: 500px;
                background-color: #ffffff;
                margin-top: 100px;
            }
    
            p, .input-control {
        
                margin-top: 30px;
            }
    
            .login p {
        
                text-align: center;
                font-size: 25px;
                font-weight: bold;
                color: #3280fc;
                margin-bottom: 50px;
                margin-top: 50px;
            }
    
            .input-control, #check_table, #submit-div {
        
                width: 70%;
                height: 60px;
                margin: 0 auto;
            }
    
            .input-control-label-left {
        
                margin-top: 5px;
            }
    
            .input-control-check {
        
                width: 100%;
            }
    
            #image {
        
                height: 40px;
                width: 120px;
                margin-bottom: 13px;
                margin-left: 10px;
            }
    
            #submit-div {
        
                text-align: center;
            }
    
            #submit {
        
                width: 330px;
                margin-top: 30px;
            }
    
            #register-p {
        
                color: black;
                font-size: 15px;
            }
    
        </style>
    </head>
    
    <body>
    
    
    <div class="page">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand navbar-font"><strong class="nav-p">我的课堂</strong> </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
    
                    </ul>
    
                    <ul class="nav navbar-nav navbar-right">
                        <li></li>
                    </ul>
                </div>
            </div>
        </nav>
    
    
        <div class="login container">
            <p>我的课堂</p>
            <div class="input-control has-label-left has-icon-right">
                <input id="inputEmail" type="email" class="form-control input-lg" placeholder="">
                <label for="inputEmail" class="input-control-label-left">邮箱:</label>
            </div>
    
            <div class="input-control has-label-left has-label-right">
                <input id="inputPassword" type="password" class="form-control input-lg" placeholder="">
                <label for="inputPassword" class="input-control-label-left">密码:</label>
            </div>
    
            <table id="check_table">
                <tr>
                    <td>
                        <div class="input-control has-label-left has-label-right input-control-check">
                            <input id="verificationCode" type="text" class="form-control input-lg" placeholder="">
                            <label for="verificationCode" class="input-control-label-left">验证码:</label>
                        </div>
                    </td>
                    <td>
                        <img src="/verificationCode" alt="验证码" id="image" onclick="reload()">
                    </td>
                </tr>
            </table>
    
            <div id="submit-div">
                <input class="btn btn-primary" type="submit" value="登陆" id="submit" onclick="submit()">
            </div>
    
            <p id="register-p">没有帐号？<a href="/toRegister">注册</a></p>
    
        </div>
    </div>
    
    
    <script>
        $(function () {
        
            $(document).keyup(function (e) {
        
                if (e.keyCode === 13) {
        
                    submit();
                }
            });
    
        });
    
        function reload() {
        
            $('#image').attr("src", "/verificationCode?date=" + new Date());
            $('#verificationCode').val("");
        }
    
        function submit() {
        
            var email = $('#inputEmail');
            var pass = $('#inputPassword');
            var verificationCode = $('#verificationCode');
    
            if (email.val() === '') {
        
                new $.zui.Messager('email为空', {
        
                    type: 'danger'
                }).show();
                return;
            }
            if (pass.val() === '') {
        
                new $.zui.Messager('密码为空', {
        
                    type: 'danger'
                }).show();
                return;
            }
            if (verificationCode.val() === '') {
        
                new $.zui.Messager('验证码为空', {
        
                    type: 'danger'
                }).show();
    
                return;
            }
    
            $.ajax({
        
                type: "POST",
                url: "/login",
                data: {
        email: email.val(), password: pass.val(), verificationCode: verificationCode.val()},
                dataType: "json",
    
                success: function (data) {
        
                    if (data.status === 0) {
        
                        if (data.data.user_role === 't') {
        
                            location.href = "/teacher/showCourseList.action";
                        } else if (data.data.user_role === 's') {
        
                            location.href = "/student/showCourseList.action";
                        }
                    } else {
        
    
                        new $.zui.Messager(data.msg, {
        
                            type: 'danger'
                        }).show();
    
                        reload();
                    }
                },
    
                error: function () {
        
                    new $.zui.Messager('请求失败', {
        
                        type: 'danger'
                    }).show();
                }
    
            });
        }
    
    
    </script>
    
    </body>
    
    </html>

![在这里插入图片描述][792744db01354cbd8f7f09707ee42e32.png_pic_center]  
![在这里插入图片描述][4253c5df473840e4b0d4dfc4277637fc.png_pic_center]  
![在这里插入图片描述][ab61e60c82984b33a2fedc5760058c55.png_pic_center]  
![在这里插入图片描述][4369a142d0004bbe9eefdc6616eab4c8.png_pic_center]  
![在这里插入图片描述][f01e3c3e649847ca950cba8e0438b31c.png_pic_center]  
![在这里插入图片描述][6e10a92a29604748ac862e1dd4ed16cd.png_pic_center]  
![在这里插入图片描述][f8933602c477488cb35a23d9d82b383c.png_pic_center]  
![在这里插入图片描述][d940ca639dc54df68339ac348d5a9349.png_pic_center]  
![在这里插入图片描述][3fb6df8421fe47fd9f4237f2ae332e2b.png_pic_center]  
![在这里插入图片描述][9166805c068e43f484ac99ea88e92ccd.png_pic_center]  
![在这里插入图片描述][be95bd75ebff45a0a2caf85a5d84a757.png_pic_center]  
![在这里插入图片描述][7cdfd9e8130a4f2e92f81b59e4d1204e.png_pic_center]  
![在这里插入图片描述][7ebe5da5e4124b0b97957eb45e40c950.png_pic_center]  
![在这里插入图片描述][2630b1a28f634a828db59c3f0e2793b8.png_pic_center]  
![在这里插入图片描述][2eae204ec2bb4ce8b7f7c01b8e97633e.png_pic_center]  
![在这里插入图片描述][97b108168b424f99a620befe0b8d33b8.png_pic_center]  
![在这里插入图片描述][e785b877d1e947a884594f78f908eac1.png_pic_center]  
![在这里插入图片描述][e20d3c2fe8e9477f8ee06fa396a77931.png_pic_center]  
![在这里插入图片描述][eac65eea2db14efabb00b702d5d57284.png_pic_center]  
![在这里插入图片描述][d29be43cab6746ebbb8b99cfce279381.png_pic_center]  
![在这里插入图片描述][bc3be97398e441dba7c5211a00645cdf.png_pic_center]  
![在这里插入图片描述][8c0d65777d5a441a90a84d4de6108f76.png_pic_center]  
![在这里插入图片描述][3b565585dbdd40998f3eab4de871b4ee.png_pic_center]  
![在这里插入图片描述][3a22ebf8b8f042d48d918e1cc57d03c5.png_pic_center]

[792744db01354cbd8f7f09707ee42e32.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ea72acb246554e87b8ce38d11e3336c1.png
[4253c5df473840e4b0d4dfc4277637fc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/57735fe31aa646f58c7e1b65e865f2fb.png
[ab61e60c82984b33a2fedc5760058c55.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/622dd29304b14fa18f64476172139baf.png
[4369a142d0004bbe9eefdc6616eab4c8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/d6284ced08e645d59b31b133f97be4bb.png
[f01e3c3e649847ca950cba8e0438b31c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/90da94b50dcf402ca76207a19e85cd55.png
[6e10a92a29604748ac862e1dd4ed16cd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/437102c6b07448928e10ba8d138d26aa.png
[f8933602c477488cb35a23d9d82b383c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/6d867c2bcd874f5e8c294f321d77559d.png
[d940ca639dc54df68339ac348d5a9349.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/63447b78f81447bd99399221770e7751.png
[3fb6df8421fe47fd9f4237f2ae332e2b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a78d04ffb91a467c93f6fc0df2ad9f35.png
[9166805c068e43f484ac99ea88e92ccd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/798cd144a2f64276ae27ecb5402965d4.png
[be95bd75ebff45a0a2caf85a5d84a757.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5354a9d05fc6483cbeca998a6ffc19fd.png
[7cdfd9e8130a4f2e92f81b59e4d1204e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/cf1019ed00734c48a364918a42741d83.png
[7ebe5da5e4124b0b97957eb45e40c950.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/7406db9fad724662a7a7fc3e59da912c.png
[2630b1a28f634a828db59c3f0e2793b8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1412ccd03be54dffabb1805a18a1363f.png
[2eae204ec2bb4ce8b7f7c01b8e97633e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2986e84d62284e59a1cb18ac46fe2d8e.png
[97b108168b424f99a620befe0b8d33b8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9428fb3a7f61455bbf662f3c78498e0b.png
[e785b877d1e947a884594f78f908eac1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/6d39df8db5504164836c82b3f6a77d03.png
[e20d3c2fe8e9477f8ee06fa396a77931.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8da9c09990ad4fc08d3aba8793becc3c.png
[eac65eea2db14efabb00b702d5d57284.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/529492a0c00b4b95b92b13999b5cf0cc.png
[d29be43cab6746ebbb8b99cfce279381.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e9fd3a53f0024b33935613b34be4bf0e.png
[bc3be97398e441dba7c5211a00645cdf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/d6bf499cb78e4b679bee8d5088b7a28d.png
[8c0d65777d5a441a90a84d4de6108f76.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e9abc2b416ee4617b972438739aec388.png
[3b565585dbdd40998f3eab4de871b4ee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c951fb6e58ee45c6951d06c5a368a761.png
[3a22ebf8b8f042d48d918e1cc57d03c5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c95dc2abe02b45a6bd4cc713dc31a9b0.png