【谷粒学院项目开发34】添加课程基本信息(前端)_基本的页面跳转

1.添加课程管理路由

在这里插入图片描述
在这里插入图片描述

2.创建与课程相关的vue页面,修改路由

在这里插入图片描述
在这里插入图片描述

3.添加隐藏路由,做页面跳转

在这里插入图片描述

4.粗略编写info.vue

在这里插入图片描述
在这里插入图片描述
效果:
在这里插入图片描述

5.粗略编写chapter.vue

在这里插入图片描述
在这里插入图片描述
效果:
在这里插入图片描述

6.粗略编写publish.vue

在这里插入图片描述
在这里插入图片描述
效果:
在这里插入图片描述

7.详细编写info.vue

<template>
    <div class="app-container">
        <h2 style="text-align: center;">发布新课程</h2>
        <el-steps :active="1" process-status="wait" align-center style="marginbottom: 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" />
            </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=" "/>
            </el-form-item>
            <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="next">保存并下一步</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
<script>
export default {
    
    
    data(){
    
    
        return{
    
    
            saveBtnDisabled:false,
            courseInfo:{
    
    
                title: '',
                subjectId: '',
                teacherId: '',
                lessonNum: 0,
                description: '',
                cover: '',
                price: 0
            }
        }
    },
    created(){
    
    

    },
    methods:{
    
    
        next(){
    
    
            //跳转到第二步
            this.$router.push({
    
    path:'/course/chapter/1'})
        }
    }
}
</script>

8.定义api,连接后端方法

在这里插入图片描述

9.调用后端添加课程信息方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

10.查看效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
有一个问题
在这里插入图片描述
此处应该是课程id
所以我们修改一下后端接口代码
让原来的void类型变成string,返回添加的课程id
在这里插入图片描述

在这里插入图片描述
再修改一下前端调用的代码
在这里插入图片描述
测试:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
添加成功!
(_)

猜你喜欢

转载自blog.csdn.net/taroriceball/article/details/111190476