学成在线--24.课程图片管理（保存课程图片）

一. 需求分析

图片上传到文件系统后，其它子系统如果想使用图片可以引用图片的地址，课程管理模块使用图片的方式是将图片
地址保存到课程数据库中。业务流程如下：
1、上传图片到文件系统服务
2、保存图片地址到课程管理服务，在课程管理服务创建保存课程与图片对应关系的表 course_pic。

3、在course_pic保存图片成功后方可查询课程图片信息。
通过查询course_pic表数据则查询到某课程的图片信息。

二. 服务端开发

1. 模型类

package com.xuecheng.framework.domain.course;

import lombok.Data;
import lombok.ToString;
import org.hibernate.annotations.GenericGenerator;

import javax.persistence.*;
import java.io.Serializable;

@Data
@ToString
@Entity
@Table(name="course_pic")
@GenericGenerator(name = "jpa-assigned", strategy = "assigned")
public class CoursePic implements Serializable {
    private static final long serialVersionUID = -916357110051689486L;

    @Id
    @GeneratedValue(generator = "jpa-assigned")
    private String courseid;
    private String pic;

}

2. API

在课程管理服务中要提供保存课程图片的api。
文件位置：xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java

@ApiOperation("添加课程图片")
public ResponseResult addCoursePic(String courseId,String pic);

3. Dao

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

public interface CoursePicRepository extends JpaRepository<CoursePic,String> {

}

4. Service

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

//向课程管理数据添加课程与图片的关联信息
@Transactional
public ResponseResult addCoursePic(String courseId, String pic) {
    //课程图片信息
    CoursePic coursePic = null;
    //查询课程图片
    Optional<CoursePic> picOptional = coursePicRepository.findById(courseId);
    if(picOptional.isPresent()){
        coursePic = picOptional.get();
    }
    if(coursePic == null){
        coursePic  = new CoursePic();
    }
    coursePic.setPic(pic);
    coursePic.setCourseid(courseId);
    coursePicRepository.save(coursePic);
    return new ResponseResult(CommonCode.SUCCESS);
}

5. Controller

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

@Override
@PostMapping("/coursepic/add")
public ResponseResult addCoursePic(@RequestParam("courseId") String courseId, @RequestParam("pic")String pic) {
    return courseService.addCoursePic(courseId,pic);
    }

三. 前端开发

1. API

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

//保存课程图片地址到课程数据库
export const addCoursePic= (courseId,pic) => {
  return http.requestPost(apiUrl+'/course/coursepic/add?courseId='+courseId+"&pic="+pic)
}

2. 页面

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

1). 添加上传成功的钩子 :on-success=“handleSuccess”

<el-upload
   action="/api/filesystem/upload"
   list-type="picture-card"
   :before-upload="setuploaddata"
   :on-success="handleSuccess"
   :file-list="fileList"
   :limit="picmax"
   :on-exceed="rejectupload"
   :before-remove="handleRemove"
   :data="uploadval"
   name="multipartFile">
   <i class="el-icon-plus"></i>
</el-upload>

2). 在钩子方法 中保存课程图片信息

  //上传成功的钩子方法
  handleSuccess(response, file, fileList){
    console.log(response)
  //   alert('上传成功')
    //调用课程管理的保存图片接口，将图片信息保存到课程管理数据库course_pic中
    //从response得到新的图片文件的地址
    if(response.success){
      let fileId = response.fileSystem.fileId;
      courseApi.addCoursePic(this.courseid,fileId).then(res=>{
          if(res.success){
              this.$message.success("上传图片成功")
          }else{
            this.$message.error(res.message)
          }

      })
    }

  },
  //上传失败执行的钩子方法
  handleError(err, file, fileList){
    this.$message.error('上传失败');
    //清空文件队列
    this.fileList = []
  },