博主介绍：专注于Java（springboot ssm 等开发框架） vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1500+毕设题目 方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
更多项目地址 介绍 翰文编程CSDN博客 翰文编程-CSDN博客
文末下方有源码获取地址
ssm+vue683基于VUE.js的在线教育系统
4.1系统功能结构设计
本系统的功能界面设计为四个，前台界面、学生中心界面和管理员中心界面、教师中心界面。根据不同用户的不同需求分开设计功能。前台界面的功能为课程信息、首页、个人中心、后台管理等，学生中心界面的功能为个人资料、我的收藏管理、课程订单管理等，管理员中心界面的功能为学生信息、课程信息管理等，教师中心界面的功能为课程、章节管理等。本系统的功能结构图如下图4.1所示：
图4.1系统功能结构图
4.2系统数据库设计
在 基于 VUE.js 的在线教育系统 中，数据库采用了 MySQL 进行设计，以确保数据的高效存储和管理。为了保证数据的安全性和独立性，系统在数据库建立时采用了单独的数据库结构，从而避免系统崩溃时数据丢失的问题。数据库不仅具备独立性，还具有良好的共享性，能够在系统运行过程中自动与相应的数据进行通讯连接。系统的身份验证采用 Root 用户，密码为 Root，确保了用户身份的验证和权限管理。通过这一设计，系统能够稳定、高效地处理大量数据，同时保证数据的安全性和完整性，支撑在线教育平台的平稳运行。
4.2.1数据库ER图设计
根据分析所得本系统中主要的数据为管理员、学生、课程信息、课程视频、订单信息、留言信息等。所以本节针对这些数据画出数据ER图。
（1）管理员实体的属性为用户名和密码。管理员实体ER图如下图4.2所示：
图4.2管理员实体ER图
（2）学生实体的属性为编号、姓名、班级、专业等。学生实体ER图如下图4.3所示：
图4.3学生实体ER图
（3）留言信息实体的属性包括留言人、留言时间、内容等。留言信息实体ER图如下图4.4所示：
图4.4留言信息实体ER图
（4）订单实体的属性包括编号、购买课程、订单时间、价格等。订单实体的ER图如下图4.5所示：
图4.5订单实体ER图
（5）类别信息实体的属性包括编号和名称。类别信息实体ER图如下图4.6所示：
图4.6分类信息实体的ER图
（6）本系统的关系ER图如下图4.7所示：
图4.7系统关系ER图
4.2.2数据库表设计
本系统针对课程在线学习而设计，所以本系统的数据库表围绕课程而建立。本系统的数据库表包括课程信息表、留言信息表、订单信息表等。本系统的数据库表结构如下图4.1－4.13 所示：
表4.1 config
表4.2 dictionary
表4.3 kecheng
表4.4 kecheng_collection
表4.5 kecheng_liuyan
表4.6 kecheng_order
表4.7 laoshi
表4.8 token
表4.9 users
表4.10 xuesheng
表4.11 zhangjie
表4.12 zhangjie_collection
表4.13 zhangjie_liuyan
第5章 系统实现
5.1前台界面的实现
在前台里所有的信息都是共享的，注册用户、非注册用户、游客都可以浏览。主要为课程信息、个人中心和后台管理。
5.1.1首页界面的实现
本功能设计的目的是帮助用户一键返回首页，在首页里的元素包括轮播图、列表框、文字、图片等。在首页的上半部分是绿底白字的系统名称，系统名称下面是导航栏，接着就是轮播图，轮播图下面是课程信息。首页界面的实现界面如下图5.1所示：
图5.1首页界面的实现效果
5.1.2课程信息功能的实现界面
在课程信息界面里可以看到所有的课程。课程信息以课程的封面来展示，学生可以一目了然。课程信息功能的实现界面如下图5.2所示：
图5.2课程信息功能的实现界面
课程详情的实现界面如下图5.3所示：
图5.3课程详情的实现界面
主要代码
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
String role = String.valueOf(request.getSession().getAttribute("role"));
if(false)
return R.error(511,"永不会进入");
else if("学生".equals(role))
params.put("xueshengId",request.getSession().getAttribute("userId"));
else if("老师".equals(role))
params.put("laoshiId",request.getSession().getAttribute("userId"));
else if("部门主管".equals(role))
params.put("bumenzhuguanId",request.getSession().getAttribute("userId"));
else if("校长".equals(role))
params.put("xiaozhangId",request.getSession().getAttribute("userId"));
params.put("kechengDeleteStart",1);params.put("kechengDeleteEnd",1);
if(params.get("orderBy")==null || params.get("orderBy")==""){
params.put("orderBy","id");
}
PageUtils page = kechengService.queryPage(params);
//字典表数据转换
List<KechengView> list =(List<KechengView>)page.getList();
for(KechengView c:list){
//修改对应字典表字段
dictionaryService.dictionaryConvert(c, request);
}
return R.ok().put("data", page);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id, HttpServletRequest request){
logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
KechengEntity kecheng = kechengService.selectById(id);
if(kecheng !=null){
//entity转view
KechengView view = new KechengView();
BeanUtils.copyProperties( kecheng , view );//把实体数据重构到view中
//级联表
LaoshiEntity laoshi = laoshiService.selectById(kecheng.getLaoshiId());
if(laoshi != null){
BeanUtils.copyProperties( laoshi , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
view.setLaoshiId(laoshi.getId());
}
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody KechengEntity kecheng, HttpServletRequest request){
logger.debug("save方法:,,Controller:{},,kecheng:{}",this.getClass().getName(),kecheng.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
if(false)
return R.error(511,"永远不会进入");
else if("老师".equals(role))
kecheng.setLaoshiId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
Wrapper<KechengEntity> queryWrapper = new EntityWrapper<KechengEntity>()
.eq("laoshi_id", kecheng.getLaoshiId())
.eq("kecheng_name", kecheng.getKechengName())
.eq("kecheng_types", kecheng.getKechengTypes())
.eq("kecheng_clicknum", kecheng.getKechengClicknum())
.eq("shangxia_types", kecheng.getShangxiaTypes())
.eq("kecheng_delete", kecheng.getKechengDelete())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
KechengEntity kechengEntity = kechengService.selectOne(queryWrapper);
if(kechengEntity==null){
kecheng.setKechengClicknum(1);
kecheng.setShangxiaTypes(1);
kecheng.setKechengDelete(1);
kecheng.setCreateTime(new Date());
kechengService.insert(kecheng);
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
/**
* 后端修改
*/
@RequestMapping("/update")
public R update(@RequestBody KechengEntity kecheng, HttpServletRequest request){
logger.debug("update方法:,,Controller:{},,kecheng:{}",this.getClass().getName(),kecheng.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
// if(false)
// return R.error(511,"永远不会进入");
// else if("老师".equals(role))
// kecheng.setLaoshiId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
//根据字段查询是否有相同数据
Wrapper<KechengEntity> queryWrapper = new EntityWrapper<KechengEntity>()
.notIn("id",kecheng.getId())
.andNew()
.eq("laoshi_id", kecheng.getLaoshiId())
.eq("kecheng_name", kecheng.getKechengName())
.eq("kecheng_types", kecheng.getKechengTypes())
.eq("kecheng_clicknum", kecheng.getKechengClicknum())
.eq("shangxia_types", kecheng.getShangxiaTypes())
.eq("kecheng_delete", kecheng.getKechengDelete())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
KechengEntity kechengEntity = kechengService.selectOne(queryWrapper);
if("".equals(kecheng.getKechengPhoto()) || "null".equals(kecheng.getKechengPhoto())){
kecheng.setKechengPhoto(null);
}
if(kechengEntity==null){
kechengService.updateById(kecheng);//根据id更新
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
5.1.3个人中心功能的实现界面
用户登录后在个人中心里可以管理自己的注册信息和收藏信息、订单信息，实现界面如下图5.4所示：
图5.4用户中心的功能实现界面
5.1.4课程购买功能的实现界面
在本功能模块里展示购买的课程名称、点击次数以及订单号。课程购买信息功能的实现界面如下图5.5所示：
图5.5课程购买信息功能的实现界面
5.1.5课程视频功能的实现界面
课程视频功能里可以看到课程的图片和标题，点击课程图片可以进入课程详情里，在课程详情里用户可以留言和收藏课程以及播放课程视频。课程视频功能的实现界面如下图5.6所示：
图5.6课程视频功能的实现界面
5.1.6在线留言功能的实现界面
用户在添加留言时可以只填写留言内容，留言成功后会显示留言人的账号和头像。用户在线留言功能的实现界面如下图5.7所示：
图5.7用户在线留言功能的实现界面
大家点赞、收藏、关注、评论啦 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者