Java的新项目学成在线笔记-day8(六)
其他
2019-04-23 14:50:53
阅读次数: 0
5 课程图片删除 1.4.1 需求分析 课程图片上传成功后,可以重新上传,方法是先删除现有图片再上传新图片。 注意:此删除只删除课程数据库的课程图片信息,不去删除文件数据库的文件信息及文件系统服务器上的文件,由 于课程图片来源于该用户的文件库,所以此图片可能存在多个地方共用的情况,所以要删除文件系统中的文件需要 到图片库由用户确认后再删除。 1.4.2API 在课程管理服务添加删除课程图片api: [AppleScript] 纯文本查看 复制代码 ?
1 2 |
@ApiOperation ( "删除课程图片" ) public ResponseResult deleteCoursePic ( String courseId ) ; |
1.4.3课程管理服务端开发 1.4.2.1 Dao CoursePicRepository父类提供的delete方法没有返回值,无法知道是否删除成功,这里我们在 CoursePicRepository下边自定义方法: [AppleScript] 纯文本查看 复制代码 ?
1 2 |
/ / 删除成功返回 1 否则返回 0 long deleteByCourseid ( String courseid ) ; |
1.4.2.2 Service [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 |
/ / 删除课程图片 @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] 纯文本查看 复制代码 ?
1 2 3 4 5 |
@Override @DeleteMapping ( "/coursepic/delete" ) public ResponseResult deleteCoursePic ( @RequestParam ( "courseId" ) String courseId ) { return courseService.deleteCoursePic ( courseId ) ; } |
1.4.3 前端开发 1.4.3.1 API 调用 [AppleScript] 纯文本查看 复制代码 ?
1 2 3 |
/ / 删除课程图片 export const deleteCoursePic = courseId = > { return http.requestDelete ( apiUrl + ' / course / coursepic / delete ?courseId = ' + courseId ) } |
1.4.3.2 页面测试 1)before-remove钩子方法 在upload组件的before-remove钩子方法 中实现删除动作。 [AppleScript] 纯文本查看 复制代码 ?
1 2 3 4 |
< 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] 纯文本查看 复制代码 ?
1 2 3 4 5 |
/ / 删除图片 handleRemove ( file , fileList ) { console. log ( file ) alert ( '删除成功' ) return true ; } |
1.4.3.3 promise异步调用 在handleRemove方法调用删除图片的api方法,删除成功时return true,删除失败时return false; [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 |
/ / 删除图片 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] 纯文本查看 复制代码 ?
1 2 3 4 5 6 7 |
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] 纯文本查看 复制代码 ?
1 2 3 |
promise. then ( function ( result ) { console. log ( '操作成功:' + result ) ; } ) ; promise.catch ( function ( reason ) { console. log ( '操作失败:' + reason ) ; } ) ; |
例子如下: 1、定义一个方法,返回promise对象 [AppleScript] 纯文本查看 复制代码 ?
1 2 3 4 5 6 7 8 |
testpromise ( i ) { return new Promise ( ( resolve , reject ) = > { if ( i % 2 = = 0 ) { resolve ( '成功了' ) } else { reject ( '拒绝了' ) } } ) } |
2、调用此方法 向方法传入偶数、奇数进行测试。 [AppleScript] 纯文本查看 复制代码 ?
1 2 3 |
this.testpromise ( 3 ) . then ( res = > { / / 在 then 中对成功结果进行处理 alert ( res ) } ) .catch ( res = > { / / 在catch中对操作失败结果进行处理 alert ( res ) } ) |
3、最终将handleRemove方法修改如下 handleRemove方法返回promise对象,当删除成功则resolve,删除失败则reject。 [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 |
/ / 删除图片 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 ( ) / / 拒绝 } } ) ; } ) } |
|
|
转载自blog.csdn.net/czbkzmj/article/details/89210764