一、后端实现

1、业务层

接口：CourseService.java

void updateCourseInfoById(CourseInfoForm courseInfoForm);

实现：CourseServiceImpl.java

@Override
public void updateCourseInfoById(CourseInfoForm courseInfoForm) {
    //保存课程基本信息
    Course course = new Course();
    BeanUtils.copyProperties(courseInfoForm, course);
    boolean resultCourseInfo = this.updateById(course);
    if(!resultCourseInfo){
        throw new GuliException(20001, "课程信息保存失败");
    }

    //保存课程详情信息
    CourseDescription courseDescription = new CourseDescription();
    courseDescription.setDescription(courseInfoForm.getDescription());
    courseDescription.setId(course.getId());
    boolean resultDescription = courseDescriptionService.updateById(courseDescription);
    if(!resultDescription){
        throw new GuliException(20001, "课程详情信息保存失败");
    }
}

2、web层

@ApiOperation(value = "更新课程")
@PutMapping("update-course-info/{id}")
public R updateCourseInfoById(
    @ApiParam(name = "CourseInfoForm", value = "课程基本信息", required = true)
    @RequestBody CourseInfoForm courseInfoForm,

    @ApiParam(name = "id", value = "课程ID", required = true)
    @PathVariable String id){

    courseService.updateCourseInfoById(courseInfoForm);
    return R.ok();
}

二、前端实现

1、定义api

course.js

updateCourseInfoById(courseInfo) {
  return request({
    url: `${api_name}/update-course-info/${courseInfo.id}`,
    method: 'put',
    data: courseInfo
  })
}

2、组件js

info.vue

updateData() {
    this.saveBtnDisabled = true
    course.updateCourseInfoById(this.courseInfo).then(response => {
        this.$message({
            type: 'success',
            message: '修改成功!'
        })
        return response// 将响应结果传递给then
    }).then(response => {
        this.$router.push({ path: '/edu/course/chapter/' + response.data.courseId })
    }).catch((response) => {
        // console.log(response)
        this.$message({
            type: 'error',
            message: '保存失败'
        })
    })
},