学成在线--6.CMS页面管理开发（删除页面）

文章目录

0.删除用户逻辑
1.删除页面接口定义
2.后端开发--Dao
3.后端开发--Service
4.后端开发--controller
5.前端开发--page_list.vue添加删除按钮
6.前端开发--page_list.vue编写删除事件
7.后端开发--Api方法定义Api方法

0.删除用户逻辑

1）前端逻辑

（1）用户在页面列表中，点击“删除”按钮；
（2）点击后，触发删除事件，然后调用src/module/cms/api/cms.js中的page_del接口，此接口向后端发送删除请求。

2）后端逻辑

（1）后端Dao层使用 Spring Data提供的deleteById方法完成删除操作

1.删除页面接口定义

文件位置：Api项目下的com/ xuecheng/ api/ cms/ CmsPageControllerApi

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

2.后端开发–Dao

文件位置：com/ xuecheng/ manage_cms/ dao/ CmsPageRepository

使用 Spring Data提供的deleteById方法完成删除操作

3.后端开发–Service

文件位置：com/ xuecheng/ manage_cms/ service/ PageService

    //根据id删除页面public ResponseResult delete(String id){//先查询一下Optional<CmsPage> optional = cmsPageRepository.findById(id);if(optional.isPresent()){cmsPageRepository.deleteById(id);return new ResponseResult(CommonCode.SUCCESS);}return new ResponseResult(CommonCode.FAIL);}

4.后端开发–controller

文件位置：com/ xuecheng/ manage_cms/ controller/ CmsPageController

    @Override@DeleteMapping("/del/{id}")public ResponseResult delete(@PathVariable("id") String id) {return pageService.delete(id);}

5.前端开发–page_list.vue添加删除按钮

文件位置：src/ module/ cms/ page/ page_list.vue

      <el-table-column label="操作" width="80"><template slot-scope="page"><el-buttonsize="small"type="text"@click="edit(page.row.pageId)">编辑</el-button><el-buttonsize="small"type="text"@click="del(page.row.pageId)">删除</el-button></template></el-table-column>

6.前端开发–page_list.vue编写删除事件

文件位置：src/ module/ cms/ page/ page_list.vue

      del:function (pageId) {this.$confirm('您确认删除吗?', '提示', { }).then(() => {//调用服务端接口cmsApi.page_del(pageId).then(res=>{if(res.success){this.$message.success("删除成功")//刷新页面this.query()}else{this.$message.error("删除失败")}})})}

7.后端开发–Api方法定义Api方法

文件位置：src/ module/ cms/ api/ cms.js

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