黑马程序员技术交流社区

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

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

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

4 删除页面
用户操作流程：
1、用户进入用户列表，点击“删除”
2、执行删除操作，提示“删除成功”或“删除失败”
4.1 删除页面接口定义

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

@ApiOperation("通过ID删除页面")

public ResponseResult delete(String id);

4.2 删除页面服务端开发
4.2.1Dao
使用 Spring Data提供的deleteById方法完成删除操作。
4.2.2 Service

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

//删除页面

public ResponseResult delete(String id){

CmsPage one

=

this.

getById(id);

if(one!

=null){

//删除页面

cmsPageRepository

.deleteById(id);

return new ResponseResult(CommonCode.SUCCESS);

}

return new ResponseResult(CommonCode.FAIL);

}

4.2.3Controller

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

 @DeleteMapping(

"

/del/{id}

"

) //使用http的delete方法完成岗位操作

public ResponseResult delete(@PathVariable(

"

id

"

) String id) {

return pageService.delete(id);

}

4.3 删除页面前端开发
4.3.1 Api方法

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

/

*

页面删除

*

/

export const page_del = id

=

> {

return http

.requestDelete(apiUrl+

'

/cms/page/del/

'

+id)

}

4.3.2编写页面
1、在page_list.vue页面添加删除按钮

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

 <el

‐

table

‐

column label=

"

操作

"

width=

"

120

"

>

<template slot

‐

scope

=

"

page

"

>

<el

‐

button

size

=

"

small

"

type

=

"

text

"

@click=

"

edit(page.row.

pageId)

"

>编辑

</el

‐

button>

<el

‐

button

size

=

"

small

"

type

=

"

text

"

@click=

"

del(page.row.

pageId)

"

>删除

</el

‐

button>

</template>

</el

‐

table

‐

column>

2、删除事件

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

//删除

del:function (pageId) {

this.

$confirm(

'

确认删除此页面吗?

'

,

'

提示

'

, {})

.then(()

=

> {

cmsApi.

page_del(pageId)

.then((res)

=

>{

if(res.success){

this.

$message({

type:

'

success

'

,

message:

'

删除成功!

'

});

//查询页面

this.

query()

}else{

this.

$message({

type:

'

error

'

,

message:

'

删除失败!

'

});

}

})

})

}

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

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