黑马程序员技术交流社区

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

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

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

1.2.4前端开发
前端需要在上传图片成功后保存课程图片信息。
1.2.4.1 Api方法

[AppleScript] 纯文本查看 复制代码

//添加课程图片

export const addCoursePic

=

(courseId,pic)

=

> {

return http

.requestPost(apiUrl+

'

/course/coursepic/add?courseId

=

'

+courseId+

"

&pic

=

"

+pic)

}

1.2.4.2 页面
1）添加上传成功的钩子 :on-success="handleSuccess"

[AppleScript] 纯文本查看 复制代码

<el

‐

upload

action=

"

/api/filesystem/upload

"

list

‐

type

=

"

picture

‐

card

"

:on

‐

success

=

"

handleSuccess

"

>

<i class

=

"

el

‐

icon

‐

plus

"

></i>

</el

‐

upload>

2）在钩子方法中保存课程图片信息
如果保存图片失败则上传失败，清除文件列表。

[AppleScript] 纯文本查看 复制代码

 //上传成功的钩子方法

handleSuccess(response, file, fileList){

console.log(response)

if(response.success){

//alert(

'

上传成功

'

)

//图片上传成功将课程图片地址保存到课程数据库

let pic

= response.fileSystem.filePath

courseApi.addCoursePic(this.courseid,pic)

.then((res)

=

> {

if(res.success){

this.

$message.success(

'

上传成功

'

);

}else{

this.handleError()

}

});

}else{

this.handleError()

}

},

//上传失败执行的钩子方法

handleError(err, file, fileList){

this.

$message.error(

'

上传失败

'

);

//清空文件队列

this.fileList

=

[]

}

4 图片查询
1.3.1 需求分析
课程图片上传成功，再次进入课程上传页面应该显示出来已上传的图片。
1.3.2 API
在课程管理服务定义查询方法

[AppleScript] 纯文本查看 复制代码

 @ApiOperation(

"

获取课程基础信息

"

)

public CoursePic findCoursePic(String courseId);

1.3.2 课程管理服务开发
1.3.2.1Dao
使用CoursePicRepository即可，无需再开发。
1.3.2.2 Service
根据课程id查询课程图片

[AppleScript] 纯文本查看 复制代码

public CoursePic findCoursepic(String courseId) {

return coursePicRepository

.findOne(courseId);

}

1.3.2.3 Controller

[AppleScript] 纯文本查看 复制代码

 @Override

@GetMapping(

"

/coursepic/list/{courseId}

"

)

public CoursePic findCoursePic(@PathVariable(

"

courseId

"

) String courseId) {

return courseService.findCoursepic(courseId);

}

1.3.3 前端开发
1.3.3.1API方法

[AppleScript] 纯文本查看 复制代码

 //查询课程图片

export const findCoursePicList

=

courseId

=

> {

return http

.requestQuickGet(apiUrl+

'

/course/coursepic/list/

'

+courseId)

}

1.3.3.2页面
在课程图片页面的mounted钩子方法中查询课程图片信息，并将图片地址赋值给数据对象
1、定义图片查询方法

[AppleScript] 纯文本查看 复制代码

 //查询图片

list(){

courseApi.findCoursePicList(this.courseid)

.then((res)

=

> {

console.log(res)

if(res.

pic){

let name

=

'

图片

'

;

let url =

this.imgUrl+res.

pic;

let fileId

= res.courseid;

//先清空文件列表，再将图片放入文件列表

this.fileList

=

[]

this.fileList.

push({name:name,url:url,fileId:fileId});

}

console.log(this.fileList);

});

}

2）mounted钩子方法
在mounted钩子方法中调用服务端查询文件列表并绑定到数据对象。

[AppleScript] 纯文本查看 复制代码

 mounted(){

//课程id

this.courseid

=

this.

$route.

params.courseid;

//查询图片

this.list()

}

1.3.3.3测试
测试流程：
1、上传图片成功
2、进入上传图片页面，观察图片是否显示

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

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