【VIP視頻網站項目】VIP視頻網站項目v1.0.3版本發佈啦（程式一鍵安裝+電影後臺自動抓取+代碼結構調整）

線上體驗地址:http://vip.52tech.tech/

GIthub源碼：https://github.com/xiugangzhang/vip.github.io

項目預覽

• 主頁面
  
• 登錄頁面
  
• 註冊頁面
  
• 會員中心
  
• 電影播放頁面
  
• 電影彈幕功能
  

視頻網站項目已經完功能如下：

v1.0.3（當前最新版本）

• 1. 增加自動抓取功能，網站數據定期實時更新
  • 電影和電視劇數據抓取
  • 電影數據信息前端展現
• 1. 電影頁面圖片的自動抓取、下載和展示

• 1. 代碼結構調整

     v1.0.2

• 1. 簡化程式安裝流程，新增可視化安裝界面
  • 用戶可直接輸入資料庫名、資料庫地址、資料庫用戶名、資料庫密碼信息一鍵完成程式的安裝

• 1. 頁面部分結構的調整

     v1.0.1

• 1. 用戶中心的管理
  • 對於已經註冊的用戶，實現用戶基本信息的修改
  • 用戶密碼的修改
  • 用戶評論記錄的查看
  • 用戶收藏電影的查看和播放
  • 用戶登錄日誌的查看
• 1. 電影搜索功能（特色功能）
  • 實現了根據視頻播放地址和視頻名稱全網視頻的搜索和播放功能
  • 實現了正在熱映，即將上映和TOP250的電影列表的展示
  • 電影收藏和取消功能
    
• 1. 彈幕功能（特色功能）

  • 類似於B站等其他視頻網站的彈幕功能，用戶在登錄之後可以實現線上發言

    v1.0.0

• 1. 用戶主頁的搭建：
  • 實現了主頁輪播圖的顯示和切換，用戶可以從資料庫中自由配置和切換輪播圖的顯示
  • 實現了主頁電影列表的顯示：從資料庫文件讀取電影和電視劇列表信息併在前臺顯示
• 1. 用戶登錄和註冊頁面的搭建：
  • 實現了用戶的登錄和註冊功能
  • 用戶註冊和登錄驗證碼提示功能
• 1. 電影播放頁面的搭建
  • 對於其他頁面的任意可以展現電影列表的頁面，用戶可以直接點擊列表，直接進入播放頁面
  • 播放頁面電影詳細信息的展現
  • 對於載入速度較慢的視頻，用戶可以自由切換播放介面進行加速

  • 用戶可以在相應的播放頁面查看其他用戶已經發表的評論，同時也可以在登錄之後自由發表評論

    其他

• 1. 頁面整體的風格模仿了Discuz等論壇網站的佈局
• 1. 網站首頁的輪播圖效果模仿了優酷、愛奇藝、騰訊視頻等主流視頻網站的輪播圖效果，並且對該部分的效果實現進行了代碼封裝
• 1. 電影底部的的友情鏈接，使用了大部分網站的分欄佈局，用戶可以添加自己的QQ群以及微信公眾號方便增加自己網站的人氣
• 1. 主要列表的分頁功能，對於一些內容顯示較多的不能再一頁顯示完整的頁面，使用了ajax無刷新分頁對數據進行多條展示，提高了用戶的體驗
• 1. 目前主流瀏覽器中也做了相應測試，建議大家使用谷歌或者火狐瀏覽器，效果可能會更好
• 1. 未使用其他第三方框架，首頁和播放頁均為純原生的HTML，CSS， js實現（至於這個xframe-min-1.0.js文件可以參見我的GitHub xframe.js這個開源項目）
• 1. 電影播放頁面：此處也是類似於當前主流網站的的播放頁面，左側為播放視窗，右側部分為電影的詳細信息
• 1. 底部導航：使用分欄的方式實現了底部的導航，前面的為友情鏈接，後面的一個為網站的微信，Q微博等聯繫方式
• 1. 用戶中心：這部分實現了修改密碼，評論，登錄，日誌管理，收藏電影的功能，用戶可以自由切換

程式目錄結構說明

vip.github.io:
├─controllers               // 控制層
├─data                      // 數據抓取層
├─logs                      // 後臺日誌
│  ├─errlog                 // 錯誤日誌
│  ├─othlog                 // 其他日誌
│  └─reqlog                 // 請求日誌
├─models                    // 模型層
├─static                    // 靜態頁
│  ├─css                    // 樣式表
│  ├─images                 // 靜態圖片資源
│  └─js                     // js腳本
├─utils                     // 工具相關
├─views                     // 視圖層
└─www                       // 靜態資源
    ├─css                   // 樣式表
    ├─html                  // html文件
    ├─images                // 靜態圖片資源
    ├─js                    // js腳本
    │  └─movielist          // 搜索頁電影列表
    │      ├─components     // top250/即將上映
    │      └─in_theaters    // 正在熱映
    └─uploads               // 文件上傳目錄
        ├─avatar            // 用戶圖像
        └─movie             // 電影圖標

程式安裝方法

• 1. 確保電腦已經安裝了NodeJS環境，運行版本儘量保持最新（V8以上吧），選擇本地的一個路徑，然後運行命令：

   git clone https://github.com/xiugangzhang/vip.github.io.git

• 1. 進入程式的主目錄（包含app.js的那個文件夾）運行命令：npm install，系統就會自動安裝該程式的依賴包；
• 1. 在以上的步驟都執行完成且正確的情況下，就可以在程式主目錄下麵（有app.js的那個目錄）,運行命令

   node app.js

之後就會自動在瀏覽器中打開本程式安裝的主界面；

• 1. 如果是windows環境下，本程式提供了可視化的安裝。用戶可在程式的安裝界面輸入資料庫名、資料庫主機地址、資料庫用戶名、資料庫密碼，之後點擊按鈕立即安裝即可，在輸入的參數全部正確的情況下，就會後臺自動安裝程式，安裝成功之後會自動跳轉到網站首頁；
     
• 1. 如果是Linux環境下，請提前準備好資料庫名（database=video）、資料庫主機地址（host=localhost）、資料庫用戶名（user=root）、資料庫密碼（password=123456 ），按照如下格式保存為config.properties文件，請確保這裡的配置信息和你的資料庫配置信息完全一致；

    database=video               
    host=localhost          
    user=root               
    password=123456         

• 1. 線上演示站點：http://vip.52tech.tech
• 1. 對於安裝和使用的過程中如果有什麼問題和建議，也歡迎交流和提出建議，可以在issue去發起話題討論，或直接聯繫郵箱：[email protected]