Day07-添加课程信息前端部分（2）--实现讲师下拉列表--p111

最新推荐文章于 2024-06-13 11:35:05 发布

小码哥呀

最新推荐文章于 2024-06-13 11:35:05 发布

阅读量299

点赞数

分类专栏：在线教育项目

本文链接：https://blog.csdn.net/qq_46112274/article/details/114583644

版权

在线教育项目专栏收录该内容

68 篇文章 6 订阅

订阅专栏

上一节：添加课程信息前端部分（1）

添加课程信息之讲师下拉列表

1、需求
2、定义组件模板，实现上述需求
3、定义api
4、完善方法：

1、需求

在添加课程页面中实现讲师下拉列表
在这里插入图片描述

2、定义组件模板，实现上述需求

在这里插入图片描述
代码：

 <!-- 课程讲师 TODO -->
        <!-- 所属分类：级联下拉列表 -->
        <!-- 一级分类 -->
        <!-- key:唯一标识
             label:显示的名称
             value:实际传递的值 -->
        <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>

3、定义api

在这里插入图片描述

    //2、查询所有讲师信息
    getListTeacher(){
        return request({
            url:'eduservice/teacher/findAll',
            method:'get'
        })
    }

4、完善方法：

在这里插入图片描述

export default {
    data(){
        return {
            saveBtnDisabled:false,
            courseInfo:{
                title: '',
                subjectId: '',
                teacherId: '',
                lessonNum: 0,
                description: '',
                cover: '',
                price: 0
            },
            teacherList:[]//封装所有讲师
        }
    },
    created(){
        //在页面渲染之前执行
        this.getListTeacher()
    },
    methods:{
        //查询所有讲师
        getListTeacher(){
            course.getListTeacher()
                .then(resopnse=>{
                    this.teacherList = resopnse.data.items
                })
        },
        saveOrUpdate(){
             course.addCourseInfo(this.courseInfo)
                .then(response=>{
                    //提示
                    this.$message({
                        type:'success',
                        message:'添加课程信息成功'
                    });
                    //跳转到下一步
                    this.$router.push({path:'/course/chapter/'+response.data.courseId})
                })
        }  
    }
}

下一节：添加课程信息（3）-课程分类多级联动