Java的新项目学成在线笔记-day8（五）

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

[mw_shl_code=applescript,true]@ApiOperation("获取课程基础信息") 
public CoursePic findCoursePic(String courseId); [/mw_shl_code]
1.3.2 课程管理服务开发 1.3.2.1Dao 
使用CoursePicRepository即可，无需再开发。 1.3.2.2 Service 

根据课程id查询课程图片

[mw_shl_code=applescript,true]public CoursePic findCoursepic(String courseId)
{ return coursePicRepository.findOne(courseId);   
   }[/mw_shl_code]
1.3.2.3 Controller 
[mw_shl_code=applescript,true]@Override   
  @GetMapping("/coursepic/list/{courseId}") 
    public CoursePic findCoursePic(@PathVariable("courseId") String courseId) { 
        return courseService.findCoursepic(courseId);  
   } [/mw_shl_code]
1.3.3 前端开发 1.3.3.1API方法 
[mw_shl_code=applescript,true]
//查询课程图片
export const findCoursePicList = courseId => {  
return http.requestQuickGet(apiUrl+'/course/coursepic/list/'+courseId) }[/mw_shl_code]
1.3.3.2页面 
在课程图片页面的mounted钩子方法 中查询课程图片信息，并将图片地址赋值给数据对象 1、定义图片查询方法

[mw_shl_code=applescript,true]//查询图片  
     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); 
        });
}[/mw_shl_code]
2）mounted钩子方法 在mounted钩子方法中调用服务端查询文件列表并绑定到数据对象。
mounted(){    
//课程id   
this.courseid = this.$route.params.courseid;  
  //查询图片
    this.list()
}

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