文章目錄

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

總結

以上是生活随笔為你收集整理的学成在线--6.CMS页面管理开发（删除页面）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。