Java的新项目学成在线笔记-day8（六）

5 课程图片删除  1.4.1 需求分析  课程图片上传成功后，可以重新上传，方法是先删除现有图片再上传新图片。 注意：此删除只删除课程数据库的课程图片信息，不去删除文件数据库的文件信息及文件系统服务器上的文件，由 于课程图片来源于该用户的文件库，所以此图片可能存在多个地方共用的情况，所以要删除文件系统中的文件需要 到图片库由用户确认后再删除。   1.4.2API  在课程管理服务添加删除课程图片api： [AppleScript] 纯文本查看 复制代码 ? @ApiOperation("删除课程图片") public ResponseResult deleteCoursePic(String courseId); 1.4.3课程管理服务端开发 1.4.2.1 Dao  CoursePicRepository父类提供的delete方法没有返回值，无法知道是否删除成功，这里我们在 CoursePicRepository下边自定义方法：   [AppleScript] 纯文本查看 复制代码 ? //删除成功返回1否则返回0 long deleteByCourseid(String courseid); 1.4.2.2 Service  [AppleScript] 纯文本查看 复制代码 ? //删除课程图片 @Transactional public ResponseResult deleteCoursePic(String courseId) { //执行删除，返回1表示删除成功，返回0表示删除失败 long result = coursePicRepository.deleteByCourseid(courseId); if(result>0){ return new ResponseResult(CommonCode.SUCCESS); } return new ResponseResult(CommonCode.FAIL); } 1.4.2.3 Controller  [AppleScript] 纯文本查看 复制代码 ? @Override @DeleteMapping("/coursepic/delete") public ResponseResult deleteCoursePic(@RequestParam("courseId") String courseId) { return courseService.deleteCoursePic(courseId); } 1.4.3 前端开发 1.4.3.1 API 调用  [AppleScript] 纯文本查看 复制代码 ? //删除课程图片 export const deleteCoursePic= courseId => { return http.requestDelete(apiUrl+'/course/coursepic/delete?courseId='+courseId) } 1.4.3.2 页面测试  1）before-remove钩子方法 在upload组件的before-remove钩子方法 中实现删除动作。   [AppleScript] 纯文本查看 复制代码 ? <el‐upload action="/filesystem/upload" list‐type="picture‐card" :before‐remove="handleRemove"> <i class="el‐icon‐plus"></i> </el‐upload> before-remove说明：删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。   定义handleRemove方法进行测试： handleRemove 返回true则删除页面的图片，返回false则停止删除页面的图片。   [AppleScript] 纯文本查看 复制代码 ? //删除图片 handleRemove(file, fileList) { console.log(file) alert('删除成功') return true; ｝ 1.4.3.3 promise异步调用  在handleRemove方法调用删除图片的api方法，删除成功时return true，删除失败时return false;   [AppleScript] 纯文本查看 复制代码 ? //删除图片 handleRemove(file, fileList) { console.log(file) // alert('删除') // return true; //删除图片 courseApi.deleteCoursePic('1').then((res) => { if(res.success){ this.$message.success('删除成功'); return true; }else{ this.$message.error(res.message); return false; } }); }, 在上边代码中将提交的课程id故意写错，按照我们预期应该是删除失败，而测试结果却是图片在页面上删除成功。 问题原因： 通过查询deleteCoursePic方法的底层代码，deleteCoursePic最终返回一个promise对象。 Promise是ES6提供的用于异步处理的对象，因为axios提交是异步提交，这里使用promise作为返回值。 Promise的使用方法如下： Promise对象在处理过程中有三种状态： pending：进行中 resolved：操作成功 rejected: 操作失败 Promise的构建方法如下：   [AppleScript] 纯文本查看 复制代码 ? const promise = new Promise(function(resolve,reject){ //...TODO... if(操作成功){ resolve(value); }else{ reject(error); } }) 上边的构造方法function(resolve,reject)执行流程如下： 1）方法执行一些业务逻辑。 2）如果操作成功将Promise的状态由pending变为resolved，并将操作结果传出去 3）如果操作失败会将promise的状态由pending变为rejected，并将失败结果传出去。 上边说的操作成功将操作结果传给谁了呢？操作失败将失败结果传给谁了呢？ 通过promise的then、catch来指定   [AppleScript] 纯文本查看 复制代码 ? promise.then(function (result) { console.log('操作成功：' + result); }); promise.catch(function (reason) { console.log('操作失败：' + reason); }); 例子如下： 1、定义一个方法，返回promise对象   [AppleScript] 纯文本查看 复制代码 ? testpromise(i){ return new Promise((resolve,reject)=>{ if(i % 2==0){ resolve('成功了') }else{ reject('拒绝了') } }) } 2、调用此方法 向方法传入偶数、奇数进行测试。   [AppleScript] 纯文本查看 复制代码 ? this.testpromise(3).then(res=>{//在then中对成功结果进行处理 alert(res) }).catch(res=>{//在catch中对操作失败结果进行处理 alert(res) }) 3、最终将handleRemove方法修改如下 handleRemove方法返回promise对象，当删除成功则resolve，删除失败则reject。   [AppleScript] 纯文本查看 复制代码 ? //删除图片 handleRemove(file, fileList) { console.log(file) return new Promise((resolve,reject)=>{ //删除图片 courseApi.deleteCoursePic(this.courseid).then((res) => { if(res.success){ this.$message.success('删除成功'); resolve()//通过 }else{ this.$message.error(res.message); reject()//拒绝 } }); }) }