黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day6（八） [打印本页]

---

作者: 谷粒姐姐    时间: 2019-2-26 12:02
标题: 【郑州校区】Java的新项目学成在线笔记-day6（八）
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、组件标签

[AppleScript] 纯文本查看 复制代码

<el‐tree    

   :data="data" 

      show‐checkbox     

  node‐key="id"    

   default‐expand‐all    

   :expand‐on‐click‐node="false"  

     :render‐content="renderContent">    

 </el‐tree>

2、数据对象

[AppleScript] 纯文本查看 复制代码

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'

[AppleScript] 纯文本查看 复制代码

 }, {      

         id: 10,           

    label: '三级 1‐1‐2'  

           }]     

      }]      

   }]   

    }   

   }  

  }

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2