ssm+vue683基于VUE.js的在线教育系统设计与实现

博主介绍：专注于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转viewKechengView 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,"表中有相同数据");}}