添加课程信息前端之二

一.讲师显示

1.修改info.vue，替换原先的<el-from-item>中的内容

<template>
<div class="app-container">
  <h2 style="text-align: center;">发布新课程</h2>
  <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
    <el-step title="填写课程基本信息"/>
    <el-step title="创建课程大纲"/>
    <el-step title="最终发布"/>
  </el-steps>
 <el-form label-width="120px">
<el-form-item label="课程标题">
  <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
</el-form-item>


<!-- 所属分类 TODO -->


<!-- 课程讲师 TODO -->

<el-form-item label="总课时">
  <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
</el-form-item>


<!-- 课程简介 TODO -->
<el-form-item label="课程简介">
  <el-input v-model="courseInfo.description" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
</el-form-item>


<!-- 课程封面 TODO -->

<el-form-item label="课程价格">
  <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
</el-form-item>
<el-form-item>
  <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
</el-form-item>
</el-form>
</div>
</template>

2.添加course.js文件到api中

import request from '@/utils/request'
//引入了util中的request，request封装了axios

export default{
     //1.添加课程信息功能
      addCourseInfo(courseInfo){
        return request({
            //url: '/table/list',
            url:`/eduservice/course/addCourseInfo`,
            method: 'post',
            data:courseInfo
     
          })

     }
     
}

3.添加课程之后，返回课程id

章节和课程是一对多的关系，所以需要添加之后的课程id，为了章节做准备

  ①.完善后端接口，返回id

String id = courseService.saveCourseInfo(courseInfoVo);

@RestController
@RequestMapping("/eduservice/course")
@CrossOrigin
public class EduCourseController {

    @Autowired
    private EduCourseService courseService;

    //添加课程基本信息的方法
    @PostMapping("addCourseInfo")
    public R addCourseInfo(@RequestBody CourseInfoVo courseInfoVo){
        String id = courseService.saveCourseInfo(courseInfoVo);
        return R.ok().data("courseId",id);
    }

}

②.实现类中返回id，即cid

@Service
public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {
    //课程描述的注入
    @Autow