修改课程信息数据回显

1.入口改造

//guli-admin/src/views/course/chapter.vue
export default {
  data() {
    return {
      courseId:'',
      saveBtnDisabled: false // 保存按钮是否禁用
    }
  },
  created() {
    console.log('chapter created');
    if (this.$route.params && this.$route.params.id) {
      this.courseId = this.$route.params.id;
    }
  },
  methods: {
    previous() {
      console.log('previous');
      this.$router.push({path: `/course/add/${this.courseId}`});
    },
    next() {
      console.log('next')
      this.$router.push({path: `/course/publish/${this.courseId}`});
    }
  }
}

2.开发数据回显接口

//src/main/java/controller/EduCourseController.java
@ApiOperation(value = "根据id查询课程信息")
@GetMapping("getCourseInfoById/{id}")
public R getCourseInfoById(@PathVariable String id ){
    CourseInfoForm courseInfoForm =  courseService.getCourseInfoById(id);
    return R.ok().data("courseInfo",courseInfoForm);
}

//src/main/java/service/impl/EduCourseServiceImpl.java
//根据id查询课程信息：Day8
@Override
public CourseInfoForm getCourseInfoById(String id) {
    //1查询课程基本信息
    EduCourse eduCourse = baseMapper.selectById(id);
    //2封装课程基本信息
    CourseInfoForm courseInfoForm = new CourseInfoForm();
    BeanUtils.copyProperties(eduCourse,courseInfoForm);
    //3查询课程描述信息
    EduCourseDescription courseDescription = courseDescriptionService.getById(id);
    //4封装课程描述信息
    courseInfoForm.setDescription(courseDescription.getDescription());
    return courseInfoForm;
}

• 测试：http://localhost:8001/swagger-ui.html

3.前端api接口方法

//guli-admin/src/api/course.js
//根据id查询课程信息
getCourseInfoById(id){
return request({
  url: `/eduservice/course/getCourseInfoById/${id}`,
  method: 'get'
})
}

4.页面调用，数据渲染

export default {
  components: {Tinymce},
  data() {
    return {
      courseId:'',
      saveBtnDisabled: false, //保存按钮是否禁用
      courseInfo: {
        subjectId:"",
        cover:"/static/vue.png"
      }, //课程信息
      teacherList:[], //讲师信息
      oneSubjectList:[],//一级分类
      twoSubjectList:[],//二级分类
      BASE_API: process.env.BASE_API // 接口API地址
    };
  },
created() {
console.log("info created");
if (this.$route.params && this.$route.params.id) {
  this.courseId = this.$route.params.id;
  //实现数据回显：Day8
  this.getInfoByCourseId();
} else{
  this.getOneSubjectList();
}
this.getTeacherList();
},

methods: {
//修改数据回显：Day8
getInfoByCourseId() {
  //1实现数据回显
  course.getCourseInfoById(this.courseId).then(response => {
    this.courseInfo = response.data.courseInfo;
    //2初始化一级分类信息
    subject.getAllSubject().then(response => {
      this.oneSubjectList = response.data.allSubject;
      //3初始化二级分类信息
      for (let i = 0; i < this.oneSubjectList.length; i++) {
        let oneSubject = this.oneSubjectList[i];
        if (this.courseInfo.subjectParentId === oneSubject.id) {
          this.twoSubjectList = oneSubject.children;
        }
      }
    });
  });
},

修改课程信息实现

1.接口实现

//src/main/java/controller/EduCourseController.java
@ApiOperation(value = "修改课程信息")
@PostMapping("updateCourseInfo")
public R updateCourseInfo(@RequestBody CourseInfoForm courseInfoForm){
    courseService.updateCourseInfo(courseInfoForm);
    return R.ok();
}

//src/main/java/service/impl/EduCourseServiceImpl.java
//修改课程信息
@Override
public void updateCourseInfo(CourseInfoForm courseInfoForm) {
    //1修改课程基本信息
    EduCourse eduCourse = new EduCourse();
    BeanUtils.copyProperties(courseInfoForm,eduCourse);
    int update = baseMapper.updateById(eduCourse);
    //2判断修改是否成功
    if(update==0){
        throw new GuliException(20001,"修改课程失败");
    }
    //3修改课程描述信息
    String courseId = eduCourse.getId();
    EduCourseDescription courseDescription = new EduCourseDescription();
    courseDescription.setId(courseId);
    courseDescription.setDescription(courseInfoForm.getDescription());
    courseDescriptionService.updateById(courseDescription);
}    

2.前端对接