课程信息回显前后端实现

小鱼儿 2021-07-24 11:19 411阅读 0赞

# 一 后端实现 #

## 1 控制器 ##

@ApiOperation("根据ID查询课程详情")
    @GetMapping("course-info/{id}")
    public R getById(@ApiParam(value = "课程ID", required = true) @PathVariable String id) {
        CourseInfoForm courseInfoForm = courseService.getCourseInfoById(id);
        if (courseInfoForm != null) {
            return R.ok().data("item", courseInfoForm);
        } else {
            return R.ok().message("数据不存在");
        }
    }

## 2 service层 ##

接口

/**
    * 功能描述：根据id获得课程信息
    *
    * @author cakin
    * @date 2020/12/5
    * @param id 课程id
    * @return CourseInfoForm 课程详情
    */
    CourseInfoForm getCourseInfoById(String id);

实现

/**
    * 功能描述：根据id获得课程信息
    *
    * @author cakin
    * @date 2020/12/5
    * @param id 课程id
    * @return CourseInfoForm 课程详情
    */
    @Override
    public CourseInfoForm getCourseInfoById(String id) {
        // 根据id获取Course
        Course course = baseMapper.selectById(id);
        if (course == null) {
            return null;
        }
        // 根据id获取CourseDescription
        CourseDescription courseDescription = courseDescriptionMapper.selectById(id);
        // 组装成CourseInfoForm
        CourseInfoForm courseInfoForm = new CourseInfoForm();
        BeanUtils.copyProperties(course, courseInfoForm);
        courseInfoForm.setDescription(courseDescription.getDescription());
        return courseInfoForm;
    }

# 二 前端实现 #

## 1 定义api ##

// 根据课程id获得课程信息
      getCourseInfoById(id) {
        return request({
          url: `/admin/edu/course/course-info/${id}`,
          method: 'get'
        })
      },

## 2 组件js ##

fetchCourseInfoById(id) {
      courseApi.getCourseInfoById(id).then(response => {
        this.courseInfo = response.data.item
      })
    },

页面加载时

created() {
        // courseId来源于父组件
        if (this.$parent.courseId) { // 回显
          this.fetchCourseInfoById(this.$parent.courseId)
        } 
        初始化分类列表
        this.initSubjectList()
        // 获取讲师列表
        this.initTeacherList()
      },

# 三 二级类别填充问题 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

默认情况下，当 this.initSubjectList()方法被调用的时候，只会填充一级分类列表，不会填充二级分类列表

因此二级分类列表中没有数据，当页面回填的时候，二级分类列表被回填的是id值，无法找到列表中对应的title显示出来，

因此二级分类列表中只显示一个id的值

解决方案：得到表单回填数据后，根据表单回填数据的subjectParentId，找到对应的二级列表，将次二级列表回填至页面

## 1 修改info.vue的created ##

将 this.initSubjectList() 移至else

created() {
        // courseId来源于父组件
        if (this.$parent.courseId) { // 回显
          this.fetchCourseInfoById(this.$parent.courseId)
        } else { // 新增：只渲染一级类别
          this.initSubjectList()
        }
        // 老师列表
        this.initTeacherList()
      },

## 2 修改fetchCourseInfoById ##

// 根据id获取课程基本信息
        fetchCourseInfoById(id) {
          courseApi.getCourseInfoById(id).then(response => {
            this.courseInfo = response.data.item
            // 课程类别渲染
            subjectApi.getNestedTreeList().then(response => {
              // 一级分类列表
              this.subjectList = response.data.items
              // 判断 this.subjectList下哪个一级类别是当前绑定的一级类别
              this.subjectList.forEach(subject => {
                if (subject.id === this.courseInfo.subjectParentId) {
                  // 找到对应一级类别的二级类别列表
                  this.subjectLevelTwoList = subject.children
                }
              })
            })
          })
        },

# 四 测试 #

![20201205163931549.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/9d32b12c81544d9ca3bb7c692068d026.png
[20201205163931549.png]: /images/20210724/a3564f5579824e7a8d6e74a72eaa6fca.png