保存课程图片
1.2.1 需求分析
图片上传到文件系统后，其它子系统如果想使用图片可以引用图片的地址，课程管理模块使用图片的方式是将图片 地址保存到课程数据库中。
业务流程如下：
1、上传图片到文件系统服务 2、保存图片地址到课程管理服务
在课程管理服务创建保存课程与图片对应关系的表 course_pic。
3、在course_pic保存图片成功后方可查询课程图片信息。
通过查询course_pic表数据则查询到某课程的图片信息。 1.2.2 课程管理服务端开发 1.2.2.1 API
课程管理需要使用图片则在课程管理服务中要提供保存课程图片的api。
[AppleScript] 纯文本查看 复制代码 @ApiOperation("添加课程图片")
public ResponseResult addCoursePic(String courseId,String pic);
1.2.2.2 Dao
模型：
[AppleScript] 纯文本查看 复制代码 @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; }
API如下：
[AppleScript] 纯文本查看 复制代码 public interface CoursePicRepository extends JpaRepository<CoursePic, String> {
}
1.2.3.3 Service
[AppleScript] 纯文本查看 复制代码 //添加课程图片
@Transactional
public ResponseResult saveCoursePic(String courseId,String pic){
//查询课程图片
Optional<CoursePic> picOptional = coursePicRepository.findById(courseId);
CoursePic coursePic = null;
if(picOptional.isPresent()){
coursePic = picOptional.get();
}
//没有课程图片则新建对象
if(coursePic == null){
coursePic = new CoursePic();
}
coursePic.setCourseid(courseId);
coursePic.setPic(pic);
//保存课程图片
[AppleScript] 纯文本查看 复制代码 coursePicRepository.save(coursePic);
return new ResponseResult(CommonCode.SUCCESS);
}
1.2.3.4 Controller
[AppleScript] 纯文本查看 复制代码 @Override
@PostMapping("/coursepic/add")
public ResponseResult addCoursePic(@RequestParam("courseId") String courseId, @RequestParam("pic") String pic) {
//保存课程图片
return courseService.saveCoursePic(courseId,pic);
1.2.4前端开发
前端需要在上传图片成功后保存课程图片信息。
1.2.4.1 Api方法
[AppleScript] 纯文本查看 复制代码 //添加课程图片 export const addCoursePic= (courseId,pic) => {
return http.requestPost(apiUrl+'/course/coursepic/add?courseId='+courseId+"&pic="+pic)
}
1.2.4.2 页面
1）添加上传成功的钩子 :on-success="handleSuccess"
[AppleScript] 纯文本查看 复制代码 <el‐upload
action="/api/filesystem/upload" list‐type="picture‐card"
:on‐success="handleSuccess">
<i class="el‐icon‐plus"></i> </el‐upload>
2）在钩子方法 中保存课程图片信息
如果保存图片失败则上传失败，清除文件列表。
[AppleScript] 纯文本查看 复制代码 //上传成功的钩子方法
handleSuccess(response, file, fileList){
console.log(response)
if(response.success){
//alert('上传成功')
//图片上传成功将课程图片地址保存到课程数据库
let pic = response.fileSystem.filePath
courseApi.addCoursePic(this.courseid,pic).then((res) => {
if(res.success){
this.$message.success('上传成功');
}else{
this.handleError()
}
});
}else{
this.handleError()
}
},
//上传失败执行的钩子方法
handleError(err, file, fileList){
this.$message.error('上传失败');
//清空文件队列
this.fileList = []
}
| 
收藏
淘帖
踩
