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

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