Mooc項目開發筆記（十二）：課程分類選擇表單實現、編輯課程封面實現、添加課程描述的富文本編輯器、添加課程基本信息最終測試

一、課程分類選擇表單實現

要實現的效果：

1、添加一級分類組件

<!-- 所屬分類：級聯下拉列表 -->
<!-- 一級分類 -->
   <el-form-item label="課程類別">
    <el-select
        v-model="courseInfo.subjectParentId"
        placeholder="請選擇">
        <el-option
        v-for="subject in subjectParentList"
        :key="subject.id"
        :label="subject.title"
        :value="subject.id"/>
    </el-select>
    </el-form-item>

2、定義數據

定義在data中

subjectParentList: [],//一級分類列表
subSubjectList: []//二級分類列表

3、一級分類數據獲取

表單初始化時獲取一級分類列表

引入subject api

import subject from '@/api/edu/subject'

定義方法

  created() {
      ...//其他方法
      this.getAllSubjectrList()
  },

  methods: {

    //獲取所有課程分類信息（樹狀）
    getAllSubjectrList(){
        subjectApi.getAllSubject()
            .then(response =>{
                this.subjectParentList = response.data.list
            })
    },
    
    ...//其他方法
  }

4、一級分類效果

現在可以看到頁面中可以對一級分類進行選擇。接下完成二級分類的聯動顯示

5、添加二級分類組件

在<el-form-item label="課程類別">標籤內添加如下方法

<!-- 二級分類 -->
<el-select v-model="courseInfo.subjectId" placeholder="請選擇">
  <el-option
    v-for="subject in subSubjectList"
    :key="subject.value"
    :label="subject.title"
    :value="subject.id"/>
</el-select>

6、註冊一級分類組件的change事件

在一級分類的<el-select>組件中註冊change事件

    <el-form-item label="課程類別">
    <el-select
        v-model="courseInfo.subjectParentId"
        placeholder="一級分類"
        @change="subjectLevelOneChanged">

7、定義change事件方法

    //一級列表改變事件
    subjectLevelOneChanged(value){
        for (let i = 0; i < this.subjectParentList.length; i++) {
            if (this.subjectParentList[i].id === value) {
                this.subSubjectList = this.subjectParentList[i].children
                this.courseInfo.subjectId = ''
            }
        }
    },

8、二級分類效果

二、編輯課程封面

1、添加組件模板

在info.vue中添加上傳組件模板

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

2、定義data數據

BASE_API: process.env.BASE_API // 接口API地址

3、定義方法

    //上傳成功調用的方法
    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、定義默認封面

向static文件夾中放入一個名爲default.jpg的默認圖片

並修改courseInfo的如下信息

courseInfo: {
  ......,
  cover: '/static/default.jpg',
  ......
}

5、效果

三、添加課程描述的富文本編輯器

Tinymce是一個傳統javascript插件，默認不能用於Vue.js因此需要做一些特殊的整合步驟

1、複製腳本庫和組件

• 將vue-element-admin-master的static路徑下的腳本庫複製到項目的static目錄下
• 將vue-element-admin-master的src/components路徑下的Tinymce組件複製到項目的components目錄下

2、配置html變量

在 build/webpack.dev.conf.js 中添加配置

使在html頁面中可是使用這裏定義的BASE_URL變量

new HtmlWebpackPlugin({
    ......,
    templateParameters: {
        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
    }
})

3、引入js腳本

在mooc-admin/index.html中引入下面的內容

<script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
<script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>

4、引入組件

課程信息組件中引入 Tinymce

import Tinymce from '@/components/Tinymce' //引入組件

export default {
  components: { Tinymce }, //聲明組件
  ......
}

5、添加組件模板

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

6、添加組件樣式

在info.vue文件的最後添加如下代碼，調整上傳圖片按鈕的高度

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

7、效果

四、添加課程基本信息最終測試

1、在導航中點擊添加課程進入頁面

2、填寫相關信息

3、點擊保存並下一步

4、查看數據庫添加成功