文章目錄
- 一. 需求分析
- 二. 服務端開發
- 1. 模型類
- 2. API
- 3. Dao
- 4. Service
- 5. Controller
- 三. 前端開發
- 1. API
- 2. 頁面
- 1). 添加上傳成功的鉤子 :on-success="handleSuccess"
- 2). 在鉤子方法 中保存課程圖片信息
一. 需求分析
圖片上傳到文件系統后,其它子系統如果想使用圖片可以引用圖片的地址,課程管理模塊使用圖片的方式是將圖片
地址保存到課程數據庫中。業務流程如下:
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-uploadaction="/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 = []},