|
【郑州校区】学成在线 第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:
'
删除失败!
'
});
}
})
})
}
| 
收藏
淘帖
踩
