文章目錄

• 一. 需求分析
• 二. API
• 三. 服務(wù)端開(kāi)發(fā)
• • 1. Dao
  • 2. Service
  • 3. Controller
• 四. 前端開(kāi)發(fā)
• • 1. API方法
  • 2. 頁(yè)面
  • • 1.before-remove鉤子方法
    • 2.handleRemove鉤子方法

一. 需求分析

課程圖片上傳成功后，可以重新上傳，方法是先刪除現(xiàn)有圖片再上傳新圖片；

注意：此刪除只刪除課程數(shù)據(jù)庫(kù)的課程圖片信息，不去刪除文件數(shù)據(jù)庫(kù)的文件信息及文件系統(tǒng)服務(wù)器上的文件；

由于課程圖片來(lái)源于該用戶的文件數(shù)據(jù)庫(kù)，所以此圖片可能存在多個(gè)地方共用的情況，所以要?jiǎng)h除文件系統(tǒng)中的文件需要到圖片庫(kù)由用戶確認(rèn)后再刪除。

二. API

在課程管理服務(wù)添加刪除課程圖片api：

文件位置：xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java

@ApiOperation("刪除課程圖片") public ResponseResult deleteCoursePic(String courseId);

三. 服務(wù)端開(kāi)發(fā)

1. Dao

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\ CoursePicRepository.java

public interface CoursePicRepository extends JpaRepository<CoursePic,String> {//當(dāng)返回值大于0，表示刪除成功的記錄數(shù)long deleteByCourseid(String courseId); }

2. Service

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\ CourseService.java

//刪除課程圖片 @Transactional public ResponseResult deleteCoursePic(String courseId) {//執(zhí)行刪除long result = coursePicRepository.deleteByCourseid(courseId);if(result>0){return new ResponseResult(CommonCode.SUCCESS);}return new ResponseResult(CommonCode.FAIL); }

3. Controller

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\controller\ CourseController.java

@Override @DeleteMapping("/coursepic/delete") public ResponseResult deleteCoursePic(@RequestParam("courseId") String courseId) {return courseService.deleteCoursePic(courseId); }

四. 前端開(kāi)發(fā)

1. API方法

文件位置：xc-ui-pc-teach\src\module\course\api\course.js

//刪除課程圖片 export const deleteCoursePic= courseId => {return http.requestDelete(apiUrl+'/course/coursepic/delete?courseId='+courseId) }

2. 頁(yè)面

文件位置：xc-ui-pc-teach\src\module\course\page\course_manage\course_picture.vue

1.before-remove鉤子方法

在upload組件的before-remove鉤子方法 中實(shí)現(xiàn)刪除動(dòng)作。

<template><div><el-uploadaction="/api/filesystem/upload"list-type="picture-card":before-upload="setuploaddata":on-success="handleSuccess":file-list="fileList":limit="picmax":on-exceed="rejectupload":before-remove="handleRemove":data="uploadval"name="multipartFile"><i class="el-icon-plus"></i></el-upload></div> </template>

2.handleRemove鉤子方法

//刪除圖片handleRemove(file, fileList) {console.log(file)return new Promise((resolve,reject)=>{courseApi.deleteCoursePic(this.courseid).then(res=>{if(res.success){//成功resolve();}else{this.$message.error("刪除失敗");//失敗reject();}})})//調(diào)用服務(wù)端去刪除課程圖片信息，如果返回false，前端停止刪除//異步調(diào)用 /* return new Promise((resolve,rejct)=>{courseApi.deleteCoursePic(this.courseid).then(res=>{if(res.success){//成功resolve()}else{this.$message.error("刪除失敗");//失敗rejct()}})})*/}, 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的学成在线--26.课程图片管理（图片删除）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。