古粒学院课程发布前端学习

课程信息

章节小节信息

信息确认

课程列表

• vue 框架（路由和api没写）

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

步骤导航条

• 导航

<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>

 data() {
    return {
      saveBtnDisabled:false,
    };
  },
  methods: {
    next() {
        //跳转到第二步
      this.$router.push({path:'/course/chapter/1'})
    },
  },
  created(){

  }
};

• 同理，章节和发布确认页面只需要修改active的值，还有增加按钮及绑定的方法即可，实现三个表单来回跳转

编辑课程信息

• 放在与保存到下一步同一个el-from里面

<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" placeholder="" />
      </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>

数据列表

courseInfo: 
        {
          title: "",
          subjectId: "",
          subjectparentid: '',
          teacherId: "",
          lessonNum: 0,
          description: "",
          cover: "",
          price: 0,
        },

• 修改保存下一步绑定的方法，并获取后端保存成功后的课程id,

 saveOrUpdate() {
      course.addCourseInfo(this.courseInfo).then(resp => {
        this.$message({
          message: "添加课程信息成功",
          type: "success",
        })
        //跳转到第二步，并带着这个课程生成的id
        this.$router.push({ path: "/course/chapter/"+resp.data.courseId });
      });
    },

• 讲师下拉列表，在temp里面添加讲师下拉表单，绑定data,定义方法查询讲师封装给下拉列表接收。在created方法里面初始化查询讲师的方法，一开始就会把讲师信息查询回来供选择。
• 课程分类多级联动，先查询所有一级分类，绑定事件，当选中一级分类，查询出一级分类对应的二级分类供选择，选择完清空一级分类的id,修改的时候就会是重新选的状态

封面（文件上传oss

上传成功回调文件url，

• 能不能获取文件名，文件大小等信息呢
• 
  

课程简介，富文本编辑器

• 其他配置好后，引入组件

//引入Tinymce富文本编辑器组件
import Tinymce from '@/components/Tinymce';

export default {
    ....
  components: { Tinymce },
}

<!-- 课程简介-->
<el-form-item label="课程简介">
	<tinymce :height="300" v-model="courseInfo.description"/>
</el-form-item>

课程信息回显（问题，二级分类返回的是id）

• 章节返回的时候把id带到路由上面
  
• 在create里面获取courseid
• 
• 根据课程id,获取课程信息，并回显
  
  修改和显bug

    //获取课程信息
    getCourseInfo() {
      course.getCourseInfoById(this.courseId).then((resp) => {
        this.courseInfo = resp.data.courseInfoForm;
        //查询所有分类，包含一级和二级所有
        subject.getSubjectList().then((resp) => {
          //获取所有一级分类
          this.subjectOneLists = resp.data.list;

          //把所有一级分类数组进行遍历
          for (var i = 0; i < this.subjectOneLists.length; i++) {
            //获取每个一级分类
            var oneSubject = this.subjectOneLists[i];
            //比较当前courseInfo里面的一级分类id和所有的一级分类id是否一样
            if (this.courseInfo.subjectParentId == oneSubject.id) {
              //获取一级分类中所有的二级分类
              this.subjectTwoLists = oneSubject.children;
            }
          }
        });
        //初始化所有讲师
        this.getListTeacher();
      });
    }

总结：从章节回到信息，1、章节返回路由携带courseid,2、课程信息判断有无课程id选择走新增还是修改，
如果新增，获取接收列表及课程分类列表，3、如果修改，获取课程信息，包括要重新获取讲师列表和课程分类列表
**

监听事件，监听路由变化，清空表单数据

修改课程信息，修改saveOrUpdate()方法，根据有无id判断执行新增还是修改

课程章节、小节列表展示

• 获取路由的id,赋值给courseid,根据courseid查询课程大纲列表
• this.$route.params就是路由参数
  
  

课程章节添加和删除功能

• 

课程小节，修改，删除，添加

课程发布信息确认，课程列表

课程列表展示，删除

后面从头搭建课程添加到课程发布到删除视频这些模块