黑马程序员技术交流社区

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

3.2.4 前端页面
3.2.4.1Api方法
定义课程计划查询的api方法：
[AppleScript] 纯文本查看 复制代码
 /

*

查询课程计划

*

/

export const findTeachplanList

=

courseid

=

> {

return http

.requestQuickGet(apiUrl+

'

/course/teachplan/list/

'

+courseid)

}

3.2.4.2Api调用
1、在mounted钩子方法 中查询 课程计划
定义查询课程计划的方法，赋值给数据对象teachplanList
[AppleScript] 纯文本查看 复制代码
 findTeachplan(){

courseApi.findTeachplanList(this.courseid)

.then((res)

=

> {

this.teachplanList

=

[];//清空树

if(res.children){

this.teachplanList

= res.children;

}

})


2）在mounted钩子中查询课程计划
[AppleScript] 纯文本查看 复制代码
 mounted(){

//课程id

this.courseid

=

this.

$route.

params.courseid;

//课程计划

this.findTeachplan();

}


3）修改树结点的标签属性
课程计划信息中pname为结点的名称，需要修改树结点的标签属性方可正常显示课程计划名称，如下：
[AppleScript] 纯文本查看 复制代码
 defaultProps: {

children:

'

children

'

,

label:

'

pname

'

}


3.2.4.3 测试


3.3 添加课程计划
3.3.1 需求分析
用户操作流程：
1、进入课程计划页面，点击“添加课程计划”
2、打开添加课程计划页面，输入课程计划信息


上级结点说明：
不选择上级结点表示当前课程计划为该课程的一级结点。
当添加该课程在课程计划中还没有节点时要自动添加课程的根结点。
3、点击提交。
3.3.1.1 页面原型说明
添加课程计划采用弹出窗口组件Dialog。
1、视图部分
在course_plan.vue页面添加添加课程计划的弹出窗口代码：

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

‐

dialog title

=

"

添加课程计划

"

:visible.sync

=

"

teachplayFormVisible

"

>

<el

‐

form ref=

"

teachplayForm

"

:model=

"

teachplanActive

"

label

‐

width=

"

140px

"

style

=

"

width:600px;

"

:rules

=

"

teachplanRules

"

>

<el

‐

form

‐

item label=

"

上级结点

"

>

<el

‐

select v

‐

model=

"

teachplanActive.

parentid

"

placeholder=

"

不填表示根结点

"

>

<el

‐

option

v

‐

for=

"

item in teachplanList

"

:key

=

"

item.id

"

:label=

"

item.

pname

"

:value

=

"

item.id

"

>

</el

‐

option>

</el

‐

select>

</el

‐

form

‐

item>

<el

‐

form

‐

item label=

"

章节/课时名称

"

prop

=

"

pname

"

>

<el

‐

input v

‐

model=

"

teachplanActive.

pname

"

auto

‐

complete

=

"

off

"

></el

‐

input>

</el

‐

form

‐

item>

<el

‐

form

‐

item label=

"

课程类型

"

>

<el

‐

radio

‐

group v

‐

model=

"

teachplanActive.

ptype

"

>

<el

‐

radio class

=

"

radio

"

label=

'

1

'

>视频</el

‐

radio>

<el

‐

radio class

=

"

radio

"

label=

'

2

'

>文档</el

‐

radio>

</el

‐

radio

‐

group>

</el

‐

form

‐

item>

<el

‐

form

‐

item label=

"

学习时长（分钟） 请输入数字

"

>

<el

‐

input type

=

"

number

"

v

‐

model=

"

teachplanActive.timelength

"

auto

‐

complete

=

"

off

"

></el

‐

input>

</el

‐

form

‐

item>

<el

‐

form

‐

item label=

"

排序字段

"

>

<el

‐

input v

‐

model=

"

teachplanActive.orderby

"

auto

‐

complete

=

"

off

"

></el

‐

input>

</el

‐

form

‐

item>

<el

‐

form

‐

item label=

"

章节/课时介绍

"

prop

=

"

description

"

>

<el

‐

input type

=

"

textarea

"

v

‐

model=

"

teachplanActive.description

"

></el

‐

input>

</el

‐

form

‐

item>

<el

‐

form

‐

item label=

"

状态

"

prop

=

"

status

"

>

<el

‐

radio

‐

group v

‐

model=

"

teachplanActive.status

"

>

<el

‐

radio class

=

"

radio

"

label=

"

0

"

>未发布</el

‐

radio>

<el

‐

radio class

=

"

radio

"

label=

'

1

'

>已发布</el

‐

radio>

</el

‐

radio

‐

group>

</el

‐

form

‐

item>

<el

‐

form

‐

item >

<el

‐

button type

=

"

primary

"

v

‐

on:click=

"

addTeachplan

"

>提交</el

‐

button>

<el

‐

button type

=

"

primary

"

v

‐

on:click=

"

resetForm

"

>重置</el

‐

button>

</el

‐

form

‐

item>

</el

‐

form>

</el

‐

dialog>

2、数据模型
在数据模型中添加如下变量：
在数据对象中添加：
[AppleScript] 纯文本查看 复制代码
teachplayFormVisible:false,

teachplanRules: {

pname: [

{required: true, message:

'

请输入课程计划名称

'

, trigger:

'

blur

'

}

],

status: [

{required: true, message:

'

请选择状态

'

, trigger:

'

blur

'

}

]

},

teachplanActive:{},


3、 添加按钮

通过变量teachplayFormVisible控制弹出窗口是否显示。
[AppleScript] 纯文本查看 复制代码
 <el

‐

button type

=

"

primary

"

@click=

"

teachplayFormVisible

=

true

"

>添加课程计划</el

‐

button>


4、定义表单提交方法和重置方法
[AppleScript] 纯文本查看 复制代码
 //提交课程计划

addTeachplan(){

alert()

},

//重置表单

resetForm(){

this.teachplanActive

=

{}

},


3.3.3 API接口
1）添加课程计划
[AppleScript] 纯文本查看 复制代码
 @ApiOperation(

"

添加课程计划

"

)

public ResponseResult addTeachplan(Teachplan teachplan);







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