Silicon Valley class lesson 6 - Tencent cloud on demand management module (I)

Silicon Valley class day 7 - VOD management module （ One ）

One 、 Background management system - VOD management module

1、 Requirements of VOD management module

Add an on-demand course , Contains basic course information , Course chapters , Course summary and final release

1.1、 Create a course related table

2、 Environment building

2.1、 Generate relevant code

3、 Function realization - Course list

Realize paging condition query on-demand course function

3.1、 Develop course list interface

To write CourseController

@Api(tags = " Course management interface ")
@RestController
@RequestMapping(value="/admin/vod/course")
public class CourseController {
    

    @Autowired
    private CourseService courseService;

    @ApiOperation(value = " Get paging list ")
    @GetMapping("{page}/{limit}")
    public Result index(
            @ApiParam(name = "page", value = " The current page number ", required = true)
            @PathVariable Long page,
            @ApiParam(name = "limit", value = " Records per page ", required = true)
            @PathVariable Long limit,
            @ApiParam(name = "courseVo", value = " Query object ", required = false)
                    CourseQueryVo courseQueryVo) {
    
        Page<Course> pageParam = new Page<>(page, limit);
        Map<String,Object> map = courseService.findPage(pageParam, courseQueryVo);
        return Result.ok(map);
    }
}

To write CourseService

public interface CourseService extends IService<Course> {
    
    // Course list 
    Map<String,Object> findPage(Page<Course> pageParam, CourseQueryVo courseQueryVo);
}

To write CourseServiceImpl

@Service
public class CourseServiceImpl extends ServiceImpl<CourseMapper, Course> implements CourseService {
    

    @Autowired
    private TeacherService teacherService;

    @Autowired
    private SubjectService subjectService;

    // Course list 
    @Override
    public Map<String,Object> findPage(Page<Course> pageParam, CourseQueryVo courseQueryVo) {
    
        // Get the condition value 
        String title = courseQueryVo.getTitle();// name 
        Long subjectId = courseQueryVo.getSubjectId();// Secondary classification 
        Long subjectParentId = courseQueryVo.getSubjectParentId();// First level classification 
        Long teacherId = courseQueryVo.getTeacherId();// lecturer 
        // Encapsulation condition 
        QueryWrapper<Course> wrapper = new QueryWrapper<>();
        if(!StringUtils.isEmpty(title)) {
    
            wrapper.like("title",title);
        }
        if(!StringUtils.isEmpty(subjectId)) {
    
            wrapper.eq("subject_id",subjectId);
        }
        if(!StringUtils.isEmpty(subjectParentId)) {
    
            wrapper.eq("subject_parent_id",subjectParentId);
        }
        if(!StringUtils.isEmpty(teacherId)) {
    
            wrapper.eq("teacher_id",teacherId);
        }
        // Call the method to query 
        Page<Course> pages = baseMapper.selectPage(pageParam, wrapper);
        long totalCount = pages.getTotal();// Total number of records 
        long totalPage = pages.getPages();// Total number of pages 
        long currentPage = pages.getCurrent();// The current page 
        long size = pages.getSize();// Records per page 
        // Data set per page 
        List<Course> records = pages.getRecords();
        // Traverse the package instructor and category name 
        records.stream().forEach(item -> {
    
            this.getTeacherOrSubjectName(item);
        });
		// Encapsulate return data 
        Map<String,Object> map = new HashMap<>();
        map.put("totalCount",totalCount);
        map.put("totalPage",totalPage);
        map.put("records",records);
        return map;
    }

    // Get lecturer and classification name 
    private Course getTeacherOrSubjectName(Course course) {
    
        // Query lecturer name 
        Teacher teacher = teacherService.getById(course.getTeacherId());
        if(teacher != null) {
    
            course.getParam().put("teacherName",teacher.getName());
        }
		// Query category name 
        Subject subjectOne = subjectService.getById(course.getSubjectParentId());
        if(subjectOne != null) {
    
            course.getParam().put("subjectParentTitle",subjectOne.getTitle());
        }
        Subject subjectTwo = subjectService.getById(course.getSubjectId());
        if(subjectTwo != null) {
    
            course.getParam().put("subjectTitle",subjectTwo.getTitle());
        }
        return course;
    }
}

3.2、 Develop the front end of the course list

（1）src Under the table of contents index.js File add route

  //  Course management 
  {
    
    path: '/vod',
    component: Layout,
    redirect: '/vod/course/list',
    name: 'Vod',
    meta: {
    
      title: ' VOD management ',
      icon: 'el-icon-bank-card'
    },
    alwaysShow: true,
    children: [
      {
    
        path: 'course/list',
        name: 'CourseList',
        component: () => import('@/views/vod/course/list'),
        meta: {
     title: ' Course list ' }
      },
      {
    
        path: 'course/info',
        name: 'CourseInfo',
        component: () => import('@/views/vod/course/form'),
        meta: {
     title: ' Release course ' },
        hidden: true
      },
      {
    
        path: 'course/info/:id',
        name: 'CourseInfoEdit',
        component: () => import('@/views/vod/course/form'),
        meta: {
     title: ' Edit course ' },
        hidden: true
      },
      {
    
        path: 'course/chapter/:id',
        name: 'CourseChapterEdit',
        component: () => import('@/views/vod/course/form'),
        meta: {
     title: ' Edit outline ' },
        hidden: true
      },
      {
    
        path: 'course/chart/:id',
        name: 'CourseChart',
        component: () => import('@/views/vod/course/chart'),
        meta: {
     title: ' Course Statistics ' },
        hidden: true
      }
    ]
  },

（2） establish vue page

（3） stay api directories creating course.js file

import request from '@/utils/request'

const api_name = '/admin/vod/course'

export default {
    
  // Course list 
  getPageList(page, limit, searchObj) {
    
    return request({
    
      url: `${
      api_name}/${
      page}/${
      limit}`,
      method: 'get',
      params: searchObj
    })
  },
}

（4） stay api Catalog teacher.js File definition interface

import request from '@/utils/request'

const api_name = '/admin/vod/teacher'

export default {
    
    
//......
    
    // All instructors 
    list() {
    
      return request({
    
        url: `${
      api_name}/findAll`,
        method: `get`
      })
  }
}

（5） To write list.vue page

<template>
  <div class="app-container">
    <!-- Query form -->
    <el-card class="operate-container" shadow="never">
    <el-form :inline="true" class="demo-form-inline">

      <!--  Classification ： Cascading drop-down list  -->
      <!--  First level classification  -->
      <el-form-item label=" Course category ">
        <el-select
          v-model="searchObj.subjectParentId"
          placeholder=" Please select "
          @change="subjectLevelOneChanged">
          <el-option
            v-for="subject in subjectList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>

        <!--  Secondary classification  -->
        <el-select v-model="searchObj.subjectId" placeholder=" Please select ">
          <el-option
            v-for="subject in subjectLevelTwoList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>
      </el-form-item>

      <!--  title  -->
      <el-form-item label=" title ">
        <el-input v-model="searchObj.title" placeholder=" Course title "/>
      </el-form-item>
      <!--  lecturer  -->
      <el-form-item label=" lecturer ">
        <el-select
          v-model="searchObj.teacherId"
          placeholder=" Please select the lecturer ">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"/>
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="fetchData()"> Inquire about </el-button>
      <el-button type="default" @click="resetData()"> Empty </el-button>
    </el-form>
    </el-card>

    <!--  Tool button  -->
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px"> Data list </span>
      <el-button class="btn-add" @click="add()"> add to </el-button>
    </el-card>

    <!--  form  -->
    <el-table :data="list" border stripe>
        <el-table-column label="#" width="50">
        <template slot-scope="scope">
          {
   { (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label=" cover " width="200" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="scope.row.title" width="100%">
        </template>
      </el-table-column>
      <el-table-column label=" Course information ">
        <template slot-scope="scope">
          <a href="">{
   { scope.row.title }}</a>
          <p>
             classification ：{
   { scope.row.param.subjectParentTitle }} > {
   { scope.row.param.subjectTitle }}
          </p>
          <p>
             Class hour ：{
   { scope.row.lessonNum }} /
             Browse ：{
   { scope.row.viewCount }} /
             Paid students ：{
   { scope.row.buyCount }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label=" lecturer " width="100" align="center">
        <template slot-scope="scope">
          {
   { scope.row.param.teacherName }}
        </template>
      </el-table-column>
      <el-table-column label=" Price ( element )" width="100" align="center" >
        <template slot-scope="scope">
          <!-- {
   { typeof '0' }}  {
   { typeof 0 }} {
   { '0' == 0 }} -->
          <!-- {
   { typeof scope.row.price }}
          {
   { typeof Number(scope.row.price) }}
          {
   { typeof Number(scope.row.price).toFixed(2) }} -->

          <el-tag v-if="Number(scope.row.price) === 0" type="success"> free </el-tag>

          <!--  The front end solves the problem of keeping two decimal places  -->
          <!-- <el-tag v-else>{
   { Number(scope.row.price).toFixed(2) }}</el-tag> -->

          <!--  The back end solves the problem of keeping two decimal places , The front end doesn't have to deal with  -->
          <el-tag v-else>{
   { scope.row.price }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label=" Course status " width="100" align="center" >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 0 ? 'warning' : 'success'">{
   { scope.row.status === 0 ? ' Unpublished ' : ' The published ' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label=" Release time " width="140" align="center">
        <template slot-scope="scope">
          {
   { scope.row.createTime ? scope.row.createTime.substr(0, 16) : '' }}
        </template>
      </el-table-column>

      <el-table-column label=" operation " width="210" align="center">
        <template slot-scope="scope">
          <router-link :to="'/vodcourse/course/info/'+scope.row.id">
            <el-button type="text" icon="el-icon-edit" > modify </el-button>
          </router-link>
          <router-link :to="'/vodcourse/course/chapter/'+scope.row.id">
            <el-button type="text" icon="el-icon-edit" > Edit outline </el-button>
          </router-link>
          <router-link :to="'/vodcourse/course/chart/'+scope.row.id">
            <el-button type="text" icon="el-icon-edit"> Course Statistics </el-button>
          </router-link>
          <el-button type="text" icon="el-icon-delete" @click="removeById(scope.row.id)" > Delete </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  The paging component  -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center;"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
    />
  </div>
</template>

<script>
import courseApi from '@/api/vod/course'
import teacherApi from '@/api/vod/teacher'
import subjectApi from '@/api/vod/subject'

export default {

  data() {
    return {
      list: [], //  Course list 
      total: 0, //  Total number of records 
      page: 1, //  Page number 
      limit: 10, //  Records per page 
      searchObj: {
        subjectId: ''//  Solve the problem that the secondary category cannot be selected in the query form 
      }, //  Query criteria 
      teacherList: [], //  List of lecturers 
      subjectList: [], //  List of primary categories 
      subjectLevelTwoList: [] //  Secondary classification list ,
    }
  },

  created() {
    this.fetchData()
    //  Initialize classification list 
    this.initSubjectList()
    //  Get a list of lecturers 
    this.initTeacherList()
  },

  methods: {
    fetchData() {
      courseApi.getPageList(this.page, this.limit, this.searchObj).then(response => {
        this.list = response.data.records
        console.log(this.list)
        this.total = response.data.totalCount
      })
    },

    initTeacherList() {
      teacherApi.list().then(response => {
        this.teacherList = response.data
      })
    },

    initSubjectList() {
      subjectApi.getChildList(0).then(response => {
        this.subjectList = response.data
      })
    },

    subjectLevelOneChanged(value) {
      subjectApi.getChildList(value).then(response => {
        this.subjectLevelTwoList = response.data
        this.searchObj.subjectId = ''
      })
    },

    add() {
      this.$router.push({ path: '/vod/course/info' })
    },

    //  The number of records per page changes ,size： Callback Arguments , Indicates the currently selected “ Number of entries per page ”
    changePageSize(size) {
      this.limit = size
      this.fetchData()
    },

    //  Change page number ,page： Callback Arguments , Indicates the currently selected “ Page number ”
    changeCurrentPage(page) {
      this.page = page
      this.fetchData()
    },

    //  Reset form 
    resetData() {
      this.searchObj = {}
      this.subjectLevelTwoList = [] //  Secondary classification list 
      this.fetchData()
    }
  }
}
</script>

Two 、 Release course - Fill in the basic information of the course

1、 Interface effect

2、 Add basic course information interface

2.1、 Create a course description service and mapper

2.2、 Create an interface to add basic course information

（1）controller

// Add course basic information 
@ApiOperation(value = " newly added ")
@PostMapping("save")
public Result save(@RequestBody CourseFormVo courseFormVo) {
    
    Long courseId = courseService.saveCourseInfo(courseFormVo);
    return Result.ok(courseId);
}

（2）service

// Implementation method 
// Add course basic information 
@Override
public Long saveCourseInfo(CourseFormVo courseFormVo) {
    
    // Save basic course information 
    Course course = new Course();
    BeanUtils.copyProperties(courseFormVo, course);
    baseMapper.insert(course);

    // Save course details 
    CourseDescription courseDescription = new CourseDescription();
    courseDescription.setDescription(courseFormVo.getDescription());
    courseDescription.setCourseId(course.getId());
    descriptionService.save(courseDescription);

    // Return to course id
    return course.getId();
}

3、 Add the front end of basic course information

3.1、 Course list list.vue Add method

add() {
    
    this.$router.push({
     path: '/vod/course/info' })
},

3.2、course.js Defining interfaces

// Add course basic information 
saveCourseInfo(courseInfo) {
    
  return request({
    
    url: `${
      api_name}/save`,
    method: 'post',
    data: courseInfo
  })
},

3.3、 Create a course basic information addition page

（1）form.vue

<template>
  <div class="app-container">
    <h2 style="text-align: center;"> Release new courses </h2>
    <el-steps :active="active" finish-status="success" simple style="margin-bottom: 40px">
      <el-step title=" Fill in the basic information of the course " />
      <el-step title=" Create Syllabus " />
      <el-step title=" Release course " />
    </el-steps>
    <!--  Fill in the basic information of the course  -->
    <info v-if="active === 0" />
    <!--  Create Syllabus  -->
    <chapter v-if="active === 1" />
    <!--  Release course  -->
    <Publish v-if="active === 2 || active === 3" />
  </div>
</template>

<script>
//  Introduce subcomponents 
import Info from '@/views/vod/course/components/Info'
import Chapter from '@/views/vod/course/components/Chapter'
import Publish from '@/views/vod/course/components/Publish'

export default {
  components: { Info, Chapter, Publish }, //  Register subcomponents 
  data() {
    return {
      active: 0,
      courseId: null
    }
  },
  created() {
    //  Get route id
    if (this.$route.params.id) {
      this.courseId = this.$route.params.id
    }
    if (this.$route.name === 'CourseInfoEdit') {
      this.active = 0
    }
    if (this.$route.name === 'CourseChapterEdit') {
      this.active = 1
    }
  }
}
</script>

（2）Info.vue

<template>
  <div class="app-container">
    <!--  Course information form  -->
    <el-form label-width="120px">
      <el-form-item label=" Course title ">
        <el-input v-model="courseInfo.title" placeholder="  Example ： Machine learning project class ： From foundation to building project video course . Pay attention to the case of major name "/>
      </el-form-item>
      <!--  Course instructor  -->
      <el-form-item label=" Course instructor ">
        <el-select
          v-model="courseInfo.teacherId"
          placeholder=" Please select ">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"/>
        </el-select>
      </el-form-item>
      <!--  Classification ： Cascading drop-down list  -->
      <el-form-item label=" Course category ">
        <!--  First level classification  -->
        <el-select
          v-model="courseInfo.subjectParentId"
          placeholder=" Please select "
          @change="subjectChanged">
          <el-option
            v-for="subject in subjectList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>
        <!--  Secondary classification  -->
        <el-select v-model="courseInfo.subjectId" placeholder=" Please select ">
          <el-option
            v-for="subject in subjectLevelTwoList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label=" Total class hours ">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder=" Please fill in the total number of class hours "/>
      </el-form-item>
      <!--  Course introduction -->
      <el-form-item label=" Course introduction ">
        <el-input v-model="courseInfo.description" type="textarea" rows="5"/>
      </el-form-item>
      <!--  Course cover  -->
      <el-form-item label=" Course cover ">
        <el-upload
          :show-file-list="false"
          :on-success="handleCoverSuccess"
          :before-upload="beforeCoverUpload"
          :on-error="handleCoverError"
          :action="BASE_API+'/admin/vod/file/upload?module=cover'"
          class="cover-uploader">
          <image v-if="courseInfo.cover" :src="courseInfo.cover">
          <i v-else class="el-icon-plus avatar-uploader-icon"/>
        </el-upload>
      </el-form-item>
      <el-form-item label=" Price of course ">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder=" Please set the free course as 0 element "/>  element 
      </el-form-item>
    </el-form>

    <div style="text-align:center">
      <el-button :disabled="saveBtnDisabled" type="primary" @click="saveAndNext()"> Save and next </el-button>
    </div>
  </div>
</template>
<script>
import courseApi from '@/api/vod/course'
import teacherApi from '@/api/vod/teacher'
import subjectApi from '@/api/vod/subject'

export default {
  data() {
    return {
      BASE_API: 'http://localhost:8301',
      saveBtnDisabled: false, //  Whether the button is disabled 
      courseInfo: {//  The form data 
        price: 0,
        lessonNum: 0,
        //  The following is to solve the problem of incomplete form data insert Check that the statement is not empty 
        teacherId: '',
        subjectId: '',
        subjectParentId: '',
        cover: '',
        description: ''
      },
      teacherList: [], //  List of lecturers 
      subjectList: [], //  List of primary categories 
      subjectLevelTwoList: []//  Secondary classification list 
    }
  },
  created() {
    //  Initialize classification list 
    this.initSubjectList()
    //  Get a list of lecturers 
    this.initTeacherList()
  },
  methods: {
    //  Get a list of lecturers 
    initTeacherList() {
      teacherApi.list().then(response => {
        this.teacherList = response.data
      })
    },

    //  Initialize classification list 
    initSubjectList() {
      subjectApi.getChildList(0).then(response => {
        this.subjectList = response.data
      })
    },

    //  Choose the first level of classification , Switch secondary classification 
    subjectChanged(value) {
      subjectApi.getChildList(value).then(response => {
        this.courseInfo.subjectId = ''
        this.subjectLevelTwoList = response.data
      })
    },

    //  Upload successful callback 
    handleCoverSuccess(res, file) {
      this.courseInfo.cover = res.data
    },

    //  Upload verification 
    beforeCoverUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error(' Uploading a picture of your head can only be  JPG  Format !')
      }
      if (!isLt2M) {
        this.$message.error(' The size of the uploaded image cannot exceed  2MB!')
      }
      return isJPG && isLt2M
    },

    //  Error handling 
    handleCoverError() {
      console.log('error')
      this.$message.error(' Upload failed 2')
    },

    //  Save and next 
    saveAndNext() {
      this.saveBtnDisabled = true
      if (!this.$parent.courseId) {
        this.saveData()
      } else {
        //this.updateData()
      }
    },

    //  preservation 
    saveData() {
      courseApi.saveCourseInfo(this.courseInfo).then(response => {
        this.$message.success(response.message)
        this.$parent.courseId = response.data //  obtain courseId
        this.$parent.active = 1 //  next step 
      })
    }
  }
}
</script>
<style scoped>
.tinymce-container {
  position: relative;
  line-height: normal;
}
.cover-uploader .avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  font-size: 28px;
  color: #8c939d;
  width: 640px;
  height: 357px;
  line-height: 357px;
  text-align: center;
}
.cover-uploader .avatar-uploader-icon:hover {
  border-color: #409EFF;
}
.cover-uploader img {
  width: 640px;
  height: 357px;
  display: block;
}
</style>

3、 ... and 、 Release course - Modify the basic information of the course

1、 Modify the basic information interface of the course

1.1、CourseService Define methods

    // according to id Access to course information 
    CourseFormVo getCourseFormVoById(Long id);

    // according to id Modify course information 
    void updateCourseById(CourseFormVo courseFormVo);

1.2、CourseServiceImpl Implementation method

    // according to id Access to course information 
    @Override
    public CourseFormVo getCourseFormVoById(Long id) {
    
        // from course Data fetching from table 
        Course course = baseMapper.selectById(id);
        if(course == null){
    
            return null;
        }
        // from course_description Data fetching from table 
        CourseDescription courseDescription = descriptionService.getById(id);
        // establish courseInfoForm object 
        CourseFormVo courseFormVo = new CourseFormVo();
        BeanUtils.copyProperties(course, courseFormVo);
        if(courseDescription != null){
    
            courseFormVo.setDescription(courseDescription.getDescription());
        }
        return courseFormVo;
    }

    // according to id Modify course information 
    @Override
    public void updateCourseById(CourseFormVo courseFormVo) {
    
        // Modify the basic information of the course 
        Course course = new Course();
        BeanUtils.copyProperties(courseFormVo, course);
        baseMapper.updateById(course);
        // Modify course details 
        CourseDescription courseDescription = descriptionService.getById(course.getId());
        courseDescription.setDescription(courseFormVo.getDescription());
        description.setId(course.getId());
        descriptionService.updateById(courseDescription);
    }

1.3、CourseController Implementation method

    @ApiOperation(value = " obtain ")
    @GetMapping("get/{id}")
    public Result get(@PathVariable Long id) {
    
        CourseFormVo course = courseService.getCourseFormVoById(id);
        return Result.ok(course);
    }

    @ApiOperation(value = " modify ")
    @PutMapping("update")
    public Result updateById(@RequestBody CourseFormVo courseFormVo) {
    
        courseService.updateCourseById(courseFormVo);
        return Result.ok();
    }

2、 Modify the front end of the basic information of the course

2.1、course.js Define methods

  //id Access to course information 
  getCourseInfoById(id) {
    
    return request({
    
      url: `${
      api_name}/get/${
      id}`,
      method: 'get'
    })
  },
  // Modify course information 
  updateCourseInfoById(courseInfo) {
    
    return request({
    
      url: `${
      api_name}/update`,
      method: 'put',
      data: courseInfo
    })
  },

2.2、 modify Info.vue page

<script>
....
created() {
    if (this.$parent.courseId) { //  The echo 
      this.fetchCourseInfoById(this.$parent.courseId)
    } else { //  newly added 
      //  Initialize classification list 
      this.initSubjectList()
    }
    //  Get a list of lecturers 
    this.initTeacherList()
  },

  methods: {
    ......
    //  Access to course information 
    fetchCourseInfoById(id) {
      courseApi.getCourseInfoById(id).then(response => {
        this.courseInfo = response.data
        //  Initialize classification list 
        subjectApi.getChildList(0).then(response => {
          this.subjectList = response.data
          //  Fill in the secondary menu ： Traverse the first level menu list ,
          this.subjectList.forEach(subject => {
            //  Find and courseInfo.subjectParentId Consistent parent category records 
            if (subject.id === this.courseInfo.subjectParentId) {
              //  Get the subcategory list under the current category , Fill the subcategory list into the secondary drop-down menu list 
              subjectApi.getChildList(subject.id).then(response => {
                this.subjectLevelTwoList = response.data
              })
            }
          })
        })
      })
    },
    //  Save and next 
    saveAndNext() {
      this.saveBtnDisabled = true
      if (!this.$parent.courseId) {
        this.saveData()
      } else {
        this.updateData()
      }
    },
    //  modify 
    updateData() {
      courseApi.updateCourseInfoById(this.courseInfo).then(response => {
        this.$message.success(response.message)
        this.$parent.courseId = response.data //  obtain courseId
        this.$parent.active = 1 //  next step 
      })
    },
    ......
  }
}
</script>

2.3、 establish Chapter-index.vue page

<template>
  <div class="app-container">
    <div style="text-align:center">
      <el-button type="primary" @click="prev()"> The previous step </el-button>
      <el-button type="primary" @click="next()"> next step </el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
     
    }
  },
  created() {
    
  },
  methods: {
    //  The previous step 
    prev() {
      this.$parent.active = 0
    },
    //  next step 
    next() {
      this.$parent.active = 2
    }
  }
}
</script>
<style scoped>
.chapterList{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.chapterList li{
  position: relative;
}
.chapterList p{
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #DDD;
}
.chapterList .acts {
    float: right;
    font-size: 14px;
}
.videoList{
  padding-left: 50px;
}
.videoList p{
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dashed #DDD;
}
</style>

ton type=“primary” @click=“prev()”> The previous step
<el-button type=“primary” @click=“next()”> next step

},
created() {

},
methods: {
// The previous step
prev() {
this.KaTeX parse error: Expected 'EOF', got '}' at position 23: …active = 0 }̲, // next step …parent.active = 2
}
}
}