修改课程功能

点击下图中上一步可以回到课程添加页面，对课程进行修改，下面来实现这一过程。

业务其实很简单:做数据回写，对回写的数据更新到数据库。

1 后端实现

要实现两个接口。(1)根据课程id查询到该课程基本信息,(2)修改基本课程信息。

CourseController

 // 查询课程信息
    @GetMapping("/getCourseInfo/{courseId}")
    public R getCourseInfo(@PathVariable String courseId) {
        CourseInfoForm courseInfoForm= eduCourseService.getCourseInfo(courseId);
        return R.ok().data("courseInfoForm", courseInfoForm);
    }

 // 修改课程信息
    @PostMapping("/updateCourseInfo")
    public R updateCourseInfo(@RequestBody CourseInfoForm courseInfoForm) {
        eduCourseService.updateCourseInfo(courseInfoForm);
        return R.ok();
    }

EduCourseServiceImpl

    @Override
    public CourseInfoForm getCourseInfo(String courseId) {
        CourseInfoForm courseInfoForm = new CourseInfoForm();
        // 1.查询课程表
        EduCourse eduCourse= baseMapper.selectById(courseId);
        BeanUtils.copyProperties(eduCourse, courseInfoForm);
        // 2.查询描述表
        EduCourseDescription eduCourseDescription = eduCourseDescriptionService.getById(courseId);
        courseInfoForm.setDescription(eduCourseDescription.getDescription());
        return courseInfoForm;
    }

  @Override
    public void updateCourseInfo(CourseInfoForm courseInfoForm) {
        // 1.修改课程表
        EduCourse eduCourse = new EduCourse();
        BeanUtils.copyProperties(courseInfoForm, eduCourse);
        int update = baseMapper.updateById(eduCourse);
        if(update <= 0) {
            throw new GuliException(20001, "修改课程失败");
        }
        // 2.修改描述表
        EduCourseDescription eduCourseDescription = new EduCourseDescription();
        eduCourseDescription.setDescription(courseInfoForm.getDescription());
        eduCourseDescriptionService.updateById(eduCourseDescription);
    }

2 前端实现

course.js

    //根据课程id 查询课程基本信息
    getCourseInfoById(courseId){
        return request({
            url:`/eduservice/edu-course/getCourseInfo/${courseId}`,
            method: 'get',
        })
    },
    //修改课程信息
    updateCourseInfo(courseInfoForm){
        return request({
            url:"/eduservice/edu-course/updateCourseInfo",
            method: 'post',
            data: courseInfoForm,
        })
    }

info.vue修改跳转url。

 
     //跳转到上一步
    previous() {
      this.$router.push({ path: "/course/info/" + this.courseId });
    },
    next() {
      //跳转到第三步
      this.$router.push({ path: "/course/publish/"+ this.courseId });
    }
}

最后在info.vue中实现数据回写。

methods: {  
 getCourseInfo() {
    course.getCourseInfoById(this.courseId)
    .then((resp) => {
      this.courseInfoform = resp.data.courseInfoForm // 这里注意下大小写，前端命名不规范，导致了这个小问题
    })
  }

  },
  created() {
      if(this.$route.params && this.$route.params.id) {
        this.courseId = this.$route.params.id
        this.getCourseInfo()
      }
  }

测试。发现按一个小bug:课程二级分类显示的是id。

怎么回事？下拉列表数据的默认显示原理是:根据存储下拉选项的list的id与需要默认显示的id进行一一比较,将匹配的list中的数据进行回写。一级分类在页面中对subjectOneList默认进行了初始化，但二级分类subjectTwoList没有。下面具体解决下，看下代码就可以更好的理解这个过程了。