任务五：课程管理

01-课程管理-模块介绍

02-课程管理-展示上架状态

上架状态 el-switch

03-课程管理-处理课程上下架

04-课程管理-添加课程-使用步骤条

使用步骤条，将一个大表单拆成几部分

05-课程管理-添加课程-搭建表单结构

06-课程管理-添加课程-基本信息数据绑定

07-添加课程-上传课程封面-分析实现逻辑

1. 通过上传接口上传文件，得到上传地址
2. 将地址填入表单中

   08-添加课程-上传课程封面-上传组件使用

• el-upload
  • http-request
    • 使用 axios 手动上传，可以支持自定义 header
  • beforeUpload 可以用
  • 不用 onSuccess

    09-添加课程-上传课程封面-封装上传组件

    

1. 组件需要根据绑定的数据进行图片预览
2. 组件需要把上传成功的图片地址同步到绑定的数据中
3. v-model 的本质还是父子组件通信
   1. 它会给子组件传递一个名字叫 value 的数据（Props）
   2. 默认监听 input 事件，修改绑定的数据（自定义事件）

      10-添加课程-上传进度提示-使用进度条组件

      在 Vue Devtools 中能看到 Element 组件的内部属性
      

      11-添加课程-上传进度提示-完成

      

      12-添加课程-发布成功

      前端项目地址-展示课程：http://edufront.lagou.com/#/

      13-添加课程-富文本编辑器介绍

• ckeditor
• quilljs
• medium-editor 最近几年没维护
• wangEditor
  • 项目用这个
• ueditor 百度，最近几年没维护

• tinymce

  14-添加课程-封装使用富文本编辑器使用

  15-添加课程-富文本编辑器-图片上传

  上传本地图片
  上传的图片是作为 插入到 HTML 中的
  参考文档

  16-编辑课程

  17-课程内容-功能介绍

  18-课程内容-准备

  19-课程内容-展示章节列表

  使用 el-tree 来实现可拖动的列表

  20-课程内容-阶段列表-自定义树组件节点内容

  21-课程内容-处理节点拖动的逻辑

• section 的拖拽

• lession 的拖拽

22-课程内容-列表拖动排序数据更新

23-上传课时视频-功能介绍

24-上传课时视频-准备

25-上传课时视频-阿里云视频点播服务介绍

26-上传课时视频-阿里云视频上传-体验官方

27-上传课时视频-初始化阿里云上传

阿里云视频点播-官方文档
这里使用的是上传地址+凭证

28-上传课时视频-封装上传相关接口

29-上传课时视频-上传文件成功

30-上传课时视频-处理完成