Java的新項目學成在線筆記-day13（七）

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

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

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

[mw_shl_code=applescript,true]#學成網用戶中心 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 調試視頻播放頁面

使用vue-video-player組件將video.js集成到vue.js中，本項目使用vue-video-player實現video.js播放。 組件地址：https://github.com/surmon-china/vue-video-player
上面的 xc-ui-pc-learning工程已經添加vue-video-player組件，我們在vue頁面直接使用即可。
前邊我們已經測試通過 video.js，下面我們直接在vue頁面中使用vue-video-player完成視頻播放。
導入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: '錄播視頻學習',    
hidden: false,   
  iconCls: 'el‐icon‐document' 
  }[/mw_shl_code]

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