添加课程信息前端1

最新推荐文章于 2022-09-19 12:47:46 发布

小张不会打代码

最新推荐文章于 2022-09-19 12:47:46 发布

阅读量385

点赞数

分类专栏：课程模块（教育项目）

本文链接：https://blog.csdn.net/qq_44841517/article/details/117128326

版权

课程模块（教育项目）专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文档介绍了如何实现前端课程管理功能，包括添加课程管理路由、创建info、chapter和publish页面，以及设置页面跳转和流程测试。通过Swagger确保添加课程的流程畅通。

摘要由CSDN通过智能技术生成

1.添加课程管理路由

在这里插入图片描述

2.我们先走通这个添加课程的流程

先创建第一二三个页面：
info.vue（第一个页面）
chapter.vue(第二个页面)
publish.vue(第三个页面)
还有一个list.vue（课程列表页面）

点击添加页面，跳转到info.vue页面
在这里插入图片描述
改一下index中的路径：

第二三步骤要依赖于第一步做到：

先添加路由：
在这里插入图片描述

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


 {
        path: 'info/:id',
        name: 'EduCourseInfoEdit',
        component: () => import('@/views/edu/course/info'),
        meta: { title: '编辑课程基本信息', noCache: true },
        hidden: true
      },
      {
        path: 'chapter/:id',
        name: 'EduCourseChapterEdit',
        component: () => import('@/views/edu/course/chapter'),
        meta: { title: '编辑课程大纲', noCache: true },
        hidden: true
      },
      {
        path: 'publish/:id',
        name: 'EduCoursePublishEdit',
        component: () => import('@/views/edu/course/publish'),
        meta: { title: '发布课程', noCache: true },
        hidden: true
      }

我们来做一下步骤条：
在这里插入图片描述
整合info.vue页面

<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>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
    data(){
        return{
        saveBtnDisabled:false
        }
    },created(){

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

页面效果：
在这里插入图片描述
点击按钮之后，我们要到第二个页面
chapter.vue页面：

<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="2" 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>
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
    data(){
        return{
        saveBtnDisabled:false
        }
    },created(){

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

第三个页面publish.vue页面：
在这里插入图片描述

<template>

  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="3" 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>
        <el-button @click="previous">返回修改</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="publish">发布课程</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      saveBtnDisabled: false // 保存按钮是否禁用
    }
  },

  created() {
    console.log('publish created')
  },

  methods: {
    previous() {
      console.log('previous')
      this.$router.push({ path: '/course/chapter/1' })
    },

    publish() {
      console.log('publish')
      this.$router.push({ path: '/course/list' })
    }
  }
}
</script>