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钩子方法中调用服务端查询文件列表并绑定到数据对象。
mounted(){
//课程id
this.courseid = this.$route.params.courseid;
//查询图片
this.list()
}
1.3.3.3测试
测试流程：
1、上传图片成功 2、进入上传图片页面，观察图片是否显示
| 
收藏
淘帖
踩
