课程发布-添加课程信息（完善）

1、课程类别二级联动课程分类的问题

（1）问题是什么？

选择完一级和二级信息后，再去更改一级信息，之前的二级信息未被清空。

（2）如何解决？

修改获取course/add.vu页面js方法中二级信息获取方法getTwoSubjectByOne(value)。

// 当点击一个一级分类时，触发事件 getTwoSubjectByOne(value) { for (let i = 0; i < this.oneSubjectList.length; i++) { // 得到每一个一级分类 const oneSubject = this.oneSubjectList[i] if (oneSubject.id === value) { this.twoSubjectList = oneSubject.children this.courseInfo.subjectId = '' // 解决二级联动数据回显问题 } } },

（3）出现新的问题，二级信息无法被选中怎么办？

（4）如何解决？

在页面js中的data中将表单数据封装。

java 复制代码

data() {
    return {
      courseId: '',
      courseInfo: {
        subjectId: '',
      }, // 封装表单数据
      saveBtnDisabled: false, // 保存按钮是否禁用
      teacherList: [], // 讲师信息集合
      oneSubjectList: [], // 一级分类集合
      twoSubjectList: [], // 二级分类集合
      BASE_API: process.env.BASE_API // 接口API地址
    }
  },

2、课程封面上传到OSS存储服务器

（1）首先确认好之前编写的上传文件到阿里云的OSS接口已经实现

（2）添加页面元素

在course/add.vue页面添加课程封面的页面元素。

java 复制代码

<!-- 课程封面-->
      <el-form-item label="课程封面">
        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="BASE_API+'/eduoss/fileoss/fileUpload'"
          class="avatar-uploader"
        >
          <img :src="courseInfo.cover">
        </el-upload>
      </el-form-item>

（3）js代码实现

1)在根目录下的src/static目录下添加静态资源图片。

2）在页面js中添加上传封面的方法。

java 复制代码

 data() {
    return {
      courseInfo: {
        subjectId: "",
        cover: "/static/01.jpg" //默认课程封面
      }, //封装表单数据
      saveBtnDisabled: false, //保存按钮是否禁用
      teacherList: [], //讲师信息集合
      oneSubjectList: [], //一级分类集合
      twoSubjectList: [], //二级分类集合
      BASE_API: process.env.BASE_API // 接口API地址
    };
  },
  created() {
    this.getAllTeacherList();
    this.getAllOneSubject();
  },
  methods: {
    //上传封面成功后
    handleAvatarSuccess(res, file) {
      this.courseInfo.cover = res.data.url;
    },
    //上传封面之前的方法
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

（4）测试

3、添加富文本编辑器

（1）复制需要的组件到项目中

1）复制 Tinymce组件到src/components目录下。

2）复制 tinymce4.7.5组件到根目录/static目录下。

（2）在/build/webpack.dev.conf.js 的new HtmlWebpackPlugin方法中添加如下配置

java 复制代码

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'vue-admin-template',
      templateParameters: {
        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
      }
    })

（3）在根目录下的index.html 中引入js脚本

java 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-admin-template</title>

  </head>
  <body>
    <script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
    <script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

（4）引入组件、并声明

java 复制代码

import Tinymce from '@/components/Tinymce'
export default {
  components: { Tinymce },

（5）在course/add.vue页面中添加页面元素

java 复制代码

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

（6）在course/add.vue页面最低端添加如下的页面样式

java 复制代码

<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>