Java在线学习系统个人任务说明书.doc

资源描述

中北大学课程设计说明书动态网站开发课程设计学生姓名: 佘新豹学号： 1106064237 学院: 计算机与控制工程学院专业: 网络工程题目: java的在线学习系统 ——基于B/S 指导教师：刘忠宝职称: 讲师 2014 年 01 月 08 日 1. 系统设计 1.1. 目标设计（1）实现包括Java各章节知识的学习，以及学习后的自我测试，教师用户会定期登录进行站内答疑。（2）实现多形式学习方式，包括ppt及视频教学等（3）实现Java章节学习后的自我测试，以及测试评价，根据测试后知识点进行总结。（4）实现要建立一个站内聊天室，可以让学生在站内和其他学生交流，或与教师进行交流，让老师可以为学生进行答疑。（5）实现教师用户对于各种学习资源的上传和修改。（6）实现管理员用户对于各种学习资源的管理以及教师用户和学员用户的管理。 1.2 开发和运行环境（1）IDE：eclipse （2）数据库：Mysql数据库（3）Web服务器：Tomcat7 （4）运用语言：Javascript，java，HTML，jsp 1.3 本人主要工作（1）对上传资料进行管理，对PPT文档提供下载，删除功能，对视频文件提供播放，下载，删除功能。（2）显示各个文件的大小单位为KB。（3）上传的资料分为两类，PPT文档和视频资料，创建这两个资料列表（4）提供对管理员信息包括用户名，邮箱，密码的修改功能（5）修改密码时原密码与新密码必须不同，且不能为空。 2. Java在线学习系统需求分析及概要设计 2.1 需求分析功能：包括Java各章节知识的学习，以及学习后的自我测试，教师用户会定期登录进行站内答疑。（1）Java各章节知识的多形式学习，包括ppt及视频教学等。（2）Java章节学习后的自我测试，以及测试评价，根据测试后知识点进行总结。（3）要建立一个站内聊天室，可以让学生在站内和其他学生或答疑教师进行交流。（4）教师用户对于各种学习资源的上传和修改。（5）管理员用户对于各种学习资源的管理以及教师用户和学员用户的管理。本网站包括前台学生和教师用户的登录与注册，后台管理员的登录，以及对应教师、学生、管理员的不同操作处理、在线聊天等。进入JAVA在线学习网站，教师和学生可以选择不同的角色登录本网站，如果没有注册的用户可以进行注册之后在进行登录。学生进行登录之后可以进入个人操作界面，对个人信息进行修改，对密码进行修改，进行自我评测，可以下载和查看PPT文件，播放视频文件，进行反馈的操作。教师用户进行登录之后，同样可以在个人操作界面对个人信息、个人密码进行修改，相比于学生用户，教师增加了上传资料以及删除资料的功能，权限比学生大。管理员用户是不可以注册的，进入后台登陆页面输入指定的管理员账号进入后台，同样管理员可以对自己的个人信息进行修改，在后台页面有所有注册过的的教师学生的账号信息，管理员可以对这些账号进行删除和更新等操作，同时还可以对文件进行更新等操作。在前台首页，有ＪＡＶＡ各章节的知识的学习，还有一个聊天室的模块，学生和教师都可以进入聊天室在线讨论问题，实现在线学习交流的功能。 2.2 概要设计功能模块图：修改功能修改邮箱修改密码修改用户名下载删除功能播放功能删除视频资料删除 PPT 文档在线视频下载视频资料下载 PPT文档用例图： E--R实例关系图：（一）前台注册和登陆功能：只有注册用户才能够进入JAVA在线学习系统；注册功能能注册教师和学生用户，无法注册管理员用户，管理员为系统提前预制的。注册需要在主页上点击注册按键，然后会进入注册页面。页面： 1.1注册页面有四个文本框，分别输入用户名，密码，确认密码，邮箱，一个单选框，选择学生还是教师，还有一个注册按钮，输入完信息之后点击注册按钮，会进行验证，用户名长度是否符合规定，2次密码输入是否一致，邮箱格式是否正确，如果所有格式都正确的话会跳转到登录页面进行登陆2，否则会提示各种规范要求，提醒你输入符合要求的格式。 1.2登陆页面有2个文本框，输入用户名和密码，选择框学生还是教师进行登陆，如果数据库没有该帐号则自动跳转到当前页面直到输入正确的帐号为止，点击登陆跳转到JAVA在线学习系统页面（二）前台用户操作功能学生和教师都可以对自己的个人信息及密码进行修改更新。前台的页面是用一个整体的框架实现，点击个人操作，出现个人操作的列表，用户个人操作包括个人信息，修改密码，自我测试，资料下载，反馈建议，点击不同的操作跳转到不同的页面进行操作，实现不同的功能 2.1 用户信息管理功能学生教师点击个人信息进入到信息界面，界面显示用户名和密码，刚开始是不能修改的，点击修改按钮就可以第个人信息进行修改，同样，修改的信息必须符合要求，否则会出现规范提示。修改完成之后点击提交按钮就把当前的修改信息提交到数据库中，即完成了用户信息管理的功能。 2.2 用户密码修改功能学生和教师都可以对自己的密码进行修改，点击密码修改进入到密码修改页面，包括3个文本框，分别是原密码，新密码，确认密码，一个修改按钮，一个重置按钮。同样，密码的格式必须符合要求，新密码和确认密码必须相同，否则会提示各种规范要求，直到正确为止，然后点击修改按钮就跳转到登陆页面，即完成了密码修改的功能。 2.3资料下载上传、视频资料播放功能学生和教师都可以对ppt资料进行下载，对视频文件进行播放和下载功能。以学生为例，点击资料下载跳转到资料列表页面，出现2个列表框，视频资料获取对应的文件名称，文件大小，以及有播放和下载的链接，点击播放和下载出现相应的提示进行播放和下载，而ppt资料只有一个下载功能。如果用户是老师的话还可以对视频和ppt资料进行删除和上传的操作。 2.4自我测试学生学习完JAVA各章节后，可以点击自我测试进行自我评测 2.5用户反馈功能学生点击用户反馈之后，跳转到反馈界面，显示文本框和文本域，分别输入标题和内容，点击提交实现反馈。（三）聊天室功能学生和教师点击聊天室进入聊天室，跳转到聊天室界面，左边显示在线人物列表，右边显示聊天内容，正下方则是一个输入框，用户输入信息后点击发送按钮，把信息显示在聊天内容框，并且对应自己的用户名，不同的用户的聊天内容对应自己的用户名显示在聊天信息框里面，这样就实现了聊天功能。用户点击退出时，聊天信息框会提示该用户已下线，还有，可以对聊天信息进行清屏。（四）后台管理员管理功能点击后台登陆进行管理员登陆，进入到后台管理员管理界面。同样后台页面是一个整体框架实现的，左册显示管理员的各种操作，包括学生信息（学生列表、添加学生、查询学生），教师信息（教师列表、添加教师、查询教师），管理员信息（管理员列表、添加管理员、查询管理员），资料管理（ppt资料列表、视频资料列表），个人信息（个人信息、修改密码）。点击不同的操作跳转到不同界面进行操作，对各种信息进行总体的操作。 3． Java在线学习系统详细设计资料管理页面下的PPT列表包含下载和删除功能 <script type="text/javascript"> $(function(){ var tr = document.getElementsByTagName("tr"); for(var i=1;i<tr.length;i++) { if(i%2==0) { $(tr[i]).addClass("bg-color"); } } $(".info").hover(function(){ $(this).attr("style","background:#2d84c6"); }, function(){ $(this).removeAttr("style"); }); }) -----实现奇数行和偶数行背景颜色不同 function del() { if(confirm("确定要删除吗？")) { return true; } return false; } </script> <div id="content"> <div id="con"> <table width="90%" cellspacing="0" cellpadding="0" border="0" align="center"> <tr class="title"> <th colspan="4">PPt文件列表</th> </tr> <tr class="info"> <th>文件名</th><th>文件大小</th><th>下载</th><th>删除</th> </tr> <c:forEach items="${pptFileList }" var="p"> <tr class="info"> <td>${p.fileName }</td><td>${p.fileSize }</td> <td><div id="hre"><a href="downloadServlet?fileType=ppt&fileName=${p.fileName }" target="main">下载</a></div></td> <td><div id="hre"><a href="deleteFileBackServlet?fileType=ppt&fileName=${p.fileName }" onclick="return del();">删除</a></div></td> </tr> </c:forEach> </table> </div> </div> ------将下载，删除以超链接的形式从新连接到功能已经实现的servlet类中。视频列表包含对视频文件的播放，下载，删除等功能 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="<%=request.getContextPath() %>/jsp/images/main.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/swfobject.js"></script> <title>正在播放</title> <style type="text/css"> #CuPlayer{ margin-left:120px; } </style> </head> <body> <div id="header"> <div id="bg"><span id="title">正在播放</span></div> </div> <input type="hidden" id="filePath" value="${param.filePath }"/> <input id="path" type="hidden" value="<%=request.getContextPath() %>"/> <div id="content"> <div id="con"> <div class="video" id="CuPlayer"> <strong> 提示：您的Flash Player版本过低，请进行网页播放器升级！ </strong> </div> <script type="text/javascript"> var so = new SWFObject($("#path").val() + "/foreground/video/CuPlayerMiniV4.swf","CuPlayerV4","645","430","9","#000000"); so.addParam("allowfullscreen","true"); so.addParam("allowscriptaccess","always"); so.addParam("wmode","opaque"); so.addParam("quality","high"); so.addParam("salign","lt"); so.addVariable("CuPlayerSetFile",$("#path").val() + "/foreground/video/CuPlayerSetFile.xml"); //播放器配置文件地址,例SetFile.xml so.addVariable("CuPlayerFile",$("#filePath").val()); //视频文件地址 so.addVariable("CuPlayerImage",$("#path").val() + "/foreground/video/images/start.jpg");//视频略缩图,本图片文件必须正确 so.addVariable("CuPlayerWidth","645"); //视频宽度 so.addVariable("CuPlayerHeight","430"); //视频高度 so.addVariable("CuPlayerAutoPlay","yes"); //是否自动播放 so.write("CuPlayer"); </script> </div> </div> </body> -------通过jsp实现对播放器长宽的指定，及文件路径的提取，具体实现同样通过已实现的servlet类 <form action="<%=request.getContextPath() %>/updateInfoBackServlet" method="post"> <table width="90%" cellspacing="0" cellpadding="0" border="0" align="center"> <tr class="title"> <th colspan="2">个人信息</th> </tr> <tr> <td id="txt">用户名：</td> <td id="txt1"> <input class="input" style="border-style:none;" readonly="readonly" type="text" name="username" value="${manager.username }"/> <input type="hidden" name="method" value="updatePersonInfo"/> </td> </tr> <tr > <td id="txt">邮箱：</td> <td id="txt1"> <input class="input" style="border-style:none;" readonly="readonly" type="text" name="email" value="${manager.email }"/> </td> </tr> <tr > <td colspan="2"> <input id="sub" type="submit" value="提交"/> <input id="reset" type="button" value="修改"/> </td> </tr> </table> </form> -----实现对用户名邮箱的修改 <script type="text/javascript"> $(function(){ var tr = document.getElementsByTagName("tr"); for(var i=1;i<tr.length;i++) { if(i%2==0) { $(tr[i]).attr("style","background:#f2f2f2;"); } } }); </script> </head> <body> <div id="header"> <div id="bg"><span id="title">修改密码</span></div> </div> <div id="content"> <div id="con"> <form action="<%=request.getContextPath() %>/updateInfoBackServlet" method="post"> <table width="90%" cellspacing="0" cellpadding="0" border="0"> <tr class="title"> <th colspan="2">修改密码</th> </tr> <tr><td id="txt">原密码：</td><td id="txt1"><input type="password" name="old_passwd"/>${old_passError }</td> </tr> <tr> <td id="txt">新密码：</td> <td id="txt1"><input type="password" name="password"/>${passError } <input type="hidden" name="method" value="updatePersonPass"/> </td> </tr> <tr> <td id="txt">再次输入密码：</td><td id="txt1"><input type="password" name="repassword"/>${passError }</td> </tr> <tr > <td colspan="2"><input id="sub" type="submit" value="修改"/> <input id="reset" type="reset" value="重置"/></td> </tr> </table> </form> </div> </div> </body> -----实现对密码的修改，密码不能为空，且新密码不能与原密码相同 4．个人体会通过本次课程设计，对Java有了从理论的了解到实际体验，在这次的任务实践过程中，也遇到了很多难题，通过自己查文档，找资料，使得自己独立解决问题的能力，在团队的任务分配，讨论等过程中，使自己明白了，一个大的项目，不是一个人能完成的，一个完善的在线学习系统，离不开团队各个成员的共同努力，相互协作。同时，这次课程设计也存在不少的瑕疵，大体框架虽然实现了，但很多细节也存在漏洞，如果具体当成一个工程项目去使用，可能还有较大的差距，同时在以后的学习中，加强对细节知识的掌握，力争做到精益求精！

展开阅读全文