修改课程信息功能（数据回显）

1、功能描述

点击上一步，回到课程信息基本页面，课程信息回显，根据课程id查询课程信息。

2、修改添加课程信息接口，返回课程id

（1）改写EduCourseController中的addCourseInfo方法

@ApiOperation(value = "添加课程信息")
@PostMapping("addCourseInfo")
public R addCourseInfo(@RequestBody CourseInfoForm courseInfoForm){
    String courseId = courseService.addCourseInfo(courseInfoForm);
    return R.ok().data("courseId",courseId);
}

（2）改写EduCourseServiceImpl中的addCourseInfo方法

//添加课程信息
@Override
public String addCourseInfo(CourseInfoForm courseInfoForm) {
    //1添加课程信息
    EduCourse eduCourse = new EduCourse();
    BeanUtils.copyProperties(courseInfoForm,eduCourse);
    int insert = baseMapper.insert(eduCourse);
    if(insert==0){//添加课程信息失败
        throw new GuliException(20001,"添加课程信息失败");
    }
    //2获取添加课程后的主键id
    String courseId = eduCourse.getId();

    //3添加课程描述信息
    EduCourseDescription courseDescription = new EduCourseDescription();
    courseDescription.setId(courseId);
    courseDescription.setDescription(courseInfoForm.getDescription());
    courseDescriptionService.save(courseDescription);

    return courseId;
}

3、根据课程id查询课程信息接口

（1）在EduCourseController中添加根据id查询课程信息的方法

@ApiOperation(value = "根据id查询课程信息") @GetMapping("{courseId}") public R getCourseInfoId(@PathVariable String courseId){ CourseInfoForm courseInfoForm = courseService.getCourseInfoId(courseId); return R.ok().data("courseInfo",courseInfoForm); }

（2）在EduCourseService添加根据课程id查询课程信息接口方法

CourseInfoForm getCourseInfoId(String courseId);

（3）在EduCourseServiceImpl实现根据课程id查询课程信息接口方法

//根据id查询课程信息
@Override
public CourseInfoForm getCourseInfoId(String courseId) {
    //1查询课程表
    EduCourse eduCourse = baseMapper.selectById(courseId);
    //1.1eduCourse复制到CourseInfoForm
    CourseInfoForm courseInfoForm = new CourseInfoForm();
    BeanUtils.copyProperties(eduCourse,courseInfoForm);
        //2查课程详情表
    EduCourseDescription courseDescription = courseDescriptionService.getById(courseId);
    courseInfoForm.setDescription(courseDescription.getDescription());
    
    return courseInfoForm;
}

4、前端改造，路由跳转传递课程id

（1）改造add.vue

data() {
    return {
      courseId: '',
      courseInfo: {
        subjectId: '',
        cover: '/static/001.jpg' // 默认课程封面
      }, // 封装表单数据
      saveBtnDisabled: false, // 保存按钮是否禁用
      teacherList: [], // 讲师信息集合
      oneSubjectList: [], // 一级分类集合
      twoSubjectList: [], // 二级分类集合
      BASE_API: process.env.BASE_API // 接口API地址
    }
  },

next() {
      course.addCourseInfo(this.courseInfo).then(response => {
        //保存成功后获取课程id
        this.courseId = response.data.courseId
        //提示
        this.$message({
          type: "success",
          message: "添加成功!"
        });
        //跳转下一个页面
        this.$router.push({path:`/course/chapter/${this.courseId}`})
      });
    }

（2）改造chapter.vue,获得课程id，点击上一步回到add.vue带着参数课程id

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
        console.log('this.courseId='+this.courseId)
    }

  },

  methods: {
    previous() {
      console.log('previous')
      this.$router.push({ path: `/course/add/${this.courseId}` })
    },

（3）实现数据回显，添加接口

//根据id查询课程信息
  getCourseInfoId(courseId){
    return request({
      url: `/eduservice/educourse/${courseId}`,
      method: 'get'
    })
  }

（4）在course/add.vue页面中调用接口

created() {
    if(this.$route.params&&this.$route.params.id){
        this.courseId =  this.$route.params.id
        console.log('回显 this.courseId='+this.courseId)
        course.getCourseInfoId(this.courseId)
        .then(response=>{
          this.courseInfo = response.data.courseInfo
        })
    }
    this.getAllTeacherList();
    this.getAllOneSubject();
  },

5、二级联动回显出现问题

（1）问题是什么？

二级数据回显的是标号不是文本内容。

（2）定位问题

（3）解决问题

created() {
    if (this.$route.params && this.$route.params.id) {
      this.courseId = this.$route.params.id;
      console.log("回显 this.courseId=" + this.courseId);
      this.getCourseInfoById();
    } else {
      this.getAllOneSubject();
    }
    this.getAllTeacherList();
  },
  methods: {
    //根据课程id查询课程信息
    getCourseInfoById() {
      course.getCourseInfoId(this.courseId).then(response => {
        //1数据回显
        this.courseInfo = response.data.courseInfo;
        //2查询所有分类，匹配一级并且匹配二级
        subject.getAllSubject().then(response => {
          //2.1匹配一级
          this.oneSubjectList = response.data.allSubject;
          //2.2遍历一级，匹配二级
          for (let i = 0; i < this.oneSubjectList.length; i++) {
            //得到每一个一级分类
            let oneSubject = this.oneSubjectList[i];
            if (oneSubject.id === this.courseInfo.subjectParentId) {
              this.twoSubjectList = oneSubject.children;
            }
          }
        });
      });
    },