學成在線--25.課程圖片管理（圖片查詢）

一. 需求分析

課程圖片上傳成功，再次進入課程上傳頁面應該顯示出來已上傳的圖片。

二. API

在課程管理服務定義查詢方法
文件位置：xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java

@ApiOperation("獲取課程基礎信息")
public CoursePic findCoursePic(String courseId);

三. 服務端開發

1. Dao

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\ CoursePicRepository.java

使用CoursePicRepository即可，無需再開發。

2. Service

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\ CourseService.java

    //查詢課程圖片
    public CoursePic findCoursePic(String courseId) {
        //查詢課程圖片
        Optional<CoursePic> picOptional = coursePicRepository.findById(courseId);
        if(picOptional.isPresent()){
            CoursePic coursePic = picOptional.get();
            return coursePic;
        }
        return null;
    }

3. Controller

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\controller\ CourseController.java

    @Override
    @GetMapping("/coursepic/list/{courseId}")
    public CoursePic findCoursePic(@PathVariable("courseId") String courseId) {
        return courseService.findCoursePic(courseId);
    }

四. 前端開發

1. API方法

文件位置：xc-ui-pc-teach\src\module\course\api\course.js

//查詢課程圖片
export const findCoursePicList = courseId => {
  return http.requestQuickGet(apiUrl+'/course/coursepic/list/'+courseId)
}

2. 頁面

文件位置：xc-ui-pc-teach\src\module\course\page\course_manage\course_picture.vue

    mounted(){
      //課程id
      this.courseid = this.$route.params.courseid;
      //查詢課程
      courseApi.findCoursePicList(this.courseid).then(res=>{
          if(res && res.pic){
              let imgUrl = this.imgUrl+res.pic;
              //將圖片地址設置到
            this.fileList.push({name:'pic',url:imgUrl,fileId:res.pic})
          }

      }).catch(res=>{

      })
}