【VIP視頻網站項目v1.0.3】基於Nodejs開發的VIP視頻網站項目及源碼分享

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

GIthub源碼：https://github.com/xiugangzha...

項目預覽

• 主頁面

• 登錄頁面

• 註冊頁面

• 會員中心

• 電影播放頁面

• 電影彈幕功能

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

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]