第一章 绪论
1.1课题背景
当今网络发展的十分迅猛，人们的生活节奏变化的也非常的快。在我们日常的生活中有很多非常智能的软件，除此之外新兴的智能软件也如雨后春笋般的出现，人们的生活方式也一点一点的被潜移默化的改变着，当今社会的这种生活方式也是一种更人性化的“懒人”模式，比如人们在出行的时候可以提前预定机票、火车票等票据，也可以在到达目的地之前提前预定要下榻的酒店，甚至饿了可以随时通过手机进行点餐。这种虽然模式对人们的生活质量有巨大的提升，但是人们过度的沉浸于享受生活，却忘记了在学校最根本的任务是学习，特别是对考试周之前的同学们来说，更不能因为别的事情耽误自己的复习计划。2020年的整个上半年一直到现在，一场没有硝烟的战争席卷了整个国家，很多人感染了新冠病毒，甚至很多人因此失去了生命。本次疫情对整个国家的影响非常大，很多人因此失去了工作，很多企业都面临倒闭，包括学校中的正常教学工作也会受到影响，为了贯彻国家的防疫政策，很多学校都采取了线上教学的方式。
1.2. 目的和意义
现在大家的生活方式正在被计算机的发展慢慢改变着，学习方式也逐渐由书本走向荧幕,我认为这并不是不能避免的,但说实话,现在的生活方式与以往相比有太大的改变，人们的娱乐方式不仅仅再是吃完饭围坐在一起看电视。由于近些年手机、平板电脑等设备的普及,互联网充满了活力,并且可以渗透进其余的各行各业,可以提升全面经济,对国家发展也有重大贡献。因此,国家大力推动,推动其向全国推广，但是由于越来越多得人选择上网而不是看书学习，很多学校的考研率或者升学率都有所降低。事实上很多人也不想让这种事情发生,但是仅依靠少数人的努力远远不够,将来会发生什么,我们难以预测。但是至少有一点我们要知道:我们必须做一些事情保证所有想要进行学习的同学有更多的方式，还可以制定自己的学习计划。所以，本文借助实现基于JSP的线上教育系统的这个契机，既可以详细的利用大学学的知识开发一个有价值有意义的网站，又可以帮助广大学生实现自己的升学梦。
1.3. 本文的结构
本文会按照在大学里学习的专业的软件工程学对于一个系统产生的所有流程去介绍整个基于JSP的线上教育系统的实现方式。
当然,本文将着力介绍基于JSP的线上教育系统的基本组成与结构,并详细说明该网站的设计方案、实现的方法、开发工具及其他相关的技术。另外,重点介绍了软件开发中的一些细节。系统在一定条件下对系统中的重要模块进行严格测试,验证了该系统的可用性与可靠度。接下来介绍我实现系统的过程与本文的结构：
首先在开发这个系统之前需要对整个项目进行立项及可行性分析，画出本系统的原型图及编写出可行性研究报告，通过这一系列分析才决定这个项目到底可不可行，能否进行开发。
第二步是进行项目计划的制定，比如在某个时间区间内要完成哪一个模块的功能，完成的时间如果提前或者滞后该怎样解决等。
第三步是进行需求分析，需求分析可以说是在项目进行编码之前最重要的一步，需求分析主要是对系统的功能模块做一个详细的设计，模块与模块之间的联系，功能与功能之间的优先级、难易度都是需要在这个阶段进行分析的
第四步是进行系统设计,系统设计主要包含数据库的详细设计、系统中页面的规划与区分、系统中的文件命名等内容，做好这一步在编码部分会更加得心应手，编码变的更有效率。
第五步是代码编写阶段，按照严格的命名规范和编程习惯进行功能的实现。
第六步是对已经编码完成的系统模块进行测试，这个地方要注意的是不能等所有的功能都完成之后再去测试，而应该编码与测试同步进行，这样可以缩短整个的项目周期。
1.4. 开发环境
1.4.1 JSP语言
JSP是Sun公司创建的一种动态网页技术，是一种面向对象编程的开发语言。经过十几年的发展，JSP的优点越来越显著，首先就是开源免费，一个语言如果是开源免费的就会更方便人们学习交流，让越来越多的程序员进入到JSP编程的领域。除此之外，JSP相比其他语言更快捷高效，性能也比较好，还是可以跨平台的语言。最最重要的就是它是面向对象的编程思想，可以以类和对象为核心解决各种问题。
1.4.2 HTML语言
本系统的前台使用的技术是HTML5，与它的前身HTML4相比有了一些功能上的优化，最关键的一点是增加了响应式的网页设计，也就是说会根据用户使用的不同的设备进行不同样式的显示，比如电脑端的浏览器与手机端的浏览器同时登陆本系统的前台页面显示的效果是不一样的，但都能完美的对内容进行呈现。
本系统的布局方式有多种，比如最常见的DIV+CSS样式布局，还有在登录注册页面上使用的Table布局，以及进行图文信息显示的DL-DT-DD布局等。本系统的前台页面有很多的层叠样式表文件（也就是CSS文件），首先有个整体的样式文件，所有的页面的基础样式都引用该文件，再就是其他的页面都有一个属于自己的CSS文件，通过这些样式使所有页面都能很好的进行显示。
1.4.3 JavaScript及Vue的介绍
JavaScript技术简称JS，JS出现于1995年，在JS出现之前，表单验证的工作由服务器端进行，非常占用网络资源，所以效率很低。JS出现之后，表单验证由客户端的浏览器完成。当然目前JS的使用不仅仅是表单验证，而是服务于HTML网页，对网页进行一些动态的美化，比如网页的菜单折叠功能、网页图片的轮播功能等等。
VUE的核心设计方法就是MVVM，与传统的MVC类似，MVVM指的是Model（模型）-View（视图）-ViewModel（视图模型）。这种设计模式的特点就是可以将视图中的数据自动更新到视图模型中，而视图模型中的数据变化也会更新到模型中，实现数据的双向绑定。VUE的全称写作VUE.JS，可以极大程度上提高数据绑定的效率，还有灵活的组件系统，让网页元素可以进行复用。
1.4.4 My Sql数据库
MySql是开发Java、JSP项目最常用的关系型数据库，对于学生来说如果使用Oracle等大型数据库完全没有必要，因为大型数据库软件的价格非常昂贵，做此类小型项目还是比较适合用MySql这种可以免费使用的小型数据库，查询效率高，易于维护等特点都是选择使用此数据库的原因。
第二章 可行性分析
2.1. 业务流程可行性分析
网站前台：
网站后台：
2.2. 经济可行性
一个网站的经济可行性是指除去开发这个网站的成本后，还能否获得利润。除此之外还要看本网站是否有市场发展潜力和市场价值,本人开发这个系统一方面是因为要证明自己在学校四年的学习后可以制作出一个专业的网站，还有一个原因就是希望增强用户的体验度。对于本系统来说，开发的成本几乎为零，因为这是个人开发的项目，用到的也都是基础的编程方面的知识，所以从经济可行性方面来考虑，本系统是可行的。
2.3. 技术可行性
本系统的开发使用的是个人电脑，不需要使用阿里云或百度云主机，个人电脑的硬件足够支撑本系统的运行，所以硬件方面是没有问题的。
软件方面来考虑的话，本系统与其他的JSP项目一样，开发工具都是使用的MyEclipse编程软件和MySQL数据库，因此在技术上是可行的。
2.4. 运行可行性
在当今这个计算机技术高度发达的时代,不管是大人亦或是小朋友都会使用电脑或者手机上网,不管是用自己家里的个人电脑还是用公司的公用电脑。大家现在都已经很习惯在网上进行购物，所以基于JSP的学校查分网站的操作对所有用户来说都是不成问题的,而且经过对界面的设计之后，本系统对使用者来说非常友好。此网站管理员是开发项目的开发者,所以管理起来也更不在话下。经过上述分析,操作方面是可行的。
第三章 需求分析
3.1网络课程分享推广历史与现状
在每个人的学生时期，在语文课上可以学习唯美的唐诗宋词，在历史课上可以学习中华民族从古至今的发展，在思想政治教育课上可以学习革命先烈不畏强权的抗争精神……
但是如果当一个人上了大学之后就开始变得不学习了，也没有想要复习的计划，哪怕报名了考研最终也会放弃。最大的原因就是想要学习的课程没有一个良好的传播介质和途径。
3.2功能需求分析
经过对各大视频学习网站（如腾讯课堂、哔哩哔哩）及生活中对线上教育的研究,我认为基于SSM的线上教育网站应具有以下几个功能:
(1)具有年轻时尚感的设计风格与大方简洁的操作界面。
(2)用户可以在网站平台上查看视频课程和作业信息。
(3)具有对线上课程的教材观看、作业下载的功能。
(4)具有可以分类搜索教学视频等详细信息的功能。
(5)具有给网站客户在线留言的功能。
(6)具有进行学习资料下载的功能。
3.3非功能需求分析
1.系统性能分析
一个系统的性能是非常重要的，比如一个网站同时有200人访问和购买，网站是否能承载，再比如有大量数据进行刷新和新增时数据库能否正常的进行数据操作。本网站虽然是个小型的管理系统，但是通过性能优化，完全可以做到承载500人以上的同时访问，通过对数据库中的一些常用对象的设计可以最大化的将查询效率提高。
2.系统可扩展性
一个系统的可扩展性主要是看能否在当前版本的基础上添加新的功能进行升级，本教室消杀管理系统提供了很多接口可以进行版本的迭代。
3.系统安全
大家以往的认知里，就算别人得到了自己的个人信息也不会对自己有任何的影响，但其实当今这个社会信息安全非常重要。有一些居心叵测的人会通过你遗漏在别处的个人信息得到你的姓名、电话甚至住址和工作单位，并以此进行电信诈骗。所以教室消杀管理系统安全是非常重要的，本系统做了很多安全方面的设计，比如防SQL注入的设计，可以有效的保护用户的个人账户安全。
4.系统稳定
一个系统的稳定性主要取决于网站和数据库的数据连接，必须保证数据库与页面的数据保存长期且稳定的一致。
第四章 总体设计
4.1.系统模块总体设计
基于SSM的线上教育网站是前后台类型的系统，前台和后台独立存在但又相辅相成，前后台访问的是同一个数据库，但是所访问的数据库对象不同。
(1) 用户可以在不登录的情况下访问本系统，但是不能进行教学视频的学习或收藏，也不能对自己的个人信息进行修改。
(2)用户注册与登录:用户们如果想在网站录入自己的个人信息,需要经过一系列的有验证信息的注册,注册成功并登录后,用户可以查看所有的线上课程。
(3)个人中心：用户可以在首页面进行对自己个人信息的查看，以及可以查看自己的历史数据。
(4)在线留言：用户可以在网站首页进行在线留言，管理员看到后会及时进行回复。
(5)视频开课分类搜索：用户可以在网站上进行多种形式的搜索。
后台：
(1)用户个人信息管理系统:在此系统中维护和新建的用户个人信息,比如说当一个用户的密码被遗漏了,经过对密码提示出现问题的验证就可以直接进行密码的修改。
(2)线上课程管理功能模块:管理人员可以有效地维护网络课程。
(3)教学视频管理模块:管理员可以随时对网站中的教学视频加以管理维护。
(4)作业管理模块:管理员通过账号可以实时管理网站中的作业信息。
4.2.数据库总体设计
数据库的设计对一个系统来说是非常重要的，经常会出现做一个项目时已经开始编码了但是数据库还没有进行创建的情况。对本系统来说，应该是先创建数据库再进行编码，在创建数据库之前首先要对系统的数据进行分析，只有按照功能的需求分析进行数据的分析才可以保证在编码时不需要再去担心数据库的问题。
（1）对于本系统来说，想要使用系统里的功能是要先进行注册登录的，所以本系统设计的第一个表就是用户表，里面要包含用户的一些基本信息如用户的编号，用户的用户名及密码等。
（2）本系统有多张表是进行信息保存的，如学习视频表和作业表等，这些表有一个共同的特点就是列比较多，维护起来很麻烦且容易出错，所以此类表在设计本系统的数据库时被分为了两张表，使用主外键进行连接，一个是基本信息表，另外一个是详细信息表，查询相关数据时需要用到连接查询。
（3）用户表在用户进行了个人信息修改之后需要进行更新，保持网页中的数据与数据库中用户表的数据相同是很重要的。
（4）学习资料下载完成后，需要学习资料表中有一个列来反映学习资料下载的次数，每当用户下载过一次就在原有的基础上加一。
（5）除了用户表之外还需要一个管理员表，因为网站内的用户及数据较多，一个管理员肯定无法满足数据维护的需要，所以既然有多个管理员就需要有一张管理员表存储系统内的管理员信息。
4.3.数据库详细设计
下面详细介绍下本系统的几张数据表：
1.线上课程表
表4-3 t_jk（线上课程表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | course _id | 课程ID | Int | 4 |
| 2 | course _bianhao | 课程编号 | Varchar | 50 |
| 3 | course _date | 课程添加日期 | varchar | 50 |
| 4 | course _zhuangtai | 信息状态 | varchar | 50 |
2．课程明细信息表
表4-4 t_details（课程明细表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | mx_id | 明细编号 | Int | 4 |
| 2 | course _id | 课程编号 | Int | 4 |
| 3 | mx _nr | 课程简介 | Int | 4 |
| 4 | mx _pingjia | 课程评价 | Int | 4 |
3．用户信息表
表4-5 t_user（用户信息表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | user_id | 用户ID | Int | 4 |
| 2 | user_name | 用户名 | Varchar | 50 |
| 3 | user_pw | 用户密码 | Varchar | 50 |
| 4 | user_realname | 真实姓名 | Varchar | 50 |
| 5 | user_address | 住址 | Varchar | 50 |
| 6 | user_sex | 性别 | Varchar | 50 |
| 7 | user_tel | 联系电话 | Varchar | 50 |
| 8 | user_email | 用户邮箱 | Varchar | 50 |
| 9 | user_qq | 用户QQ | Varchar | 50 |
4.管理员信息表
表4-6 t_admin（管理员信息表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | userId | 管理员ID | int | 4 |
| 2 | userName | 管理员名称 | Varchar | 50 |
| 3 | userPw | 管理员密码 | Varchar | 50 |
第五章 详细设计与实现
5.1.运行环境
1．硬件环境
硬件环境配置：
处理器：I7-10200H
内存：8G DDR4
硬盘:：512G SSD
显卡：GTX1650Ti
2．软件环境
系统：Windows 10
数据库：MySQL数据库
开发工具：MyEclipse
服务器： LocalHost服务器。
5.2.开发工具及技术介绍
MyEclipse是广大程序员或者在校大学生们编写Java或JSP项目时最常用的工具，它最大的特点就是非常成熟和稳定，易于维护，还可以用来进行编写代码、编译文件、系统部署和测试等。
MySql是开发Java、JSP项目最常用的关系型数据库，对于学生来说如果使用Oracle等大型数据库完全没有必要，因为大型数据库软件的价格非常昂贵，做此类小型项目还是比较适合用MySql这种可以免费使用的小型数据库，查询效率高，易于维护等特点都是选择使用此数据库的原因。
5.3.系统界面设计
前台页面的设计：
基于SSM的线上教育系统的首页面采用了最简单的上中下结构，头部为导航菜单。中间部分的左侧可以进行用户的注册登录以及线上课程浏览、推荐教学视频展示，右侧为站内公告和新闻的界面。网站尾部是版权信息级作者联系方式等。具体实现效果如下图所示：
2.用户登录注册模块的设计与实现：
本系统的用户注册页面是由十几个详细的个人信息组成的表单，用到了很多的JS验证，比如非空验证，比较验证等，只有满足了所有的格式要求之后才可以成功的进行注册。用户登录页面如下图所示：
3.视频列表查看模块的设计与实现：
为了方便用户在逛网站时点击网站内的网络课程进行查看,本网站的课程信息查看提供了两种搜索方式:第一种为按照名称进行搜索,第二种比较常用,是按照排行榜进行搜索,比如按照课程的浏览量或收藏量去浏览。具体实现效果如下图所示：
4.签到功能的设计与实现：
在本系统中可以进行签到，关于课程的信息无需输入且不能更改，自己需要输入的信息是签到时间、学号及姓名等，点击保存即可完成签到。
5.新闻通知的设计与实现：
通过新闻功能可以让学生在学习之余关心国家大事，新闻列表可以查看所有的新闻信息，还可以进行查询，点击某一条新闻还可以进行详情查看。
1. 后台首页面的设计：
基于SSM的线上教育系统的后台首页面也采用了最简单的左右结构，左部为导航菜单。中间部分为本系统的一些重要参数的提示，如当前日期、浏览器版本等。后台首页面具体效果如下：
2. 学生用户信息维护模块的设计：
通过用户信息管理模块管理员可以查看系统内所有已经注册过的用户信息，除此之外还可以进行多条件的查询，如通过编号+姓名。页面具体效果如下：
3. 教师信息的管理模块设计：
通过教师信息管理可以对课程的信息进行添加、修改和删除，每次在网页中做了相应的操作后，数据库会及时的更新，管理员在后台也可以及时看到最新的数据，然后对数据进行处理。页面具体效果如下：
4. 站内新闻管理模块设计：
站内新闻主要显示网站的下午信息，比如网站的介绍、对用户的通知等。管理员还根据网站的需求作出功能优化，这样也可以吸引更多没有注册的用户在网站进行注册。页面具体效果如下：
5. 视频开课管理模块设计：
教师用户登录自己的后台账号后可以管理视频开课信息，可以进行视频课的新增，除此之外可以进行批量导入和导出Excel模板，除此之外还可以对视频课信息进行编辑和审批。
