黑马程序员技术交流社区

标题: 【郑州校区】学成在线 第6天 讲义-页面发布 课程管理六 [打印本页]
作者: 我是楠楠    时间: 2019-12-12 14:27
标题: 【郑州校区】学成在线 第6天 讲义-页面发布 课程管理六
【郑州校区】学成在线 第6天 讲义-页面发布 课程管理六

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

'

}, {

id: 10,

label:

'

三级 1

‐

1

‐

2

'

}]

}]

}]

}

}

}


3.2.2.2 webstorm配置JSX
本组件用到了JSX语法，如下所示：


JSX 是Javascript和XML结合的一种格式，它是React的核心组成部分，JSX和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
遇到代码块（以 { 开头），就用 JavaScript 规则解析。
下面是官方的一个例子：


设置方法 如下：









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