文章目录
- 一. 需求分析
- 二. API
- 三. 服务端开发
- 1. Dao
- 2. Service
- 3. Controller
- 四. 前端开发
- 1. API方法
- 2. 页面
一. 需求分析
课程图片上传成功,再次进入课程上传页面应该显示出来已上传的图片。
二. 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(){//课程idthis.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=>{})
}