• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • Mooc項目開發筆記(十二):課程分類選擇表單實現、編輯課程封面實現、添加課程描述的富文本編輯器、添加課程基本信息最終測試

    標簽: Mooc 項目  后端  java

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

    要實現的效果:

    在這里插入圖片描述

    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、查看數據庫添加成功
    在這里插入圖片描述

    版權聲明:本文為han_zhuang原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/han_zhuang/article/details/106983718

    智能推薦

    Seata AT 模式 原理詳解

    目錄 前提 整體機制 寫隔離 讀隔離 工作機制 一階段 二階段-回滾 二階段-提交 附錄 回滾日志表 前提 基于支持本地 ACID 事務的關系型數據庫。 Java 應用,通過 JDBC 訪問數據庫。 整體機制 兩階段提交協議的演變: 一階段:業務數據和回滾日志記錄在同一個本地事務中提交,釋放本地鎖和連接資源。 二階段: 提交異步化,非常快速地完成。 回滾通過一階段的回滾日志進行反向補償。 寫隔離 ...

    Python爬蟲 | 滑動驗證碼**

    極驗驗證碼:需要手動拼合滑塊來完成的驗證,相對圖形驗證碼識別難度上升了幾個等級。下面用程序識別并通過極驗驗證碼的驗證,其中有分析識別思路、識別缺口位置、生成滑塊拖動、模擬實現滑塊拼合通過驗證等步驟。需要用到Chrome 瀏覽器,并配置 ChromeDriver ,要用到的 Python 庫是 Selenium。 1、 對極驗驗證碼了解   極驗驗證碼官網:http://www.geetest.co...

    MobaXterm root用戶連接虛擬機時出現Access denied

    1.linux打開ssh服務 2.新建連接 首先在romote host中填入要連接的主機ip specify username中填入連接的用戶名 port為連接端口默認為22 輸入連接用戶的密碼 linux默認不顯示密碼 發現密碼正確但是連接不上 問題解決 /etc/ssh/sshd_config 配置問題: #PermitRootLogin prohibit-password將該行改為Perm...

    Linux C 預處理命令

    預處理命令 一、宏定義 C語言標準允許在程序中用一個標識符來表示一個字符串,成為宏。標識符為宏名 ,在編譯預處理時,將程序中所有的宏名用相應的字符串來替換,這個過程稱為宏替換,宏分為兩種:無參數的宏和有參數的宏。 1.無參數的宏 無參數宏定義的一般形式為:#define 標識符字符串 “#”代表本行是編譯預處理命令。define是宏定義的關鍵詞,標識符是宏名。字符串是宏名所...

    有意思的算法(一)----冒泡排序

        冒泡排序的基本思想是:每次比較兩個相鄰的元素,如果它們的順序錯誤就把他們交換過來。     下面舉一個具體的例子來介紹一下冒泡排序。     有12,35,99,18,76五個數進行從大到小的排序,既然是從大到小排序,也就是說越小的越靠后,可不要把這句當成廢話,這可是最關...

    猜你喜歡

    cordova學習筆記_創建一個cordova項目

    環境和工具 webstorm Node.js JDK git 打開git bash,進入你要創建項目的目錄,鍵入以下命令 進入cordovaDemo這個文件夾: 添加Android平臺 cordova platforms add android platforms中已經有了一個Android平臺 下面打開webstorm,然后file - open 找到cordovaDemo打開 現在在webst...

    TensorFlow識別圖片數字

    一、 第一步是先用tensorflow官網(http://www.tensorfly.cn/tfdoc/get_started/introduction.html)的手寫體數字識別例子訓練好一個模型,訓練完準確率一般能達到99%,然后保存訓練好的模型。 二、 主文件 完整代碼地址...

    spring boot項目搭建helloworld(一)

    備注:本文僅限快速啟動spring boot項目(尤其初學者了解spring boot框架) 結果展示: 工具: 編譯器:myeclipse2014  JDK:jdk1.8(1.8以下也可以但不可低于1.5,但會在項目上報小感嘆號(不影響運行)) maven:maven-3.5.3(myeclipse自帶maven也可以,但官網要求3.2或以上) spring boo...

    基于jquery Stellar.js實現 網站視差滾動效果

    stellar.js是一個 jQuery插件,能很容易地給網站添加視差滾動效果。 雖然已經停止了維護,但它非常穩定,與最新版本的jQuery兼容。 http://markdalgleish.com/projects/stellar.js/ 官網 1.引用js 包 2.引用html 3.引用css 4.js函數調用 常用參數:...

    vue富文本使用詳解

    一、cnpm 安裝 vue-quill-editor 二、在main.js中引入 三、在模塊中引用 這樣引入后你會得到這樣一個編輯器 那么你如果不需要那么多的工具欄功能要怎么辦呢;應該是通過options來修改但是他的默認值是什么的,這個官方文檔 :https://quilljs.com/docs/themes/里面看到了類似的方法 。 初始值的設置應該是一樣的吧 所以我就照著toolbar部分去...

    精品国产乱码久久久久久蜜桃不卡