基于springboot vue 在线学习网站系统设计与实现_基于springboot的在线教育平台的流程图-CSDN博客

本文链接：https://blog.csdn.net/qq_41221322/article/details/142589419

博主介绍：专注于Java vue .net php phython 小程序等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1000+毕设题目方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人

更多项目地址 qq_251836457-CSDN博客
下方有源码获取地址

开篇系统发一个系统实现的截图

1. 功能需求分析

在线学习网站的功能主要分为前台用户根据自己的需求进行注册登录，浏览课程信息并对选中的教学资源进行学习操作。后台系统管理员根据需求进行校园资讯、用户管理、话题讨论、资讯分类列表、作业题目、学院信息、课程信息进行处理。

用户用例图如下所示。

图3-1 学生用例图

管理员用例图如下所示。

图3-2 管理员用例图

1. 数据流程分析

对系统的数据流进行分析，系统的使用者分为二类，一般用户，管理员。系统主要对界面信息传送，登录信息的验证，注册信息的接收，用户各种操作的响应做处理。

系统顶层数据流图如下图所示。

图3-3 顶层数据流图

系统设计
1. 系统架构设计

本在线学习网站的架构设计主要分为可以3层，主要有Web层，业务层，Model层。其中web层还包括View层和Controller层，Model层包括元数据扩展层和数据访问层。

系统架构如下图所示。

图4-1 系统架构

1. 系统总体设计

在线学习网站总体分为前台用户模块和后台管理员模块。

两个模块表现上是分别独立存在，但是访问的数据库是一样的。每一个模块的功能都是根据先前完成的需求分析，并查阅相关资料后整理制作的。

综上所述，系统功能结构图如下图所示。

图4-2 系统功能结构图

1. 系统功能设计

一个好的数据库可以关系到程序开发的优劣，数据库设计离不开表结构的设计，还有表与表之间的联系，以及系统开发需要设计的数据表内容等信息。在进行数据库设计期间，要结合实际情况来对数据库进行针对性的开发设计。

E-R图，更加直观的告诉开发人员系统的各个数据的属性，各个数据之间的联系，各个数据的类型。能通过该模型更直观地了解数据库的设计，并根据对其逐渐改善。

本系统图设计，如下图所示。

图4-3 系统ER图

1. 系统功能设计

由于数据表较多，只展示系统主要数据表，如下表所示。

user_answer表:

名称	类型	长度	不是null	主键	注释
user_answer_id	mediumint	8	是	是
user_id	mediumint	8	是	否	用户ID
exam_id	mediumint	8	是	否	考试id
score	double	8	否	否	分数
answers	varchar	1000	否	否	答案
score_detail	varchar	1000	否	否	评分详情
objective_score	double	8	否	否	客观题得分
subjective_score	double	8	否	否	主观题得分
score_state	tinyint	2	否	否	评分状态
nickname	varchar	255	否	否	提交人
create_time	timestamp	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间



teacher_user表：
名称	类型	长度	不是null	主键	注释
teacher_user_id	int	11	是	是	教师用户ID
full_name	varchar	64	否	否	姓名
gender	varchar	64	否	否	性别
post	varchar	64	否	否	职务
faculty	varchar	64	否	否	院系
examine_state	varchar	16	是	否	审核状态
recommend	int	11	是	否	智能推荐
user_id	int	11	是	否	用户ID
create_time	datetime	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间



student_user表：
名称	类型	长度	不是null	主键	注释
student_user_id	int	11	是	是	学生用户ID
full_name	varchar	64	否	否	姓名
gender	varchar	64	否	否	性别
major	varchar	64	否	否	专业
faculty	varchar	64	否	否	院系
examine_state	varchar	16	是	否	审核状态
recommend	int	11	是	否	智能推荐
user_id	int	11	是	否	用户ID
create_time	datetime	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

exam_question表：
名称	类型	长度	不是null	主键	注释
exam_question_id	mediumint	8	是	是
type	varchar	20	否	否	类型
title	varchar	255	否	否	题目
question_item	varchar	500	否	否	选项
answer	varchar	500	否	否	参考答案
score	double	8	否	否	总分
question_order	int	11	否	否	排序
exam_id	mediumint	8	否	否	所属试卷
create_time	timestamp	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间



course_information表：
名称	类型	长度	不是null	主键	注释
course_information_id	int	11	是	是	课程信息ID
course_name	varchar	64	否	否	课程名称
major	varchar	64	否	否	专业
teacher	int	11	否	否	教师
remarks	varchar	64	否	否	备注
course_cover	varchar	255	否	否	课程封面
course_video	varchar	255	否	否	课程视频
course_attachment	varchar	255	否	否	课程附件
course_introduction	text	0	否	否	课程介绍
recommend	int	11	是	否	智能推荐
create_time	datetime	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间



college_information表
名称	类型	长度	不是null	主键	注释
college_information_id	int	11	是	是	学院信息ID
college_name	varchar	64	否	否	学院名称
college_address	varchar	64	否	否	学院地址
contact_number	varchar	64	否	否	联系电话
college_pictures	varchar	255	否	否	学院图片
college_introduction	text	0	否	否	学院介绍
recommend	int	11	是	否	智能推荐
create_time	datetime	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

Collect表：
名称	类型	长度	不是null	主键	注释
collect_id	int	10	是	是	收藏ID
user_id	int	10	是	否	收藏人ID
source_table	varchar	255	否	否	来源表
source_field	varchar	255	否	否	来源字段
source_id	int	10	是	否	来源ID
title	varchar	255	否	否	标题
img	varchar	255	否	否	封面
create_time	timestamp	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

系统实现
1. 数据库访问层的实现

该系统是通过jdbc和MySQL达成连接的，新建一个jdbc.properties文件来填写与数据库连接所需要的驱动和参数。

jdbc.driverClass=com.MySQL.jdbc.Driver

jdbc.url=jdbc:MySQL://localhost:3306/tsi

jdbc.username=root

jdbc.password=123

第一个参数代表MySQL数据库的驱动，第二个参数代表要连接的数据库，第三个和第四个参数代表数据库连接名和密码。

后台与数据库访问主要是通过HQL语句来进行查询的，查询语句中的表名是表格的实体类名，在这种查询语句中*是不允许使用的，除非适合聚合函数一起使用才可以。

1. 登录模块的实现

主要由两部分组成，登录前的登录界面以及登录后的用户功能界面。登录界面，要求用户输入用户名和密码，当用户名和密码其中一个输入为空时，给出提示“用户名，密码不能为空”。获取用户名和密码后到数据库中查找，如果用户名存在，以及对应的密码正确，则登录成功，否则登录失败。登录失败后给出提示，并把焦点停在文本框中。登录成功后将该次会话的全局变量username设置为用户名。登录成功后进入会员的功能模块，主要有会员基本信息修改，已经发布试题信息管理，发布信息，和退出功能。退出功能是清除全局变量username的值，并跳回到首页。

登录流程图如下图所示。

图5-1登录流程图

登录界面如下图所示。

图5-1登录界面图

用户登录的关键代码如下。

/**

* 登录

* @param data

* @param httpServletRequest

* @return

@PostMapping("login")

public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {

log.info("[执行登录接口]");

String username = data.get("username");

String email = data.get("email");

String phone = data.get("phone");

String password = data.get("password");

List resultList = null;

Map<String, String> map = new HashMap<>();

if(username != null && "".equals(username) == false){

map.put("username", username);

resultList = service.select(map, new HashMap<>()).getResultList();

}

else if(email != null && "".equals(email) == false){

map.put("email", email);

resultList = service.select(map, new HashMap<>()).getResultList();

}

else if(phone != null && "".equals(phone) == false){

map.put("phone", phone);

resultList = service.select(map, new HashMap<>()).getResultList();

}else{

return error(30000, "账号或密码不能为空");

}

if (resultList == null || password == null) {

return error(30000, "账号或密码不能为空");

}

//判断是否有这个用户

if (resultList.size()<=0){

return error(30000,"用户不存在");

}

User byUsername = (User) resultList.get(0);

Map<String, String> groupMap = new HashMap<>();

groupMap.put("name",byUsername.getUserGroup());

List groupList = userGroupService.select(groupMap, new HashMap<>()).getResultList();

if (groupList.size()<1){

return error(30000,"用户组不存在");

}

UserGroup userGroup = (UserGroup) groupList.get(0);

//查询用户审核状态

if (!StringUtils.isEmpty(userGroup.getSourceTable())){

String sql = "select examine_state from "+ userGroup.getSourceTable() +" WHERE user_id = " + byUsername.getUserId();

String res = String.valueOf(service.runCountSql(sql).getSingleResult());

if (res==null){

return error(30000,"用户不存在");

}

if (!res.equals("已通过")){

return error(30000,"该用户审核未通过");

}

//查询用户状态

if (byUsername.getState()!=1){

return error(30000,"用户非可用状态，不能登录");

}

String md5password = service.encryption(password);

if (byUsername.getPassword().equals(md5password)) {

// 存储Token到数据库

AccessToken accessToken = new AccessToken();

accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));

accessToken.setUser_id(byUsername.getUserId());

tokenService.save(accessToken);

// 返回用户信息

JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));

user.put("token", accessToken.getToken());

JSONObject ret = new JSONObject();

ret.put("obj",user);

return success(ret);

} else {

return error(30000, "账号或密码不正确");

}

1. 用户资料修改模块的实现

用户登录/注册成功之后可以修改自己的基本信息。修改页面的表单中每一个input的name值都要与实体类中的参数相匹配，在用户点击修改页面的时候，如果改后用户名与数据库里面重复了，页面会提示该用户名已经存在了，否则通过Id来查询用户，并将用户的信息修改为表单提交的数据。

1. 课程信息管理模块的实现

课程信息功能整体流程：用户课程信息信息时，同时会显示课程信息的状态，系统会在其显示详细信息的页面时便会判断课程信息的状态，若课程信息状态为可上交，则会显示上交的链接按钮。在用户点击上交按钮时，会先通过拦截器判断用户是否登录，若未登录，会跳转至登录页面，提示用户先登录，若为登录用户就会跳转至填写上交信息的页面，填写好上交信息之后，点击提交按钮，上交成功之后返回提示信息，告知用户上交成功。

课程信息流程图如下图所示。

图5-1课程信息流流程图

课程信息界面如下图所示。

图5-1课程信息界面

课程信息关键代码如下所示。

@PostMapping("/add")

@Transactional

public Map<String, Object> add(HttpServletRequest request) throws IOException {

service.insert(service.readBody(request.getReader()));

return success(1);

}

@Transactional

public Map<String, Object> addMap(Map<String,Object> map){

service.insert(map);

return success(1);

}

public Map<String,Object> readBody(BufferedReader reader){

BufferedReader br = null;

StringBuilder sb = new StringBuilder("");

try{

br = reader;

String str;

while ((str = br.readLine()) != null){

sb.append(str);

}

br.close();

String json = sb.toString();

return JSONObject.parseObject(json, Map.class);

}catch (IOException e){

e.printStackTrace();

}finally{

if (null != br){

try{

br.close();

}catch (IOException e){

e.printStackTrace();

}

return null;

}

public void insert(Map<String,Object> body){

StringBuffer sql = new StringBuffer("INSERT INTO ");

sql.append("`").append(table).append("`").append(" (");

for (Map.Entry<String,Object> entry:body.entrySet()){

sql.append("`"+humpToLine(entry.getKey())+"`").append(",");

}

sql.deleteCharAt(sql.length()-1);

sql.append(") VALUES (");

for (Map.Entry<String,Object> entry:body.entrySet()){

Object value = entry.getValue();

if (value instanceof String){

sql.append("'").append(entry.getValue()).append("'").append(",");

}else {

sql.append(entry.getValue()).append(",");

}

sql.deleteCharAt(sql.length() - 1);

sql.append(")");

log.info("[{}] - 插入操作：{}",table,sql);

Query query = runCountSql(sql.toString());

query.executeUpdate();

}

1. 校园资讯模块的实现

校园资讯模块，管理员根据需要添加标题、封面图、文章分类、标签等详情、查看评论，并可根据需要删除或者修改校园资讯信息。

校园资讯管理界面如下图所示。

图5-1校园资讯界面图

校园资讯管理关键代码如下所示。

@RequestMapping(value = "/del")

@Transactional

public Map<String, Object> del(HttpServletRequest request) {

service.delete(service.readQuery(request), service.readConfig(request));

return success(1);

}

@Transactional

public void delete(Map<String,String> query,Map<String,String> config){

StringBuffer sql = new StringBuffer("DELETE FROM ").append("`").append(table).append("`").append(" ");

sql.append(toWhereSql(query, "0".equals(config.get(FindConfig.GROUP_BY))));

log.info("[{}] - 删除操作：{}",table,sql);

Query query1 = runCountSql(sql.toString());

query1.executeUpdate();

}

1. 作业题目管理模块的实现

根据需求，需要对作业题目进行添加、删除或修改音频详情信息。删除或修改音频资源时，系统根据课程资源的状态判定为可删除状态下，才会给出删除和修改链接，点击删除链接按钮时，请求到达后台，还会先查询课程资源状态再次做出判定能否删除。点击修改链接按钮时，会跳转到修改信息的页面，重新填写好数据后，数据提交到后台会对数据库中相应的记录做出修改。

作业题目管理界面如下图所示。