一. 需求分析

课程图片上传成功后，可以重新上传，方法是先删除现有图片再上传新图片；

注意：此删除只删除课程数据库的课程图片信息，不去删除文件数据库的文件信息及文件系统服务器上的文件；

由于课程图片来源于该用户的文件数据库，所以此图片可能存在多个地方共用的情况，所以要删除文件系统中的文件需要到图片库由用户确认后再删除。

二. 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()}})})*/},

学成在线--26.课程图片管理（图片删除）相关推荐

学成在线--21.课程信息修改
文章目录一.需求分析二.课程管理导航页面 1.定义course_manage.vue为课程管理页面 2.创建各个信息管理页面 3.创建路由三.服务端 1.Api接口 1)根据课程ID查询课程信息 ...
学成在线--23.课程图片管理（上传图片）
文章目录一. 需求分析 1). 需求分析 2). 图片上传流程二. 创建文件系统服务工程 1). 工程目录结构 2). 项目依赖pom.xml 3). 配置文件application.yml 三. ...
学成在线--15.课程计划查询
文章目录一.需求分析二.页面原型 1.tree组件介绍 2.webstorm配置jsx 三.API接口 1.数据模型 2.自定义模型类 3.接口定义四.sql语句五.服务器端 1.Dao 1) ...
学成在线-修改课程计划名称
文章目录前言一.解决思路二.代码实现 1.vue前端 (1)course_plan.vue给修改按钮增加弹框 (2)course.js修改计划名称的请求 2.Java服务端 (1)课程管理con ...
学成在线--22.课程营销
文章目录一.需求分析二.数据模型三.服务端 1.Api接口 1)查询课程营销信息 2)更新课程营销信息 2.Dao 3.Service 4.Controller 四.前端 1.Api 方法 2. ...
学成在线--6.CMS页面管理开发（删除页面）
文章目录 0.删除用户逻辑 1.删除页面接口定义 2.后端开发--Dao 3.后端开发--Service 4.后端开发--controller 5.前端开发--page_list.vue添加删除按钮 ...
学成在线首页pnf素材
学成在线首页已整理的图片素材,供大家学习. 阿里云盘链接:阿里云盘分享提取码:4h3u
学成在线-第19天-讲义-分布式事务
1订单与选课需求分析 1.1订单支付流程学成在线的课程分为免费和收费两种.对于收费课程,用户需提交订单并完成支付方可在线学习. 提交订单及支付流程如下: 1.用户提交订单需要先登录系统 2.提交订单 ...
学成在线--媒资管理模块
完整版请移步至我的个人博客查看:https://cyborg2077.github.io/ 学成在线–项目环境搭建学成在线–内容管理模块学成在线–媒资管理模块学成在线–课程发布模块学成在线–认 ...

学成在线--26.课程图片管理（图片删除）

文章目录