2.3.2导入课程管理服务工程 1)持久层技术介绍: 课程管理服务使用MySQL数据库存储课程信息,持久层技术如下: 1、spring data jpa:用于表的基本CRUD。 2、mybatis:用于复杂的查询操作。 3、druid:使用阿里巴巴提供的spring boot 整合druid包druid-spring-boot-starter管理连接池。 druid-spring-boot-starter地址:https://github.com/alibaba/druid ... spring-boot-starter
2)导入工程 导入资料下的“xc-service-manage-course.zip”。 2.3.3 导入课程管理前端工程 课程管理属于教学管理子系统的功能,使用用户为教学机构的管理人员和老师,为保证系统的可维护性,单独创建 一个教学管理前端工程。 教学管理前端工程与系统管理前端的工程结构一样,也采用vue.js框架来实现。 3 课程计划 3.1 需求分析 什么是课程计划? 课程计划定义了课程的章节内容,学生通过课程计划进行在线学习,下图中右侧显示的就是课程计划。 课程计划包括两级,第一级是课程的大章节、第二级是大章节下属的小章节,每个小章节通常是一段视频,学生点 击小章节在线学习。 教学管理人员对课程计划如何管理? 功能包括:添加课程计划、删除课程计划、修改课程计划等。

3.2 课程计划查询 3.2.1需求分析 课程计划查询是将某个课程的课程计划内容完整的显示出来,如下图所示:

左侧显示的就是课程计划,课程计划是一个树型结构,方便扩展课程计划的级别。 在上边页面中,点击“添加课程计划”即可对课程计划进行添加操作。 点击修改可对某个章节内容进行修改。 点击删除可删除某个章节。

3.2.2 页面原型 3.2.2.1 tree组件介绍 本功能使用element-ui 的tree组件来完成

在course_plan.vue文件中添加tree组件的代码,进行测试: 1、组件标签

<el‐tree    
   :data="data"
      show‐checkbox     
  node‐key="id"   
   default‐expand‐all    
   :expand‐on‐click‐node="false" 
     :render‐content="renderContent">   
 </el‐tree>

2、数据对象

let id = 1000; 
    export default {
    data() {   
   return {    
    data : [{     
     id: 1,    
      label: '一级 1',   
       children: [{   
         id: 4,      
      label: '二级 1‐1',      
      children: [{   
           id: 9,       
       label: '三级 1‐1‐1'

}, {     
        id: 10,          
   label: '三级 1‐1‐2'  
          }]     
     }]      
  }]   
   }  
  } 
 }