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

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-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>

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)
}