学成在线 第3天 讲义-CMS页面管理开发六

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

@ApiOperation("通过ID删除页面")
public ResponseResult delete(String id);

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

//删除页面
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

@DeleteMapping(
"
/del/{id}
"
) //使用http的delete方法完成岗位操作
public ResponseResult delete(@PathVariable(
"
id
"
) String id) {
return pageService.delete(id);
}

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

/
*
页面删除
*
/
export const page_del = id
=
> {
return http
.requestDelete(apiUrl+
'
/cms/page/del/
'
+id)
}

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

<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、删除事件

//删除
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:
'
删除失败!
'
});
}
})
})
}