传智黑马Java学成在线项目 第3天 讲义-CMS页面管理开发二

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

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

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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

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

01 02 03 04 05 06 07 08 09 10 11 12

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

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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

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

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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

/ / 删除 del : function ( pageId ) { this. $confirm (