【《Web前端技术在线学习网站设计》11000字（论文）】

系统的实现老师功能实现4.1.1登录老师用户想要进行不同权限的操作，就必须进行登录，当登录成功后就能够进行系统功能的操作了。登录界面如图所示。图4.1登录界面核心代码：@Action(value="add2HomeworkStudent",results={@Result(name="add2",location="/ahtml/addHomeworkStudent.jsp")}) publicStringadd2(){ Homeworkitem=service.get(Homework.class,uid); putRequestValue("modifybean",item); return"add2"; } @Action(value="getHomeworkStudent",results={@Result(name="getOne",location="/ahtml/modifyHomeworkStudent.jsp")}) publicStringget(){ try{ HomeworkStudenttemp=(HomeworkStudent)service.get(HomeworkStudent.class,uid); putRequestValue("modifybean",temp); return"getOne"; }catch(Exceptione){ e.printStackTrace(); returnERROR; } }4.1.2后台管理主界面老师想要进行不同权限的操作，就必须进行登录，当老师登录成功后就能够进行系统功能的操作了，包括对课程、班级、视频管理等信息的管理。后台管理主界面如图所示。图4.2后台管理主界面核心代码：@Action(value="getHomeworkStudentAll",results={@Result(name="getOne",location="/ahtml/getHomeworkStudentAll.jsp")}) publicStringgetHomeworkStudentAll(){ try{ HomeworkStudenttemp=(HomeworkStudent)service.get(HomeworkStudent.class,uid); putRequestValue("modifybean",temp); return"getOne"; }catch(Exceptione){ e.printStackTrace(); returnERROR; } }4.1.3视频管理当老师用户登录之后就可以对页面的功能做操作，点击视频管理，就能够管理视频信息，可以添加、搜索、删除视频信息。视频管理界面如图所示。图4.3视频管理界面核心代码:@Action(value="addCourseVideoFav") publicStringadd(){ try{ service.add(bean); MessageUtil.addRelMessage(getHttpServletRequest(),"添加成功.","mainqueryCourseVideoFav"); returnSUCCESS; }catch(Exceptione){ e.printStackTrace(); MessageUtil.addMessage(getRequest(),"添加失败"); returnERROR; } } @Action(value="updateCourseVideoFav") publicStringupdate(){ try{ service.update(bean); MessageUtil.addMessage(getHttpServletRequest(),"更新成功."); returnSUCCESS; }catch(Exceptione){ e.printStackTrace(); MessageUtil.addMessage(getRequest(),"更新失败"); returnERROR; } }4.1.4测试管理当老师用户登录之后就可以对页面的功能做操作，点击测试管理，就能够管理测试信息，可以添加、修改、删除测试信息。测试管理界面如图所示。图4.4测试管理界面核心代码:@Action(value="add2ClazzQuestion",results={@Result(name="add2",location="/ahtml/addClazzQuestion.jsp")}) publicStringadd2(){ putRequestValue("list",service.queryByHQL("fromClazzwhereteacher.id=?orderbyiddesc",getTeacher().getId())); return"add2"; } @Action(value="getClazzQuestion",results={@Result(name="getOne",location="/ahtml/modifyClazzQuestion.jsp")}) publicStringget(){ try{ ClazzQuestiontemp=(ClazzQuestion)service.get(ClazzQuestion.class,uid); putRequestValue("modifybean",temp); return"getOne"; }catch(Exceptione){ e.printStackTrace(); returnERROR; } }4.1.5提问管理界面当老师用户登录之后就可以对页面的功能做操作，点击提问管理，就能够查看提问列表，老师能对这些信息做出添加、修改或删除的操作。管理提问管理界面如图所示。图4.5提问管理界面核心代码:@Action(value="getClazzQuestionSelf",results={@Result(name="getOne",location="/ahtml/getClazzQuestionSelf.jsp")}) publicStringgetClazzQuestionSelf(){ try{ ClazzQuestiontemp=(ClazzQuestion)service.get(ClazzQuestion.class,uid); putRequestValue("modifybean",temp); return"getOne"; }catch(Exceptione){ e.printStackTrace(); returnERROR; } } @SuppressWarnings("unchecked") @Action(value="addClazzQuestion") publicStringadd(){ try{ List<SimpleUser>list=service.queryByHQL("fromSimpleUserwhereidin(selectstudent.idfromClazzStudentwhereclazz.id=?)", bean.getClazz().getId()); if(list.size()==0){ MessageUtil.addMessage(getRequest(),"所选班级没有学生,不能提问"); returnERROR; } Randomran=newRandom(); bean.setStudent(list.get(ran.nextInt(list.size()))); bean.setAddDate(DateUtil.getCurrentTime(DateUtil.FULL)); service.add(bean); MessageUtil.addRelMessage(getHttpServletRequest(),"添加成功.","mainqueryClazzQuestion"); returnSUCCESS; }catch(Exceptione){ e.printStackTrace(); MessageUtil.addMessage(getRequest(),"添加失败"); returnERROR; } }学生功能模块的实现4.2.1课程信息界面学生用户想要进行不同权限的操作，就必须进行登录，当用户登录成功后就能够进行系统功能的操作了。点击首页信息界面，即可课程的信息。课程信息界面如图所示。图4.6课程信息界面核心代码:@Action(value="add2CourseVideo",results={@Result(name="add2",location="/ahtml/addCourseVideo.jsp")}) publicStringadd2(){ putRequestValue("list",service.queryByHQL("fromClazzwhereteacher.id=?orderbyiddesc",getTeacher().getId())); return"add2"; } @Action(value="getCourseVideo",results={@Result(name="getOne",location="/ahtml/modifyCourseVideo.jsp")}) publicStringget(){ try{ putRequestValue("list",service.queryByHQL("fromClazzwhereteacher.id=?orderbyiddesc",getTeacher().getId())); CourseVideotemp=(CourseVideo)service.get(CourseVideo.class,uid); putRequestValue("modifybean",temp); return"getOne"; }catch(Exceptione){ e.printStackTrace(); returnERROR; } } @Action(value="addCourseVideo") publicStringadd(){ try{ bean.setAddDate(DateUtil.getCurrentTime()); bean.setZancount(0); bean.setViewcount(0); bean.setStatus("审核通过"); service.add(bean); MessageUtil.addRelMessage(getHttpServletRequest(),"添加成功.","mainqueryCourseVideo"); returnSUCCESS; }catch(Exceptione){ e.printStackTrace(); MessageUtil.addMessage(getRequest(),"添加失败"); returnERROR; } }4.2.2课程详情界面学生用户在课程详情界面，可以查询课程的具体信息可以进行收藏课程和计入班级操作。课程详情界面如图所示。图4.7课程详情界面核心代码:@Action(value="updateCourseVideo") publicStringupdate(){ try{ bean.setAddDate(DateUtil.getCurrentTime()); service.update(bean); MessageUtil.addMessage(getHttpServletRequest(),"更新成功."); returnSUCCESS; }catch(Exceptione){ e.printStackTrace(); MessageUtil.addMessage(getRequest(),"更新失败"); returnERROR; } } @Action(value="deleteCourseVideo") publicStringdelete(){ try{ service.delete(CourseVideo.class,ids); MessageUtil.addMessage(getHttpServletRequest(),"操作成功."); //MessageUtil.addRelMessage(getHttpServletRequest(),"操作成功.","mainqueryCourseVideo"); returnSUCCESS; }catch(Exceptione){ e.printStackTrace(); MessageUtil.addMessage(getRequest(),"操作失败"); returnERROR; }系统测试测试的定义：程序测试一般是程序员在开发完成一个系统之后，为了使系统在后期运作时，将预期功能完整实现，不会出现因代码或某些因粗心或遗忘问题导致的错误，使得系统的运行出现一些功能上的错误，或是缺乏实现某些预期制定的目标功能，因此需要对系统进行一系列方法的检测，找出程序中出现的错误，从而不断改善，加强系统的实用性的一个过程。其目的以及任务有以下内容：目的：在程序中找到漏洞和错误，并且改正这些存在的漏洞和错误；任务：运行程序，查看程序与预期是否相符，是否出现了一些错误事项，然后解决这些错误，使程序的运行吻合预期，避免在正常投入使用时发生一些不必要的错误[9]。系统测试方法在本系统的测试中，主要进行了功能测试和结构测试。进行功能测试，首先要对系统的功能结构明确后，使用黑盒测试的方法，验证系统功能是否如期实现。而确定能否实现预期的依据是忽略系统内部的结构特性，看看系统表面上的功能是不是正常运行，接收到的数据和呈现的信息与发送的数据是不是能够对应上，如果对应上，就说明功能实现良好。结构测试就是对系统内部的运作情况的检测，明确系统内部的各个程序的进行，并且需要将系统程序在逻辑驱动器这样的软件上运行起来，查看所运行的程序在流程的实现上是否如预期设定那样的流程进行，会不会产生偏差，不管运行的结果，功能是不是正常实现。符合预期，说明结构测试的结果是良好的。功能测试5.2.1登录测试步骤进入登录页面。输入账号和密码。点击登录。具体测试登录情况如下表5.1所示。表5.1登录测试用例编号用例标题用户名输入密码输入预期结果测试结果测试人T1【1】正常登录2017215177123456登录成功成功李缘一T2【2】错误登录2017215177123提示账号或密码错误成功李缘一T3【3】为空登录不输入不输入文本框标红成功李缘一5.2.2注册测试步骤进入注册页面。输入账号、密码。点击注册。具体测试注册情况如下表5.2所示。表5.2注册测试用例编号用例标题用户名输入密码输入预期结果测试结果测试人S1【1】正常注册2017215177123456注册成功成功李缘一S2【2】为空注册不输入不输入文本框标红成功李缘一S3【3】重复注册2017215177123456提示不能重复成功李缘一5.2.3添加课程测试步骤进入课程添加页面。选择班级，输入课程名称，填写课程简介，上传视频、资料和图片。点击保存。具体添加测试情况如下表5.3所示。表5.3课程测试用例编号用例标题输入测试预期结果测试结果测试人K1【1】正常添加输入课程名称123，填写简介123，上传视频资料和图片并保存保存成功成功李缘一K2【2】为空添加只输入课程名称123并保存提示不能为空成功李缘一K3【3】为空添加只输入简介123并保存提示不能为空成功李缘一K4【4】为空添加不输入保存提示不能为空成功李缘一5.2.4添加题目测试步骤进入题目添加页面。输入题目、答案和分值。点击保存。具体添加题目测试情况如下表5.4所示。表5.4题目测试用例编号用例标题输入测试预期结果测试结果测试人H1【1】正常添加输入题目123、答案123和分值12并保存保存成功成功李缘一H2【2】为空添加只输入题目123并保存提示不能为空成功李缘一H3【3】为空添加不输入并保存提示不能为空成功李缘一5.2.5提问测试步骤进入提问管理页面。选择班级，输入提问的主题以及描述。点击保存。具体添加题目测试情况如下表5.5所示。表5.5题目测试用例编号用例标题输入测试预期结果测试结果测试人H1【1】正常添加选择班级1，输入主题和描述保存成功成功李缘一H2【2】异常添加选择班级2，输入主题和描述提示班级2没有学生成功李缘一H3【3】为空添加不输入并保存提示不能为空成功李缘一5.2.6收藏课程步骤进入课程详情页面。点击收藏课程。具体加入收藏课程测试情况如下表5.6所示。表5.6题目测试用例编号用例标题输入测试预期结果测试结果测试人H1【1】正常收藏点击收藏课程加入成功成功李缘一H2【2】未登录收藏点击收藏课程提示未登录成功李缘一5.2.7课程步骤进入课程详情页面。点击加入课程。具体加入课程测试情况如下表5.7所示。表5.7题目测试用例编号用例标题输入测试预期结果测试结果测试人H1【1】正常加入点击加入课程加入成功成功李缘一H2【2】未登录加入点击加入课程提示未登录成功李缘一可用性测试可用性测试用于检测网站的可理解性、可操作性和学习性等方面内容。具体测试方面如表5.8所示。表5.8网站可用性测试测试总结经过此次对Web前端技术训练营在线学习网站的综合性测试，我们不难发现程序的功能并没有出现明显的逻辑性错误，用户在进行功能操作时，程序基本能根据用户操作情况给出相应的反馈。程序质量以及可靠性在系统的反复测试中都经过了严格检验，程序投入生活使用完全没有问题。并且在测试过程中，针对了各种的登录人员的大到每个界面，小的也具体到每个环节的操作，都进行了合理的规范的实用的操作，并且模拟了正常的情况下用户的操作情况，包括了强制退出等等都没有发生任何的问题，所以这个系统的结构以及性能方面是非常的值得考验，这也从侧面说明了我在前期的筹划，还有系统的框架选用，开发技术的采纳，数据库的选择对接等各方面都是没有值得怀疑的问题的。总体说来，软件通过测试。结论在网络飞速发展的今天，Web前端入门简单，运用广阔，掌握之后可以从事移动互联网、云计算、大数据等等相关工作。而本次毕业设计的目标，就是完成一个吸引人的，具有实际运用价值的Web前端技术训练营在线学习网站，并且能够通过设计的完成，掌握更多的计算机高级语言使用方法，提高个人技术学识素养。经过开发系统初期时，对系统进行的各个方面的分析，以及在文献资料的查阅和硬件设备的充足准备，系统的开发进行得很顺利，各个预期功能都能够很好的实现，由于开发前期的准备充足，对系统分析得透彻，各个方面的进行也都在规划之中，由此看来，预期的准备是非常重要的，能够帮助我们减少很多不必要的麻烦，节省很多时间，少走不必要的弯路。经过此次Web前端技术训练营在线学习网站的开发，我对开发的流程有了更具体的了解，对相关知识掌握得更透测了，也了解了一个系统是否具有实用性是非常重要的，具有实用性才有意义，才有价值，才是值得被肯定的。在系统开发初期，对系统进行各个方面的分析，规划好开发系统每一步需要进行的工作，制定开发时间上的安排，构建系统的各个结构和流程图，是能够成功开发系统的必要条件。在往后的学习、工作中，我要时时刻刻怀着一丝不苟的严谨科学素养，为各项需要完成的事项做好严格的规划，并要加强自身的学识素养，成为一个对社会有意义的人才。

参考文献[1].在线学习多重检测的可视对象跟踪方法.《电子学报》.被中信所《中国科技期刊引证报告》收录ISTIC.被EI收录EI.被北京大学《中文核心期刊要目总览》收录PKU.2014年5期.权伟.陈