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

比眉伴天荒 2021-09-20 07:36 110阅读 0赞

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、进入上传图片页面，观察图片是否显示

转载于:https://blog.51cto.com/13517854/2377212