目  录

摘 要 I

Abstract II

1  项目概述 1

1.1  课题背景 1

1.2  在线学习系统的研究现状 2

1.3  研究的主要目的 2

1.4  项目范围 3

2  关键技术介绍 4

2.1  B/S结构 4

2.2  bootstrap库详细介绍 5

2.3  HTML介绍 5

2.4  CSS介绍 5

2.5  java语言介绍 5

2.6  开发工具IDEA介绍 6

2.7  SringMVC技术 7

2.8  Jquery框架 8

3  需求分析 9

3.1  功能分析 9

3.2  系统原型设计 11

3.3  开发环境 12

3.4  系统可行性分析 13

4  系统设计 15

4.1  功能模块设计 15

4.2  数据库设计 21

5  系统实现 27

5.1  系统的登录界面 27

5.2  系统的整体框架如下图所示： 27

5.3  功能设计与描述： 28

5.4  详细设计： 29

6  系统测试 40

6.1  测试方法 40

6.2  测试目的 40

6.3  性能测试 40

6.4  测试结论 41

结  论 42

参考文献 43

致  谢 44

摘 要

随着互联网技术的普及,人们的生活节奏不断加快，人们对网络的依赖越来越加深，网络在人们的生活中也越来普遍。由于近年新型冠状病毒疫情的发生，为了避免传染，越来越多的人们减少出门,选择通过互联网来实现自己的各类需求。

在线学习平台是一套基于JAVASpringMVC模式的互联网学习平台。系统通过后台上传学习的类型、学习课程、课程的具体内容；互联网用户通过在线学习平台了解专业动态、自助学习课程知识、提出学习中遇到的问题并且和广大网友进行讨论。本系统采用Java作为基础语言，MySQL作为数据库管理系统，springmvc作为系统的基本框架。Springmvc能够很好的简化项目代码，让更多的精力用于业务逻辑的实现，同时利用功能完善的Tomcat作为服务发布的工具，保证了整个在线学习平台访问的流畅性，也便于后期的维护；整个在线学习平台包括后台和前台。后台内容包括：管理员登录注册、用户管理、课程类型管理、 课程管理、订单管理；前台包括：首页、课程列表、我的课程、课程学习、互联网用户注册、互联网用户登录等功能；初步完成了在线学习平台的基本功能。

在线学习平台为广大互联网用户提供了一个很便利的学习平台，为疫情期间的学习提供了便利，让广大互联网用户足不出户就能在线学习、提升自己。

关键词：JAVA，MySQL，学习，springboot

3  需求分析

3.1  功能分析

按照开题报告中设计的功能需求，可以将整个在线学习平台拆分为用户前端和管理后台，根据不同角色的功能设计。总体功能结构如图3.1所示

 

图3.1 总体框架图

图3.2 高层用例图

表3.1 需求功能表

4  系统设计

本系统可分为网站前端和管理后台两部分。按照角色分可分为两大类，即：网站用户和管理员。根据调查研究，本系统网站管理员用户需实现的功能有：登录、个人信息、课程类型管理、用户管理、课程管理、课时管理、订单管理；网站用户需要实现的内容有：首页、课程类型、课程管理、购买、登录、注册、课时列表、课时播放、课时评价等功能。

4.1  功能模块设计

4.1.1  登录

网站用户与管理员用户进行登录。登录信息描述如表4.1所示。

表4.1 登录用例

4.1.2  网站用户注册

网站用户进行账号的注册。网站用户注册描述如表2.3所示。

表4.2 网站用户注册用例

4.1.3  查看课程信息

网站用户查看课程信息。用户查看课程信息描述如表4.3所示。

表4.3 查看课程信息用例

4.1.4  网站用购买课程用例

网站用户购买课程描述如表4.4所示。

表4.4 用户购买课程用例

4.1.5  网站用户添加播放课程

网站用户播放课程。网站用户播放课程描述如表4.5所示。

表4.5网站用户播放课程用例

4.1.6  网站用户评价课程用例

   网站用户评价课程用例描述如表4.6所示。

表4.6 网站用户评价课程用例

4.1.7  用户管理信息用例

用户，超级管理员可以通过用户管理用例用户信息进行维护，包括对用户的增删改查。用户管理用例描述如表4.7所示。

表4.7 用户管理用例

续表2.8 用户管理用例

4.1.8  添加课程信息用例

管理员添加课程信息。管理员添加课程信息描述如表4.8所示。

表4.8 添加课程信息用例

4.1.9  课时管理用例

     管理员管理课时信息, 管理员管理课时信息描述如表4.9所示。

表4.9 课时信息管理用例

   4.1.10  管理员添加课程分类用例

管理员添加课程分类，管理员添加课程分类描述如表4.10所示。

表4.10 管理员添加课程分类用例

 4.1.11  管理员订单管理用例

    超级管理员可以通过订单管理用例对系统中的用户订单信息进行维护，包括对订单的增删改查。管理订单信息用例描述如表4.6所示。

表4.11 管理订单信息用例

5  系统实现

5.1  系统的登录界面

    打开浏览器输入地址进登录页面，分配的用户可以通过登录页面登录系统进行相关的操作。

 

图5.1 系统登录界面效果图

5.2  系统的整体框架如下图所示：

图5.2 用户端整体效果图

 

5.3  功能设计与描述：

5.3.1  登录注册功能

课程网站用户注册和网站用户、管理员通过账号密码登录功能。

  5.3.2  用户管理

网站用户和管理员管理：账号、密码、地址、电话等信息增删改查。

5.3.3  课程类型管理

课程类型名称等信息增删改查。

5.3.4  课程管理

课程信息管理：包括名称、开始时间、节省时间、课程类型、价格等信息增删改查。

5.3.5  课时管理

课时管理：名称、简介、讲课日期、、教师头像、等信息增删改查

5.3.6  订单管理

订单管理：订单信息包括课程名称、订单人、订单时间、订单价格等信息增删改查

5.3.7  网站首页

滚动广告、最新课程、最热购买课程

5.3.8  课程列表

课程类型、课程列表

5.3.9  课程购买

登录信息购买课程

.

5.4  详细设计：

     功能详细设计，包含说明、效果图、核心代码。

5.4.1  用户管理：

    用户管理：点击人员管理菜单填写人员基本信息,姓名、账号、密码、性别、手机号、地址,点击添加新增成功。如下图：

 

   图5.3 效果图

姓名	账号	电话	角色	操作
				    

5.4.2  课程类型管理：

    点击课程类型管理菜单填写课程类型名称,点击添加新增成功。

 

图5.4 效果图

名称	操作
	    

5.4.3  课程管理：

    点击课程管理菜单,点击新增,在新增界面输入基本信息,点击添加新增成功。

 

图5.5 效果图

课时名称	讲课日期	教师名称	操作
			    

5.4.4  课时管理：

    点击课时管理菜单,点击新增,在新增界面输入基本信息,点击添加新增成功。

 

图5.6 效果图

课时名称	讲课日期	教师名称	操作
			    

5.4.5  订单管理：

    点击订单管理菜单,点击新增,在新增界面输入基本信息,点击添加新增成功。

 

图5.7 效果图

    

课程名称	购买人	购买时间	操作
			查看订单

5.4.6  网站首页：

  点击首页，进入网站首页。

 

图5.8 效果图

    

$(document).ready(function(){

$("#mykc").click(function(){

if(sessionStorage.getItem("pcuserid") =="" || sessionStorage.getItem("pcuserid") ==null|| sessionStorage.getItem("pcuserid") == undefined){alert("登录后可查看我的课程")}else{window.location.href="/pcmykc?yhid="+sessionStorage.getItem("pcuserid");});

$("#mylogin").click(function(){

if(sessionStorage.getItem("pcuserid") =="" || sessionStorage.getItem("pcuserid") ==null|| sessionStorage.getItem("pcuserid") == undefined){

 window.location.href="/pclogin"}else{

 alert("已经登录,不可重复登录!")}});

$("#myreg").click(function(){

if(sessionStorage.getItem("pcuserid") =="" || sessionStorage.getItem("pcuserid") ==null|| sessionStorage.getItem("pcuserid") == undefined){

 window.location.href="/pcreg"

}else{

 alert("已经登录,不可重复注册!")}

}); List list = rolesService.selectlBysearch("");

modelMap.addAttribute("datasrole", list);

return "html/rolesqxedit";

}

5.4.7  网站注册：

    点击注册,填写基本信息进行注册。

 

图5.9 注册效果图 

@RequestMapping(value = "/ggblist_sy", method = RequestMethod.GET)

public String ggblist_sy(ModelMap modelMap,

  @RequestParam(value = "sear", required = false) String sear) {

List list = ggbService.selectlBysearch(sear);

modelMap.addAttribute("datas", list);

return "html/ggblist_sy";

//新增弹窗

@RequestMapping("/ggbadd")

public String ggbaddshow(ModelMap modelMap) {

List list = ggbService.selectlBysearch("");

modelMap.addAttribute("datas", list);

return "html/ggbadd";

//新增提交

@RequestMapping("/addggb")

@ResponseBody

public Map addggb(Ggb ggb) {

Date date = new Date();

ggb.setId(UUID.randomUUID().toString().trim().replaceAll("-", ""));

int flag = ggbService.insert(ggb);

Map map = new HashMap();

5.4.8  登录：

    输入账号密码进行登录。

 

图3.10 登录效果图