黑马程序员技术交流社区

标题: 【郑州校区】学成在线 第8天 讲义 五 [打印本页]

---

作者: 我是楠楠    时间: 2019-12-18 15:05
标题: 【郑州校区】学成在线 第8天 讲义 五

【郑州校区】学成在线 第8天 讲义-课程图片管理 分布式文件系统五

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()//拒绝

}

});

})

}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2