文章目录
- 一. 需求分析
- 二. API
- 三. 服务端开发
- 1. Dao
- 2. Service
- 3. Controller
- 四. 前端开发
- 1. API方法
- 2. 页面
- 1.before-remove钩子方法
- 2.handleRemove钩子方法
一. 需求分析
课程图片上传成功后,可以重新上传,方法是先删除现有图片再上传新图片;
注意:此删除只删除课程数据库的课程图片信息,不去删除文件数据库的文件信息及文件系统服务器上的文件;
由于课程图片来源于该用户的文件数据库,所以此图片可能存在多个地方共用的情况,所以要删除文件系统中的文件需要到图片库由用户确认后再删除。
二. API
在课程管理服务添加删除课程图片api:
文件位置:xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java
@ApiOperation("删除课程图片")
public ResponseResult deleteCoursePic(String courseId);
三. 服务端开发
1. Dao
文件位置:xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\ CoursePicRepository.java
public interface CoursePicRepository extends JpaRepository<CoursePic,String> {//当返回值大于0,表示删除成功的记录数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) {//执行删除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);
}
四. 前端开发
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. 页面
文件位置:xc-ui-pc-teach\src\module\course\page\course_manage\course_picture.vue
1.before-remove钩子方法
在upload组件的before-remove钩子方法 中实现删除动作。
<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();}})})//调用服务端去删除课程图片信息,如果返回false,前端停止删除//异步调用
/* return new Promise((resolve,rejct)=>{courseApi.deleteCoursePic(this.courseid).then(res=>{if(res.success){//成功resolve()}else{this.$message.error("删除失败");//失败rejct()}})})*/},