黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day8（五） [打印本页]

---

作者: 谷粒姐姐    时间: 2019-4-11 14:39
标题: 【郑州校区】Java的新项目学成在线笔记-day8（五）
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、进入上传图片页面，观察图片是否显示

---

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

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