4 搭建學(xué)習(xí)中心前端
學(xué)成網(wǎng)學(xué)習(xí)中心提供學(xué)生在線學(xué)習(xí)的各各模塊，上一章節(jié)測試的點播學(xué)習(xí)功能也屬于學(xué)習(xí)中心的一部分，本章節(jié)將 實現(xiàn)學(xué)習(xí)中心點播學(xué)習(xí)的前端部分。之所以先實現(xiàn)前端部分，主要是因為要將video.js+vue.js集成，一部分精力還 是要放在技術(shù)研究。 4.1 界面原型
先看一下界面原型，如下圖，最終的目標(biāo)是在此頁面使用video.js播放視頻。

4.2 創(chuàng)建學(xué)習(xí)中心工程
學(xué)習(xí)中心的用戶是學(xué)生，為了便于系統(tǒng)維護(hù)和擴展，單獨創(chuàng)建學(xué)習(xí)中心工程：
1、從資料目錄拷貝xc-ui-pc-leanring.zip 并解壓到xc-ui-pc-leanring目錄。
2、使用webstorm創(chuàng)建打開xc-ui-pc-leanring目錄 3、進(jìn)入xc-ui-pc-leanring目錄，執(zhí)行cnpm install，將根據(jù)package.json的依賴配置遠(yuǎn)程下載依賴的js包。
創(chuàng)建完成，xc-ui-pc-leanring工程如下：

成都創(chuàng)新互聯(lián)專注于滿城企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站制作。滿城網(wǎng)站建設(shè)公司,為滿城等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

4.2.1 配置域名
學(xué)習(xí)中心的二級域名為ucenter.xuecheng.com，我們在nginx中配置ucenter虛擬主機。

[mw_shl_code=applescript,true]#學(xué)成網(wǎng)用戶中心 server { listen    
   80;  
    server_name ucenter.xuecheng.com;       
    #個人中心   
   location / {    
    proxy_pass http://ucenter_server_pool;       
     }    
   } #前端ucenter upstream ucenter_server_pool{
   #server 127.0.0.1:7081 weight=10;   
server 127.0.0.1:13000 weight=10; }[/mw_shl_code]

4.3 調(diào)試視頻播放頁面

使用vue-video-player組件將video.js集成到vue.js中，本項目使用vue-video-player實現(xiàn)video.js播放。 組件地址：https://github.com/surmon-china/vue-video-player
上面的 xc-ui-pc-learning工程已經(jīng)添加vue-video-player組件，我們在vue頁面直接使用即可。
前邊我們已經(jīng)測試通過 video.js，下面我們直接在vue頁面中使用vue-video-player完成視頻播放。
導(dǎo)入learning_video.vue頁面到course 模塊下。
配置路由：

[mw_shl_code=applescript,true]import learning_video from '@/module/course/page/learning_video.vue';  
{   
  path: '/learning/:courseId/:chapter',    
component: learning_video,  
   name: '錄播視頻學(xué)習(xí)',    
hidden: false,   
  iconCls: 'el‐icon‐document' 
  }[/mw_shl_code]

預(yù)覽效果：
請求：http://ucenter.xuecheng.com/#/learning/1/2
第一個參數(shù)：courseId，課程id，這里是測試頁面效果隨便輸入一個ID即可，這里輸入1
第二個參數(shù)：chapter，課程計劃id，這里是測試頁面效果隨便輸入一個ID即可，這里輸入2

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

名稱欄目：Java的新項目學(xué)成在線筆記-day13（七）-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://vcdvsql.cn/article34/jiepe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站改版、網(wǎng)站維護(hù)、商城網(wǎng)站、網(wǎng)站營銷、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)