课程发布-添加课程信息（前端）

1、在router/index.vue中添加路由

 {
    path: '/course',
    component: Layout,
    redirect: '/course/table',
    name: '课程管理',
    meta: { title: '课程管理', icon: 'example' },
    children: [
      {
        path: 'add',
        name: '添加课程',
        component: () => import('@/views/course/add'),
        meta: { title: '添加课程', icon: 'table' }
      },
      {
        path: 'add/:id',
        name: 'EduCourseInfoEdit',
        component: () => import('@/views/course/add'),
        meta: { title: '编辑课程基本信息', noCache: true },
        hidden: true
      },
      {
        path: 'chapter/:id',
        name: 'EduCourseChapterEdit',
        component: () => import('@/views/course/chapter'),
        meta: { title: '编辑课程大纲', noCache: true },
        hidden: true
      },
      {
        path: 'publish/:id',
        name: 'EduCoursePublishEdit',
        component: () => import('@/views/course/publish'),
        meta: { title: '发布课程', noCache: true },
        hidden: true
      },
      {
        path: 'list',
        name: '课程列表',
        component: () => import('@/views/course/list'),
        meta: { title: '课程列表', icon: 'tree' }
      }
    ]
  },

2、创建路由跳转页面

3、在src/api/course.js中定义接口方法

  // 添加课程信息
  addCourseInfo(courseInfo) {
    return request({
      url: `/eduservice/educourse/addCourseInfo`,
      method: 'post',
      data: courseInfo
    })
  }

4、复制页面内容（步骤条+表单）

<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 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"
          placeholder="请填写课程的总课时数"
        />
      </el-form-item>
      <!-- 课程简介 TODO -->
      <el-form-item label="课程简介">
        <el-input v-model="courseInfo.description" />
      </el-form-item>
      <!-- 课程封面 TODO -->
      <el-form-item label="课程价格">
        <el-input-number
          :min="0"
          v-model="courseInfo.price"
          controls-position="right"
          placeholder="免费课程请设置为0元"
        />元
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

5、在页面中引入api接口，调用方法

<script>
import course from "@/api/course";
export default {
  data() {
    return {
      courseInfo: {}, //封装表单数据
      saveBtnDisabled: false //保存按钮是否禁用
    };
  },
  created() {},
  methods: {
    next() {
      course.addCourseInfo(this.courseInfo).then(response => {
        //提示
        this.$message({
          type: "success",
          message: "添加成功!"
        });
        //跳转下一个页面
        //this.$router.push({path:""})
      });
    }
  }
};
</script>

6、测试

注意：测试前需要将数据库中edu_course表三个外键设置为可为空。