黑马程序员技术交流社区

标题: 【郑州校区】学成在线第3天讲义-CMS页面管理开发四 [打印本页]

作者: 我是楠楠 时间: 2019-12-5 15:21
标题: 【郑州校区】学成在线第3天讲义-CMS页面管理开发四

【郑州校区】学成在线第3天讲义-CMS页面管理开发四

2.3.1.2 添加返回
进入新增页面后只能通过菜单再次进入页面列表，可以在新增页面添加“返回”按钮，点击返回按钮返回到页面列表。
1) 新增页面按钮带上参数

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

<router

‐

link class

=

"

mui

‐

tab

‐

item

"

:to

=

"

{path:

'

/cms/page/add/

'

,query:{

page: this.

params.

page,

siteId: this.

params.siteId}}

"

>

<el

‐

button type

=

"

primary

"

size

=

"

small

"

>新增页面</el

‐

button>

</router

‐

link>

说明：query表示在路由url上带上参数
2）定义返回方法
在page_add.vue上定义返回按钮

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

 <el‐button type="primary"@click="go_back">返回</el‐button>

在page_add.vue上定义返回方法

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

 go_back(){

this.

$router.

push({

path:

'

/cms/page/list

'

, query: {

page: this.

$route.

query

.

page,

siteId:this.

$route.

query

.siteId

}

})

}

说明：this.$route.query 表示取出路由上的参数列表，有两个取路由参数的方法：

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

a、通过在路由上添加key/value串使用this.

$route.

query来取参数，例如：/router1?id

=123 ,/router1?id

=456

可以通过this.

$route.

query

.id获取参数id的值。

b、通过将参数作为路由

一

部分进行传参数使用this.

$route.

params来获取，例如：定义的路由为/router1/:id ，请

求/router1/123时可以通过this.

$route.

params.id来获取，此种情况用this.

$route.

query

.id是拿不到的。

3）查询列表支持回显
进入查询列表，从url中获取页码和站点id并赋值给数据模型对象，从而实现页面回显。
url例子：http://localhost:12000/#/cms/page/list?page=2&siteId=5a751fab6abb5044e0d19ea1

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

created() {

//从路由上获取参数

this.

params.

page

= Number.

parseInt(this.

$route.

query

.

page||1);

this.

params.siteId

=

this.

$route.

query

.siteId||

''

;

.....

小技巧：使用 ||返回第
一
个有效值
2.3.1.3 表单校验
1、配置校验规则：
Element-UI的Form组件提供表单校验的方法：
在form属性上配置rules（表单验证规则）

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

<el‐form :model="pageForm":rules="pageFormRules"label‐width="80px">

在数据模型中配置校验规则：

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

 pageFormRules: {

siteId:[

{required: true, message:

'

请选择站点

'

, trigger:

'

blur

'

}

],

templateId:[

{required: true, message:

'

请选择模版

'

, trigger:

'

blur

'

}

],

pageName: [

{required: true, message:

'

请输入页面名称

'

, trigger:

'

blur

'

}

],

pageWebPath: [

{required: true, message:

'

请输入访问路径

'

, trigger:

'

blur

'

}

],

pagePhysicalPath: [

{required: true, message:

'

请输入物理路径

'

, trigger:

'

blur

'

}

]

}

更多的校验规则参考http://element.eleme.io/#/zh-CN/component/form中“表单验证”的例子。
2、点击提交按钮触发校验
1)在form表单上添加 ref属性（ref="pageForm"）在校验时引用此表单对象

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

<el‐form :model="pageForm":rules="pageFormRules"label‐width="80px"ref="pageForm">

2）执行校验

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

 this.

$refs.

pageForm.validate((valid)

=

> {

if (valid) {

alert(

'

提交

'

);

} else {

alert(

'

校验失败

'

);

return false;

}

})

2.3.2 Api调用
1、在cms.js中定义page_add方法。

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

/

*

页面添加

*

/

export const page_add

=

params

=

> {

return http

.requestPost(apiUrl+

'

/cms/page/add

'

,params)

}

2、添加事件
本功能使用到两个UI组件：
1、使用element-ui的message-box组件弹出确认提交窗口（http://element.eleme.io/#/zh-CN/component/message-box）。

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

this.$confirm('确认提交吗？','提示', {}).then(()=> {｝）

2、使用 message组件提示操作结果（http://element.eleme.io/#/zh-CN/component/message）

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

this.$message({message:'提交成功',type:'success'})

完整的代码如下：

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

addSubmit(){

this.

$refs.

pageForm.validate((valid)

=

> {

if (valid) {

this.

$confirm(

'

确认提交吗？

'

,

'

提示

'

, {})

.then(()

=

> {

cmsApi.

page_add(this.

pageForm)

.then((res)

=

> {

console.log(res);

if(res.success){

this.

$message({

message:

'

提交成功

'

,

type:

'

success

'

});

this.

$refs[

'

pageForm

'

]

.resetFields();

}else{

this.

$message.error(

'

提交失败

'

);

}

});

});

}

});

}

下边是测试：
1、进入页面列表页面

2、点击“增加页面”按钮

3.输入页面信息点击提交。

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

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