欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-30 21:35:11
...

删除页面 
用户操作流程: 
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:
'
删除失败!
'
});
}
})
})
}