课程发布-添加课程信息(完善)

35 阅读1分钟

1、需要添加内容

在这里插入图片描述

2、添加课程实现所属讲师下拉选择框

(1)EduTeacherController中添加查询所有讲师的接口。

//查询所有讲师
@ApiOperation(value = "查询所有讲师")
@GetMapping
public R getAllTeacher(){
    List<EduTeacher> list = eduTeacherService.list(null);
    return R.ok().data("items",list);
}

(2)在teacher.js新增接口方法。

//查询所有讲师
  getAllTeacher(){
    return request({
      url: `/eduservice/eduteacher`,
      method: 'get'
    })
  }

(3)在添加课程页面添加页面元素。

<!-- 课程讲师 -->
      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"
          />
        </el-select>
      </el-form-item>

(4)js的实现。

import course from "@/api/course";
import teacher from "@/api/teacher";
export default {
  data() {
    return {
      courseInfo: {}, //封装表单数据
      saveBtnDisabled: false, //保存按钮是否禁用
      teacherList:[]//讲师信息集合
    };
  },
  created() {
      this.getAllTeacherList()
  },
  methods: {

    //查询所有讲师
    getAllTeacherList(){
        teacher.getAllTeacher()
        .then(response=>{
            this.teacherList = response.data.items
        })
},
…

3、添加课程实现所属分类下拉选择框(二级联动)

(1)确认接口,均已实现,就是查询课程分类的接口。

(2)添加页面元素。

<!-- 所属分类  -->
      <el-form-item label="课程类别">
          <!--一级分类-->
        <el-select @change="getTwoSubjectByOne"
         v-model="courseInfo.subjectParentId" placeholder="一级分类">
          <el-option
            v-for="subject in oneSubjectList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>

          <!--二级分类-->
        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
          <el-option
            v-for="subject in twoSubjectList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>
      </el-form-item>

(3)js方法实现

import subject from "@/api/subject";
export default {
  data() {
    return {
      courseInfo: {}, //封装表单数据
      saveBtnDisabled: false, //保存按钮是否禁用
      teacherList:[],//讲师信息集合
      oneSubjectList:[],//一级分类集合
      twoSubjectList:[]//二级分类集合
    };
  },
  created() {
      this.getAllTeacherList()
      this.getAllOneSubject()
  },
  methods: {
    //查询所有讲师
    getAllTeacherList(){
        teacher.getAllTeacher()
        .then(response=>{
            this.teacherList = response.data.items
        })
    },
    //查询所有一级分类信息
    getAllOneSubject(){
        subject.getAllSubject()
        .then(response=>{
            this.oneSubjectList = response.data.allSubject
        })
    },
    //当点击一个一级分类时,触发事件
    getTwoSubjectByOne(value){
        for(let i=0;i<this.oneSubjectList.length;i++ ){
            //得到每一个一级分类
            let oneSubject = this.oneSubjectList[i]
            if(oneSubject.id === value){
                this.twoSubjectList = oneSubject.children
            }
        }
    },