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

这是一个信息高速发展的时代，为了能够满足人们更加方便获取现代知识的需求，利用相关技术设计了一个在线学习网站，名为Web前端技术训练营。本论文首先介绍了基于信息时代下人们学习的背景，然后论述了系统的设计目标、系统需求、总体设计方案、详细设计和实现方法，最后对Web前端技术训练营在线学习网站进行了一些具体测试。这个系统是采用JavaWeb技术，它是基于B/S架构的开发，并用Mysql来管理和存储数据。系统功能包括用户登录注册，浏览课程，上传和下载资料，在线考试，在线提问，在线作业，班级签到等。本系统经过多次测试，系统操作简便、快速，功能完整，界面布局具有较好的吸引力，也具有较好的实用性。 1 1 11.3文章结构 2 32.1JAVA介绍 32.2JavaWeb技术介绍 32.3数据库技术 3 4 53.1系统可行性分析 53.1.1时间可行性 53.1.2技术可行性 53.1.3经济可行性 53.1.4操作可行性 63.1.5法律可行性 63.2业务需求分析 6 63.3.1系统的安全性 63.3.2系统的交互性 73.3.3系统数据的要求 73.3.4系统的可靠性 7 73.5系统UML用例分析 73.6系统流程分析 3.6.1注册流程 9 13.8系统结构设计 13.9数据库设计 3.9.1数据库实体 3.9.2数据库表设计 4.1老师功能实现 4.1.2后台管理主界面 4.1.3视频管理 4.1.4测试管理 4.1.5提问管理界面 4.2学生功能模块的实现 4.2.1课程信息界面 4.2.2课程详情界面 21 25.1系统测试方法 225.2功能测试 5.2.1登录测试步骤 235.2.2注册测试步骤 235.2.3添加课程测试步骤 235.2.4添加题目测试步骤 245.2.5提问测试步骤 245.2.6收藏课程步骤 255.2.7课程步骤 25 5.4测试总结 27 28科学和经济迅速发展的今天，人们的生活方式发生了翻天覆地的变化。不仅仅是这些，人们的学习方式也随之改变。现代化的学习方式如雨后春笋般不断出现，这些新奇的学习方式与传统教育相结合，使人们能够更加方便的获取自己想学的知识。在这些年现代化学习中，网络学习最为突出。它是通过在互联网上搭建一个平台，并在这个平台上上传各种学习资料。网络学习也称为在线学习，它有一个很突出的特点，就是不需要特定的场所，可以随时学习。这种特点也使得在线学习成为当代大学生主流选择。2014年上海师范大学的朱金艳曾发表过一篇名为《在线学习技术标准的应用性研究》的文章，内容指出传统的教学风格和现代化在线学习的风格，其内核都是满足人们的学习需要。2014年祝智庭和刘名卓发表的《MOOC时期的在线学习新样式》,阐述并分析了几种具有显著特点的在线学习方式，以不同的视角对这些方式进行比较，本系统则是其中一种在线学习方式。2015年，雷根和肖俊洪在《中国远程教育》期刊中发表《论数字化高等教育实现的新兴领导才能》也指出，在线教育以专业的发展方向学习，可以更好的研究未来在线教育的策略和能力。Web前端技术训练营，这个在线学习系统，界面直观简介，内容难度也进行了划分，可以轻易的根据自己能力大小来选择学习目标。在了解信息时代下在线学习的背景之后，定制了本次毕设的设计方向，再根据设计功能项目需求，分析是否可行。还需要查找一些相关资料，进行技术调研，设计出系统的整体框架。本系统采用Java语言进行编写，数据库为MySQL,后端SpringBoot+Mybatis,前端UIkit框架、JQuery、Thymeleaf模板引擎。本次毕业设计采用JSP技术、MySQL数据库和B/S结构对数据进行分析，建立Web前端技术训练营在线学习网站。本网站的目标如下：(1)使用户容易上手，界面简单，通俗易懂，方便用户更好的学到知识，也方便管理员进行相关信息管理。(2)信息的处理非常及时，能够随时更新最新的课程、题目等相关知识。2(3)功能完整，满足用户注册登录、学习课程、查看资料、在线考试等需求。对于Web前端技术训练营在线学习网站这篇论文分成了六个部分来写。首先是绪论，对于Web前端技术训练营在线学习的这个网站，在当今市场上的需求关相关学习背景进行了简单介绍。其次是对这个Web前端技术训练营在线学习网站技让Java语言所编译的代码更加广泛的传播。而且Java语言出现的年，第一个JAVA编程语言面世，这个时代正是中国计算机刚刚起步的年代，所以虽JavaWeb技术的应用市场很广，上手难度也较低，目前有大量的主流公司都对量的组件自由。在动态网页开发的技术中，JSP相比于与CGI,操作更加直观，相关机语言编写代码程序，而这些企业最好的选择就是JSP。JavaServer,还可以处理相关逻辑操作。功能的多样性还可以绕过JSP访问数据库，2.3数据库技术据库技术。在进行相关资料查阅后，确定采用Mysql进行相关的数据处理。Mysql是4在B/S架构面世之前，程序员之间流行的架构为C/S架构。这个C/S架构优点可非常被动，于是C/S架构的升级版B/S架构诞生。B/S架构似乎专门为互联网而生，B/S架构不需要安装任何客户端，只要是能够适配Web浏览器的，可以随时使用，且业务扩展能力强，开发较为简单，成本也很低，所以本次系统采用B/S架构。53.1系统可行性分析在开发系统时，需要确保系统在开发前期对系统各个方面需求的分析，确定系统所需要具有的功能完整性，并能够确定功能结构的本次进行Web前端技术训练营在线学习网站的开发，在经过预算后，需要经过两个月的时间进行开发。在最初，为开发本系统，预留的时间超过两个月，并进行了相关资料的查阅，做了充足的准备，相信能够顺利开发出来。所以，在时间需求上，是完全足够，完全可行的。3.1.2技术可行性Web前端技术训练营在线学习网站选择的是JAVA作为开发语言的使用，而出于对数据储存和处理的需要，选择采用的数据库是MYSQL数据库结合进行开发。JAVA作为一门开发语言，在开发性能上，是非常良好的，并且容易掌握，使开发者在开发上运用自如，快速实现系统各个功能的开发。并且JAVA所具备的适合没有基础的刚入门的学者的研究，能够使系统运行在各个方面都很灵活，支持多功能使用，扩展性很好的特点，也是人们选择使用这门语言的原因。而MYSQL数据库在处理数据的优越性，非常良好的保证了数据的不流失、不外泄，以及在处理数据时的反应迅速，为提高系统的实用性带来了硬性的支持。综上所述，Web前端技术训练营在线学习网站在所选择的技术是非常可行的。为确保系统的开发不会因为超出预支而无法顺利进行，对开发所需要承担的经济成本进行可行上的分析，能够避免系统在开发惊醒过程中，因成本不足造成无法继续进行，或者达不到预期需求的结果。考虑到应尽量降低成本，选用了开源码进行开发。在运行上，一台普通配置的电脑就能够满足需要了。本系统实现最重要的是代码部分的实现，因此，在经济的考虑上，是可行的。63.1.4操作可行性在系统的使用中，能够进行各项功能的基本操作，支持人们快速掌握操作方法是非常重要的。本系统操作实现的途径是通过点击相关的按钮，进入相关的界面，对系统各个功能进行使用。本系统是一个Web前端技术训练营在线学习网站，在各个界面中，都有相应的文字提示，用户只需要点击相应提示的按钮，就能够进行相关操作了。因此，对于操作的可行性，人们不需要进行相关的培训就能够操作了。3.1.5法律可行性各个系统的使用，都必须得到法律的支持，不能够使用不合法律的技术和途径对系统进行开发，系统的功能也必须满足法律的需求。本Web前端技术训练营在线学习网站使用的技术都是合法合理的，在功能的使用上，也是没有涉及到违法的内容。因此，是满足法律需求的。3.2业务需求分析本Web前端技术训练营在线学习网站采用B/S结构，Java语言编写，数据存储用MYSQL实现。本系统是一个独立的系统，采用JSP技术构建了一个有效而且实用的Web前端技术训练营在线学习网站，希望以此能够帮助到人们更好更专注的学习Web前端相关的知识。实现了节约资源、提高效率、业务处理的目的，使Web前端技术训练营在线学习网站发挥自己的作用。本系统总共有三个目标用户，分别是管理员、老师和学生。老师可以上传课程相关视频、资料和课程试题，管理相关班级，可向班级内学生进行提问、发布作业。学生则可以浏览课程，加入课程和相关班级，下载学习资料，做课程相关题目，提交作业。管理员负责审核老师上传的课程，以及管理老师和学生的用户账号。。且目前的互联网上，多数学习网站为综合网站，Web前端技术训练营专注于Web前端开发，有针对性的学习。学生用户可以根据课程标注的难易程度选择学习，使其更有效率，用户黏度更高。为了让系统能够实用，符合用户使用的需求，必须要制定一些规则，如下所示：3.3.1系统的安全性只有经过授权的注册用户可以登录后台系统对信息和系统数据进行处理。针对不同的用户，需要设置不同的账户密码，确保每个用户都只能登录个人的账号。3.3.2系统的交互性信息的录入和储存对Web前端技术训练营在线学习网站来说是非常重要的，能够录入的信息量以及能够储存复杂的信息对系统性能的良好有很大的取决作用。所以，在开发时采用一个功能强大的数据库对Web前端技术训练营在线学习网站是非常重要的。在进行系统设计时，考虑系统的是否容易学习容易操作，是为了能够为系统吸引来更多的用户，为用户带来良好的体验感，减少用户操作的时间。3.3.3系统数据的要求为了能够正常使用系统，各种功能能得到顺利实现，系统数据必须精准输入，并且能够得到及时更新、及时修改。为了避免删除到不必要删除的数据，应该使用能够独立保存的数据，这样就避免了不必要的麻烦。3.3.4系统的可靠性系统的使用必须可靠，为了保证系统的可靠性，必须避免出现病毒类代码，在系统3.4系统结构分析Web前端技术训练营在线学习网站利用的Browser/Server(B/S)结构，提供了一个网络管理平台，提高在线学习的管理效率。本系统页面简介，容易操作，扩展能力也很优秀。系统的网络应用原理示意图如图3.1所示：UML是一种语言，它的作用是进行可视化建模，作用对象是软件密集系统。它8是开发者使用UML来建模，能够加强对客观事物对了解，能够更加充分的为开发系统的各项功能有所准备，并且在建立系统流程的前期工作中也大有裨益。以下是对Web前端技术训练营在线学习网站进行UML建模分析。(1)管理员用例是用于展示管理员的系统功能操作介绍，相当于操作演示，更直观的查看管理员所能进行的操作，对于系统的了解有很大的帮助，具体的管理员用例图如下：图3.2管理员用例图(2)学生用户用例是用于展示学生的系统功能操作介绍，相当于操作演示，更直观的查看用户所能进行的操作，对于系统的了解有很大的帮助，具体的用户用例图如(3)老师用户用例是用于展示老师的系统功能操作介绍，相当于操作演示，更直观的查看用户所能进行的操作，对于系统的了解有很大的帮助，具体的用户用例图如下：图3.4学生用户用例图3.6.1注册流程用户和管理员要想进入本系统，必须拥有账号才能进行操作。用户注册流程图如图3.5所示。Y判断是否为空Y判断是否重复用户在进行注册后方可登录进入系统，登录图如图3.6所示。N判断是否正确Y本Web前端技术训练营在线学习网站采用B/S模式架构。B/S全程Brower/Server,使用此类框架的系统，用户使用Web浏览器即可进行相关操作，如需数据的存储等相关处理，可以通过连接数据库进行交互。本系统所使用的架构，也就是B/S架构，应用在互联网上搭建，称为基于Web浏览器的处理服务器。采用这种架构之后，使系统运行的实现变得更容易。当采用Web类型的浏览器操作，用它来处理提交数据，会给用户提供Internet服务器，在Internet服务器进上进行相关的数据处理操作，返回处理，处理后的结果，就是标准的HTML系统结构由多个模块组成，这些模块整合起来就是一个整体结构。分别完成这些模块之后，最后进行组成，方可得到最后的系统。它的具体工作步骤是：2.根据需求选用最佳的设计方案设计每个子模块的功能。3.根据每个子模块的功能，进行确认逻辑关系。4.根据它们的关系设计每个子模块之间的信息交流方式。每个功能模块的实现，都需要具体的过程方案，而方案需要对系统功能进行需求分析，然后不断筛选，选出最佳的方案，力求达到最优效果，目的是为了设计更加优良的系统框架。本Web前端技术训练营在线学习网站主要包括管理员以及用户功能模块两大部分，系统结构图如图3.7所示。加入课程课程收藏加入课程课程收藏课程评价课程详情在线学习班级管理作业管理提问管理测试管理视频管理3.9.1数据库实体我们需要建立一个数据库概念模型来更好地了解一个系统中各个模块的联系，最常最常见的一种方法就是E-R模型法。我们可以通过这些模型，展现出现实的实体之间的交互关系，把这些实体关系用数据库体现出来，使内容更加直观。E-R图是可以表示实体间相互关联的意义，直观反映出实体间的关联。在为实体设计属性与关联的时候便可以确定实体间主外键的关联关系，实体所具有的延伸性。在E-R图中这些都能直观的显示出来。像这样将数据分类成组后，就会产生了与相关的分组所不同的信心，这样更加的易于用户进行观察和实际分析。实体：E-R图中标注的实体，使一组数据对象集合的集合体。可以和其他实体形成主键或者外键。属性：指的是实体中包含的属性，实体由多条属性所构成，属性拥有自己的数据类型，数据大小。属性也关系到实体之间的联系。关系：大多数实体都包含一对多或多对多的联系，正是他们之间的联系构成这些E-R图的关系，E-R图的关系紧密连接了实体，使实体间的关联性更加的显著、易懂。本Web前端技术训练营在线学习网站的E-R图如下所示：提问管理N视频信息作业信息测试信息学生信息视频收藏提交收藏查看用户属于加入训练营在线学习网站采用了MYSQL数据库管理系统，各个表的设计结果如下：数据类型长度是否可空是否否否否否数据类型长度是否可空是否否否否否否否否否数据类型长度是否可空是否否否否否否否否否数据类型长度是否可空是否否否否否表3.13t_course_video_数据类型长度是否可空是否否否否否否否否否数据类型长度是否可空是否否否否否4.1.1登录老师用户想要进行不同权限的操作，就必须进行登录，当登录成功后就能够进行系统功能的操作了。登录界面如图所示。核心代码：@Action(value="add2HomeworkStudent",results={@Result(name="add2",location="/ahtml/addHomeworkStudenHomeworkitem=service.get(Homework.claputRequestValue("modifybean",it@Action(value="getHomeworkStudent",results={@Result(namelocation="/ahtml/modifyHomeworkStudent.jsp")})HomeworkStudenttemp=(Homewoservice.get(HomeworkStuputRequestValue("modifybean",te}}4.1.2后台管理主界面老师想要进行不同权限的操作，就必须进行登录，当老师登录成功后就能够进行系统功能的操作了，包括对课程、班级、视频管理等信息的管理。后台管理主界面如图所示。含我的主页欢迎使用Web前端训练营在线学习网站当前登陆账号：1001当前登陆角色：教师图4.2后台管理主界面核心代码：@Action(value="getHomeworkStudentAll",results={@Result(name="getOne",location="/ahtml/getHomeworkSpublicStringgetHomeworkStudentAll(){HomeworkStudenttemp=(Homewoservice.get(HomeworkStuputRequestValue("modifybean",te当老师用户登录之后就可以对页面的功能做操作，点击视频管理，就能够管理视频信息，可以添加、搜索、删除视频信息。视频管理界面如图所示。王凯(1001)web前端核心技术(高阶)2王凯(1001)00□王凯(1001)Java核心技术(进阶)00王凯(1001)00□王凯(1001)00□删王凯(1001)00□查看[王凯(1001)00@Action(value="updateCourseVipublicStringupdate(){}}当老师用户登录之后就可以对页面的功能做操作，点击测试管理，就能够管理测题目类型：全部班级：全部Q查询题目…题目选项A成员/共7条首页@Action(value="add2ClazzQuestion",resultsputRequestValue("list",service.queryByHQL("fromClazzwheretea}@Action(value="getClazzQuestion",results={@Result(name="getOne",location="/ahtml/modifyClazzQuestiClazzQuestiontemp=(ClazzQuestion)service.get(ClazzQueputRequestValue("modifybean",te4.1.5提问管理界面当老师用户登录之后就可以对页面的功能做操作，点击提问管理，就能够查看提问列表，老师能对这些信息做出添加、修改或删除的操作。管理提问管理界面如图所×批量翔除教师班级名称学生提问主题提问时间王凯(1001)Web基础特训班李芳芳(user1)1111111122021-03-1619:52:53□查看如@Action(value="getClazzQuestionSellocation="/ahtml/getClazzQuestionSelf.jsp")})ClazzQuestiontemp=(ClazzQuestion)service.get(ClazzQuestion.class,putRequestValue("modifybean",teList<SimpleUser>list=service.querbean.getClazz().getIdif(list.size()==0){}bean.setStudent(list.get(ran.nextInt(list.sizbean.setAddDate(DateUtil.getCurrentTime(DateUtil4.2学生功能模块的实现法律基础@Action(value="add2CourseVideo",putRequestValue("list",service.queryByHQL("fromCorderbyiddesc",getTeach@Action(value="getCourseVideolocation="/ahtml/modifyCourseVideo.jsp")})putRequestValue("list",service.queryByHQteacher.id=?orderbyiddesc",geCourseVideotemp=(CourseVideo)service.get(CourseVideo.class,uid);putRequestValue("modifybean",tebean.setAddDate(DateUtil.getCurrentTi4.2.2课程详情界面学生用户在课程详情界面，可以查询课程的具体信息可以进行收藏课程和计入班级操作。课程详情界面如图所示。级操作。课程详情界面如图所示。在线课程byI退出应不仅业一下程，投计语率面软件发班为，个大的生部支术，广泛bean.setAddDate(DateUtil.getCurrentTservice.delete(CourseV测试的定义：程序测试一般是程序员在开发完成一个系统之后，为了使系统在后期运作时，将预期功能完整实现，不会出现因代码或某些因粗心或遗忘问题导致的错误，使得系统的运行出现一些功能上的错误，或是缺乏实现某些预期制定的目标功能，因此需要对系统进行一系列方法的检测，找出程序中出现的错误，从而不断改善，加强系统的实用性的一个过程。其目的以及任务有以下内容：目的：在程序中找到漏洞和错误，并且改正这些存在的漏洞和错误；任务：运行程序，查看程序与预期是否相符，是否出现了一些错误事项，然后解决这些错误，使程序的运行吻合预期，避免在正常投入使用时发生一些不必要的错误在本系统的测试中，主要进行了功能测试和结构测试。进行功能测试，首先要对系统的功能结构明确后，使用黑盒测试的方法，验证系统功能是否如期实现。而确定能否实现预期的依据是忽略系统内部的结构特性，看看系统表面上的功能是不是正常运行，接收到的数据和呈现的信息与发送的数据是不是能够对应上，如果对应上，就说明功能实现良好。结构测试就是对系统内部的运作情况的检测，明确系统内部的各个程序的进行，并且需要将系统程序在逻辑驱动器这样的软件上运行起来，查看所运行的程序在流程的实现上是否如预期设定那样的流程进行，会不会产生偏差，不管运行的结果，功能用例编号用例标题预期结果测试结果【1】正常登录登录成功成功李缘一【2】错误登录成功李缘一【3】为空登录不输入不输入成功李缘一(1)进入注册页面。用例编号用例标题预期结果测试结果【1】正常注册注册成功成功李缘一空注册不输入不输入成功李缘一复注册成功李缘一(2)选择班级，输入课程名称，填写课程简介，上传视频、资料和图片。(3)点击保存。具体添加测试情况如下表5.3所示。用例编号用例标题预期结果测试结果【1】正常添加输入课程名称123,填写保存成功成功李缘一空添加只输入课程名称123并保存提示不能为空成功李缘一【3】为空添加只输入简介123并保存提示不能为空成功李缘一【4】为空添加不输入保存提示不能为空成功李缘一5.2.4添加题目测试步骤(1)进入题目添加页面。(2)输入题目、答案和分值。(3)点击保存。具体添加题目测试情况如下表5.4所示。用例编号用例标题预期结果测试结果【1】正常添加输入题目123、答案123保存成功成功李缘一【2】为空添加只输入题目123并保存提示不能为空成功李缘一【3】为空添加不输入并保存提示不能为空成功李缘一5.2.5提问测试步骤(1)进入提问管理页面。(2)选择班级，输入提问的主题以及描述。(3)点击保存。具体添加题目测试情况如下表5.5所示。用例编号用例标题预期结果测试结果【1】正常添加选择班级1,输入主题和保存成功成功李缘一【2】异常添加选择班级2,输入主题和提示班级2没有学生成功李缘一【3】为空添加不输入并保存提示不能为空成功李缘一5.2.6收藏课程步骤(1)进入课程详情页面。(2)点击收藏课程。具体加入收藏课程测试情况如下表5.6所示。用例编号用例标题预期结果测试结果【1】正常收藏点击收藏课程加入成功成功李缘一【2】未登录收藏点击收藏课程成功李缘一(1)进入课程详情页面。(2)点击加入课程。具体加入课程测试情况如下表5.7所示。用例编号用例标题预期结果测试结果【1】正常加入点击加入课程加入成功成功李缘一【2】未登录加入点击加入课程成功李缘一可用性测试用于检测网站的可理解性、可操作性和学习性等方面内容。具体测试方面如表5.8所示。测试项窗口移动、改变大小、关闭等操作是否正常好好模块和提示内容等文字描述是否正确好模块布局是否合理、协调好模块的状态是否正确(对选中项能否发生对应切换)好好好好是否提供帮助信息好经过此次对Web前端技术训练营在线学习网站的综合性测试，我们不难发现程序的功能并没有出现明显的逻辑性错误，用户在进行功能操作时，程序基本能根据用户操作情况给出相应的反馈。程序质量以及可靠性在系统的反复测试中都经过了严格检验，程序投入生活使用完全没有问题。并且在测试过程中，针对了各种的登录人员的大到每个界面，小的也具体到每个环节的操作，都进行了合理的规范的实用的操作，并且模拟了正常的情况下用户的操作情况，包括了强制退出等等都没有发生任何的问题，所以这个系统的结构以及性能方面是非常的值得考验，这也从侧面说明了我在前期的筹划，还有系统的框架选用，开发技术的采纳，数据库的选择对接等各方面都是没有值得怀疑的问题的。总体说来，软件通过测试。在网络飞速发展的今天，Web前端入门简单，运用广阔，掌握之后可以从事移动互联网、云计算、大数据等等相关工作。而本次毕业设计的目标，就是完成一个吸引人的，具有实际运用价值的Web前端技术训练营在线学习网站，并且能够通过设计的完成，掌握更多的计算机高级语言使用方法，提高个人技术学识素养。经过开发系统初期时，对系统进行的各个方面的分析，以及在文献资料的查阅和硬件设备的充足准备，系统的开发进行得很顺利，各个预期功能都能够很好的实现，由于开发前期的准备充足，对系统分析得透彻，各个方面的进行也都在规划之中，由此看来，预期的准备是非常重要的，能够帮助我们减少很多不必要的麻烦，节省很