學成線上 第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:
'
删除失敗!
'
});
}
})
})
}