欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-30 21:46:35
...

课程图片删除 
1.4.1 需求分析 
课程图片上传成功后,可以重新上传,方法是先删除现有图片再上传新图片。 
注意:此删除只删除课程数据库的课程图片信息,不去删除文件数据库的文件信息及文件系统服务器上的文件,由 
于课程图片来源于该用户的文件库,所以此图片可能存在多个地方共用的情况,所以要删除文件系统中的文件需要到图片库由用户确认后再删除。
1.4.2API 
在课程管理服务添加删除课程图片api

@ApiOperation(
"
删除课程图片
"
)
public ResponseResult deleteCoursePic(String courseId);

1.4.3课程管理服务端开发 
1.4.2.1 Dao 
CoursePicRepository父类提供的delete方法没有返回值,无法知道是否删除成功,这里我们在CoursePicRepository下边自定义方法:

//删除成功返回1否则返回0
long deleteByCourseid(String courseid);

1.4.2.2 Service

//删除课程图片
@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

@Override
@DeleteMapping(
"
/coursepic/delete
"
)
public ResponseResult deleteCoursePic(@RequestParam(
"
courseId
"
) String courseId) {
return courseService.deleteCoursePic(courseId);
}

1.4.3 前端开发 
1.4.3.1 API 调用

//删除课程图片
export const deleteCoursePic
=
courseId
=
> {
return http
.requestDelete(apiUrl+
'
/course/coursepic/delete?courseId
=
'
+courseId)
}

1.4.3.2 页面测试 
1before-remove钩子方法
upload组件的before-remove钩子方法 中实现删除动作。 
 

<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则停止删除页面的图片。 
 

//删除图片
handleRemove(file, fileList) {
console.log(file)
alert(
'
删除成功
'
)
return true;
}

1.4.3.3 promise异步调用 
handleRemove方法调用删除图片的api方法,删除成功时return true,删除失败时return false;

//删除图片
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对象。

PromiseES6提供的用于异步处理的对象,因为axios提交是异步提交,这里使用promise作为返回值。 
Promise的使用方法如下: 
Promise对象在处理过程中有三种状态: 
pending:进行中 
resolved:操作成功 
rejected: 操作失败 
Promise的构建方法如下:

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,并将失败结果传出去。 
上边说的操作成功将操作结果传给谁了呢?操作失败将失败结果传给谁了呢? 
通过promisethencatch来指定 

promise.then(function (result) {
console.log(
'
操作成功:
'
+ result);
});
promise.catch(function (reason) {
console.log(
'
操作失败:
'
+ reason);
});

例子如下: 
1、定义个方法,返回promise对象

testpromise(i){
return new Promise((resolve,reject)
=
>{
if(i % 2==
0){
resolve(
'
成功了
'
)
}else{
reject(
'
拒绝了
'
)
}
})
}

2、调用此方法 
向方法传入偶数、奇数进行测试。

this.testpromise(3)
.then(res
=
>{//在then中对成功结果进行处理
alert(res)
})
.catch(res
=
>{//在catch中对操作失败结果进行处理
alert(res)
})

3、最终将handleRemove方法修改如下 
handleRemove方法返回promise对象,当删除成功则resolve,删除失败则reject

//删除图片
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()//拒绝
}
});
})
}