一、后端实现

1、业务层

接口：CourseService.java

CourseInfoForm getCourseInfoFormById(String id);

实现：CourseServiceImpl.java

@Override
public CourseInfoForm getCourseInfoFormById(String id) {

    Course course = this.getById(id);
    if(course == null){
        throw new GuliException(20001, "数据不存在");
    }
    CourseInfoForm courseInfoForm = new CourseInfoForm();
    BeanUtils.copyProperties(course, courseInfoForm);

    CourseDescription courseDescription = courseDescriptionService.getById(id);
    if(course != null){
        courseInfoForm.setDescription(courseDescription.getDescription());
    }

    return courseInfoForm;
}

2、web层

@ApiOperation(value = "根据ID查询课程")
@GetMapping("course-info/{id}")
public R getById(
    @ApiParam(name = "id", value = "课程ID", required = true)
    @PathVariable String id){

    CourseInfoForm courseInfoForm = courseService.getCourseInfoFormById(id);
    return R.ok().data("item", courseInfoForm);
}

3、Swagger中测试

二、前端实现

1、定义api

api/edu/course.js

getCourseInfoById(id) {
    return request({
        url: `${api_name}/course-info/${id}`,
        method: 'get'
    })
}

2、组件js

init() {
    if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        //根据id获取课程基本信息
        this.fetchCourseInfoById(id)
    } 
    
    ......
},
    
fetchCourseInfoById(id) {
  course.getCourseInfoById(id).then(response => {
    this.courseInfo = response.data.item
  }).catch((response) => {
    this.$message({
      type: 'error',
      message: response.message
    })
  })
},

三、解决级联下拉菜单回显问题

1、数据库中增加冗余列

subject_parent_id 课程专业父级ID

2、pojo中增加属性

entity.Course.java

form.CourseInfo.java

@ApiModelProperty(value = "课程专业父级ID")
private String subjectParentId;

3、vue组件中绑定数据

edu/course/infoinfo.vue

<el-select v-model="courseInfo.subjectParentId" ......

4、修改init方法

将 this.initSubjectList() 和 this.initTeacherList()移至else

init() {
  if (this.$route.params && this.$route.params.id) {
    const id = this.$route.params.id
    // 根据id获取课程基本信息
    this.fetchCourseInfoById(id)
  } else {
    this.courseInfo = { ...defaultForm }
    // 初始化分类列表
    this.initSubjectList()
    // 获取讲师列表
    this.initTeacherList()
  }
},

5、修改fetchCourseInfoById方法

fetchCourseInfoById(id) {
  course.getCourseInfoById(id).then(responseCourse => {
    this.courseInfo = responseCourse.data.item
    // 初始化分类列表
    subject.getNestedTreeList().then(responseSubject => {
      this.subjectNestedList = responseSubject.data.items
      for (let i = 0; i < this.subjectNestedList.length; i++) {
        if (this.subjectNestedList[i].id === this.courseInfo.subjectParentId) {
          this.subSubjectList = this.subjectNestedList[i].children
        }
      }
    })

    // 获取讲师列表
    this.initTeacherList()
  }).catch((response) => {
    this.$message({
      type: 'error',
      message: response.message
    })
  })
},