基于springboot+vue框架实现的在线教育系统

一、引言

1、编写目的

希望给广大程序员们提供一个分享交流的平台，主要提供视频与文档的上传共享功能。目前，在线教育网站很多，但提供交流平台的网站却很少，所以想通过”Hello World”网站面向全世界程序员一起分享技术。

2、背景

• 网站名称：OnlineSchool

• 开发者：缪传鹏、杨超逸、姚家琦、吴若峰、陈锦明

• 项目简介：本系统主要分为前台和后台管理系统

• 前端（分为学习课程和个人中心两大类，基于以课程视频为中心，实现用户进行课程上传、课程互动、评论答疑等功能）

• 后台Web端管理（管理储存用户信息，审核上传）

3、参考资料

• 质量管理体系国家标准理解与实施(2008版)

• ISO9001质量体系——设计、开发、生产、安装和服务的质量保证模式

• 系统开发规范与文档编写.徐惠民.中央广播.2010.9.

• 美]托比·西格兰，莫映（译 王开福）集体智慧编程电子工业出版社.2009.1.

• 修春波人工智能原理机械工业出版社.2011.01.

• Roger S.Pressman（译 郑人杰 马素霞）软件工程：实践者的研究方法.机械工业出版社.2011.05.

• 王如龙.IT项目管理—从理论到实践.清华大学出版社.2010.04.

• 杰克·吉多.成功的项目管理-项目管理资源库（英文版）（第3版）.电子工业出版社.2008.03.

• 凯西·施瓦尔贝.IT项目管理.机械工业出版社.2008.12.

• 杰拉尔德·温伯格.质量·软件·管理系统思维（第一卷）.清华大学出版社.2008.12.

4、项目风险

政策风险分析：

法律风险分析：

市场风险分析：

技术风险分析：

运营风险分析：

财务风险分析：

二、任务概述

1、目标

准备开发一个程序员的自学网站满足下述需求，可以使得每个用户都有自己的创作中心，对课程进行管理和互动。

根据项目的计划，项目目标主要有几个方面：

• 课程的搜索和分类：课程分为启蒙修炼、进阶修炼、大师修炼三大模块

• 课程播放界面：能够播放视频，查看相应作者撰写的阅读文档，对课程进行打赏购买评论等。

• 个人中心：进行视频的创作与管理，查询消费记录，收藏课程归纳等。

• 编辑课程：上传课程、编辑文档、删除课程、课程标签分类。

• 界面：页面美观，布局合理；

• 网页管理员身份管理：合理规范的权限控制。

2、用户特点

对于程序员们，希望能分享自己研究的课题资源，同时又能学习到其它人的课程，实现“兵教兵”在线式教育。

采用详细模块分类，用户一般不经过任何培训就能比较熟悉地使用此网站。

三、总体设计

1、说明和优先级

2、激励/响应序列

用户上传自己的课程资源，其他用户可打赏

3、功能需求

4、用户功能

管理员功能

5、UML图

5.1、活动图

5.1.1、创作中心管理的活动图

5.1.2、管理员登录活动图

5.1.3、管理员功能的整体活动图

5.1.4、课程管理活动图

5.1.5、用户管理活动图

5.1.6、用户活动图

5.2、类图

5.3、用例图

5.3.1、会员用例图

5.3.2、管理员用例图

5.4、顺序图

5.4.1、用户注册顺序图

5.4.2、用户课程学习顺序图

5.4.3、用户课程创作顺序图

5.4.4、管理员用户管理顺序图

5.4.5、管理员课程管理顺序图

5.5.6、管理员黑板报管理顺序图

5.5、状态图

6.数据ER图

四、其它非功能需求

1、性能需求

2、数据精确度

由于涉及到定位数据，对于数据类的信息要保证足够的精确，精确到度。

3、时间特性

页面刷新时间不能超过3秒，页面直接跳转不超过4秒。 满足用户需要快速得到信息的要求，页面的优化要做好，使得每个用户能感觉到能够流畅迅速的查找到自己所需要的信息。

4、故障处理

页面长时间无响应，提出警告，要求用户刷新。

页面载入时间过长，要有提示，防止用户认为系统有问题。

5、安全措施需求

应用日志必须在现有基础上进行精简，对于重复日志记录、无用日志记录进行删减;

2、应用日志必须按日保存，每个文件保存应用一天的完整日志，搜索文档

历史应用日志必须压缩后按日保存，以减小历史日志文件对硬盘空间的占用:

 4、历史应用日志必须保留一个月(30天),以保证问题出现后，日志可以得到较好的保存。

6、安全性需求

系统要有足够的防御能力，防御昔通黑客的攻击，尽量减少各种可能出现的漏洞，防止用户信息被不良分子份取。 保证用户权限的正确设置，防上出现各种越权行为，保证系统的正常良好运行。用户的信息保存加密，保证安全。

7、操作需求

系统能被现有的工作人员快速掌握并使用 第三方控件的使用，原则是不使用，但必须使用时必须通知提出，讨论通过后方可使点对点通讯，私聊、公聊、从吧台获取信息都属十点对点通讯范睛，采用TCP协议

8、网站质量属性

9、补救措施

• 联系管理员解决问题（参照说明解决问题）

• 由用户操作不当遇见的问题及处理方法

• 密码或者用户名不正确：提示输入正确的密码和用户名；

• 验证码错误：提示输入正确的验证码；

• 用户名已存在：提示使用未被注册的新用户名或符合系统设定的形式；

• 请输入正确信息：要求填写正确信息；

• 请至少输入X位字符：核对是否按规定填写正确的密码；

• 与上次输入的密码不符：注册时，要求两次输入的密码保持一致；

• 该邮箱地址无效：预先设置格式，核对是否符合要求；

• 网页链接错误：重新进入网站主页；

• 图片无法正常显示：刷新页面，检查网络链接查看图片格式

• 网站繁忙，请稍后再试：尽可能大的提高网站的可访问能力；

• 评论失败：检查网络与数据库；

• 上传失败：检查网络与图片格式；

• 提交失败：检查网络与数据库；

• 访问无效：提示无效原因，要求用户登录。

五、运行环境规定

1、运行环境

待定

2、软件环境

用MySQL作为数据存储数据库。

采用SSH技术作为系统的解决方案，使系统具有很好的可扩展性。

采用Tomcat作为系统的应用服务器。

客户端采用游览器形式，满足零客户端的易用性要求。

六、技术栈

• 用户前端:Vue

• 用户后端:SSM（Spring+SpringMVC+MyBatis）

• 管理员后端:SSH（Struts，Spring，Hibernate）

七、系统设计

1.目录说明

总目录 . ├── ER图 ├── LICENSE ├── README.md ├── SQL ├── UML ├── 前端后台 ├── 前端界面 ├── 后台管理 ├── 测试用例 └── 需求文档

``` 用户前端

├── babel.config.js ├── package-lock.json ├── package.json //NPM包管理 ├── public │ ├── favicon.ico │ ├── index.html //index静态页面 │ └── static //本地Mock，资源文件 ├── src │ ├── App.vue //Vue入口 │ ├── api //"所有课程"组件的API调用 │ ├── assets //图片，资源文件 │ ├── components //网站所有的组件 │ ├── main.js //初始化Vue设置 │ ├── router //Vue路由设置 │ ├── store //Vuex全局状态管理 │ ├── style //公共CSS │ ├── util //工具类，Cookie等 │ └── views //没啥用 ├── vue.config.js //WebPack打包设置，本地转发跨域设置等等 └── yarn.lock

```

``` 用户端后端(Spring、MyBatis)

. ├── pom.xml //Maven └── src ├── main │ ├── java │ │ └── cn │ │ └── miaozt │ │ └── onlineschool │ │ ├── MybatisXmlApplication.java │ │ ├── config │ │ ├── enums │ │ ├── mapper │ │ ├── model │ │ └── web │ └── resources │ ├── application.properties │ └── mybatis │ ├── mapper │ │ ├── AdminMapper.xml │ │ ├── ChapterMapper.xml │ │ ├── CommentInfoMapper.xml │ │ ├── CourseMapper.xml │ │ ├── TokenMapper.xml │ │ ├── UserCourseRelationshipMapper.xml │ │ └── UserMapper.xml │ └── mybatis-config.xml └── test └── java └── cn └── miaozt └── onlineschool ├── MybatisXmlApplicationTests.java ├── mapper └── web

```

``` 后台管理

. ├── pom.xml └── src └── main ├── java │ ├── log4j.properties │ └── org ├── resources │ ├── AdminInfo.hbm.xml │ ├── Chapter.hbm.xml │ ├── Course.hbm.xml │ ├── CourseTag.hbm.xml │ ├── Tag.hbm.xml │ ├── Teacher.hbm.xml │ ├── Term.hbm.xml │ ├── Tokeninfo.hbm.xml │ ├── Type.hbm.xml │ ├── UserCourse.hbm.xml │ ├── UserInfo.hbm.xml │ ├── UserTerm.hbm.xml │ ├── hibernate.cfg.xml │ └── struts.xml └── webapp ├── META-INF ├── WEB-INF ├── assets ├── course_list.html ├── css ├── demo ├── front ├── images ├── jquery-easyui-1.7.0 ├── js ├── locale ├── login.html ├── menu.jsp ├── plugins ├── term_list.html └── user_list.html

```

2.安装教程

*默认自己已经配置好了Tomcat、Nodejs等必要的环境

1. 将此项目Pull到本地。
2. 运行SQL目录下的.sql转储文件

3. 导入用户端后端项目,更新Maven,在application.properties配置文件下填写你的数据库账号和密码,启动Tomcat。

①导入用户端前端项目，然后终端输入

angular2 npm install

②因为我所有的网络API全部没有更改，故全局搜索"axios"把所有需要访问外网的API的地址更改为本地地址。

③因为"个人中心"组件中的头像上传我使用了阿里云OSS存储桶，故那块地方的密匙请修改为你自己的密匙。

④等待npm安装完成后，终端输入

angular2 npm run serve

⑤浏览器访问即可！

5.到第四步为止网页已经可以打开了。剩下的就是一个后台管理了，步骤和上述所讲的基本一致，导入，Maven，修改Hibernate的配置文件hibernate.cfg.xml，填写你自己的数据库和密码，运行。

3.前端项目特点

在小组里我负责用户端的页面设计，所以我对这一块了解的比较多，花了一个月时间左右从学习VUE到一个人完成了整个前端页面，成就感还是很有的。

本项目Vue的特点

性能:

• 全站CDN优化

• 组件路由懒加载

• 组件懒加载

UI:

• 全站响应式，手机端完美适配

• CSS风格统一，参见style文件下的common.css

4.系统展示

4.1手机端

4.2客户端

主页

播放页

个人中心

国际化

加入我们

课程修炼

评论

所有课程

我的收藏

最近更新

4.3后台管理

八、代码展示

1.项目配置

```properties mybatis.config-location=classpath:mybatis/mybatis-config.xml mybatis.mapper-locations=classpath:mybatis/mapper/*.xml mybatis.type-aliases-package=cn.miaozt.onlineschool.model

spring.datasource.url=请填写你的数据库地址 spring.datasource.username=数据库账号 spring.datasource.password=数据库密码 spring.datasource.driver-class-name=com.mysql.jdbc.Driver

```

2.swagger接口文档实现

```java package cn.miaozt.onlineschool.config;

import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import springfox.documentation.builders.ApiInfoBuilder; import springfox.documentation.builders.PathSelectors; import springfox.documentation.builders.RequestHandlerSelectors; import springfox.documentation.service.ApiInfo; import springfox.documentation.spi.DocumentationType; import springfox.documentation.spring.web.plugins.Docket; import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration @EnableSwagger2 public class SwaggerConfig { @Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.basePackage("cn.miaozt.onlineschool.web"))//包的路径 .paths(PathSelectors.any()) .build(); } @Bean public ApiInfo apiInfo() { return new ApiInfoBuilder() .title("API文档")//接口文档主题 .description("API网关接口")//地址 .termsOfServiceUrl("www.baidu.com")//路径 .version("1.0.0")//版本号 .build(); } }

```

3.业务代码

```java package cn.miaozt.onlineschool.web;

import java.util.*; import java.util.List; import java.util.Map;

import cn.miaozt.onlineschool.mapper.AdminMapper; import cn.miaozt.onlineschool.model.Admin; import cn.miaozt.onlineschool.model.Result; import io.swagger.annotations.ApiOperation; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*;

import javax.servlet.http.Cookie;

@RestController @RequestMapping(value="/admin") public class AdminController { static Map admins = Collections.synchronizedMap(new HashMap ()); private static Cookie cookie; @Autowired(required = false) private AdminMapper adminMapper; @RequestMapping(value="/", method=RequestMethod.GET) @ApiOperation(value="获取所有管理员", notes="获取所有管理员") public List getAllAdmin() { return adminMapper.getAllAdmin(); }

@RequestMapping(value="/id={id}", method=RequestMethod.GET)
@ApiOperation(value="根据ID获取管理员", notes="根据ID获取管理员")
public List<Admin> getByAdminId(@PathVariable Long id) {
    return adminMapper.getByAdminId(id);
}

@RequestMapping(value="/username={username}", method=RequestMethod.GET)
@ApiOperation(value="根据用户名获取管理员", notes="根据用户名获取管理员")
public List<Admin> getByUsername(@PathVariable String username) {
    return adminMapper.getByUsername(username);
}

@RequestMapping(value="/username={username}&password={password}", method=RequestMethod.POST)
@ApiOperation(value="根据管理员用户名更改密码", notes="根据管理员用户名更改密码")
public Result updatePasswordByAdminName(@PathVariable String username,@PathVariable String password){
    Admin admin=new Admin();
    admin.setUsername(username);
    admin.setPassword(password);
    adminMapper.updatePasswordByAdminName(admin);
    Result result=new Result();
    result.setMsg("update success");
    return result;
}

@RequestMapping(value="/id={id}&password={password}", method=RequestMethod.POST)
@ApiOperation(value="根据管理员ID更改密码", notes="根据管理员ID更改密码")
public Result updatePasswordByAdminId(@PathVariable Long id,@PathVariable String password){
    Admin admin=new Admin();
    admin.setId(id);
    admin.setPassword(password);
    adminMapper.updatePasswordByAdminId(admin);
    Result result=new Result();
    result.setMsg("update success");
    return result;
}

@RequestMapping(value="/username={username}&password={password}", method=RequestMethod.PUT)
@ApiOperation(value="插入管理员", notes="插入管理员")
public Result insertAdmin(@PathVariable String username,@PathVariable String password){
    List<Admin> adminList=getByUsername(username);
    if(adminList!=null&&adminList.size()>0) {
        Result result=new Result();
        result.setMsg("insert failed");
        return result;
    }
    Admin admin=new Admin();
    admin.setUsername(username);
    admin.setPassword(password);
    adminMapper.insertAdmin(admin);
    Result result=new Result();
    result.setMsg("insert success");
    return result;
}

@RequestMapping(value="/username={username}", method=RequestMethod.DELETE)
@ApiOperation(value="根据用户名删除管理员", notes="根据用户名删除管理员")
public Result deleteByAdminName(@PathVariable String username){
    adminMapper.deleteByAdminName(username);
    Result result=new Result();
    result.setMsg("delete success");
    return result;
}

@RequestMapping(value="/id={id}", method=RequestMethod.DELETE)
@ApiOperation(value="根据ID删除管理员", notes="根据ID删除管理员")
public Result deleteByAdminId(@PathVariable Long id){
    adminMapper.deleteByAdminId(id);
    Result result=new Result();
    result.setMsg("delete success");
    return result;
}

} ```

九、测试用例

十、总结

希望给广大程序员们提供一个分享交流的平台，主要提供视频与文档的上传共享功能。目前，在线教育网站很多，但提供交流平台的网站却很少，所以想通过”Hello World”网站面向全世界程序员一起分享技术。

参考文献

• 网络教育管理信息系统的研究与实现（中南大学·段辉良）
• 基于微服务架构的在线学习系统的设计与实现（西安电子科技大学·金志霄）
• 基于微服务架构的在线直播教育平台的设计与实现（华中科技大学·吉国昌）
• MOOC服务平台的设计与实现（齐鲁工业大学·宫琳琳）
• 基于微服务的在线教育系统的设计与实现（华中科技大学·毛颖志）
• 基于微服务架构的在线职业教育系统的设计与实现（华中科技大学·况南）
• 基于微服务的在线教育系统的设计与实现（华中科技大学·毛颖志）
• 基于分布式架构的教育数字化系统的研究与实现（南昌大学·卢丽蓉）
• 基于微服务架构的在线直播教育平台的设计与实现（华中科技大学·吉国昌）
• MOOC服务平台的设计与实现（齐鲁工业大学·宫琳琳）
• MOOC服务平台的设计与实现（齐鲁工业大学·宫琳琳）
• 基于J2EE的远程教育平台的开发与实现（吉林大学·葛瑛）
• 基于微服务架构的学习系统设计与实现（华中师范大学·熊其昌）
• 基于MVVM设计模式的在线教育系统的设计与实现（北京邮电大学·刘紫薇）
• 基于微服务架构的在线学习系统的设计与实现（西安电子科技大学·金志霄）