摘要：在線體驗地址源碼項目預覽主頁面登錄頁面注冊頁面會員中心電影播放頁面電影彈幕功能視頻網站項目已經完功能如下當前最新版本增加自動抓取功能，網站數據定期實時更新電影和電視劇數據抓取電影數據信息前端展現電影頁面圖片的自動抓取下載和展示代碼結構調整簡

主頁面

登錄頁面

注冊頁面

會員中心

電影播放頁面

電影彈幕功能

增加自動抓取功能，網站數據定期實時更新

電影和電視劇數據抓取

電影數據信息前端展現

電影頁面圖片的自動抓取、下載和展示

代碼結構調整

簡化程序安裝流程，新增可視化安裝界面

用戶可直接輸入數據庫名、數據庫地址、數據庫用戶名、數據庫密碼信息一鍵完成程序的安裝

頁面部分結構的調整

用戶中心的管理

對于已經注冊的用戶，實現用戶基本信息的修改

用戶密碼的修改

用戶評論記錄的查看

用戶收藏電影的查看和播放

用戶登錄日志的查看

電影搜索功能（特色功能）

實現了根據視頻播放地址和視頻名稱全網視頻的搜索和播放功能

實現了正在熱映，即將上映和TOP250的電影列表的展示

電影收藏和取消功能

彈幕功能（特色功能）

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

用戶主頁的搭建：

實現了主頁輪播圖的顯示和切換，用戶可以從數據庫中自由配置和切換輪播圖的顯示

實現了主頁電影列表的顯示：從數據庫文件讀取電影和電視劇列表信息并在前臺顯示

用戶登錄和注冊頁面的搭建：

實現了用戶的登錄和注冊功能

用戶注冊和登錄驗證碼提示功能

電影播放頁面的搭建

對于其他頁面的任意可以展現電影列表的頁面，用戶可以直接點擊列表，直接進入播放頁面

播放頁面電影詳細信息的展現

對于加載速度較慢的視頻，用戶可以自由切換播放接口進行加速

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

頁面整體的風格模仿了Discuz等論壇網站的布局

網站首頁的輪播圖效果模仿了優酷、愛奇藝、騰訊視頻等主流視頻網站的輪播圖效果，并且對該部分的效果實現進行了代碼封裝

電影底部的的友情鏈接，使用了大部分網站的分欄布局，用戶可以添加自己的QQ群以及微信公眾號方便增加自己網站的人氣

主要列表的分頁功能，對于一些內容顯示較多的不能再一頁顯示完整的頁面，使用了ajax無刷新分頁對數據進行多條展示，提高了用戶的體驗

目前主流瀏覽器中也做了相應測試，建議大家使用谷歌或者火狐瀏覽器，效果可能會更好

未使用其他第三方框架，首頁和播放頁均為純原生的HTML，CSS， js實現（至于這個xframe-min-1.0.js文件可以參見我的GitHub xframe.js這個開源項目）

電影播放頁面：此處也是類似于當前主流網站的的播放頁面，左側為播放窗口，右側部分為電影的詳細信息

底部導航：使用分欄的方式實現了底部的導航，前面的為友情鏈接，后面的一個為網站的微信，Q微博等聯系方式

用戶中心：這部分實現了修改密碼，評論，登錄，日志管理，收藏電影的功能，用戶可以自由切換

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             // 電影圖標

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

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

進入程序的主目錄（包含app.js的那個文件夾）運行命令：npm install，系統就會自動安裝該程序的依賴包；

在以上的步驟都執行完成且正確的情況下，就可以在程序主目錄下面（有app.js的那個目錄）,運行命令

   node app.js

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

如果是windows環境下，本程序提供了可視化的安裝。用戶可在程序的安裝界面輸入數據庫名、數據庫主機地址、數據庫用戶名、數據庫密碼，之后點擊按鈕立即安裝即可，在輸入的參數全部正確的情況下，就會后臺自動安裝程序，安裝成功之后會自動跳轉到網站首頁；

如果是Linux環境下，請提前準備好數據庫名（database=video）、數據庫主機地址（host=localhost）、數據庫用戶名（user=root）、數據庫密碼（password=123456 ），按照如下格式保存為config.properties文件，請確保這里的配置信息和你的數據庫配置信息完全一致；

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

在線演示站點：http://vip.52tech.tech

對于安裝和使用的過程中如果有什么問題和建議，也歡迎交流和提出建議，可以在issue去發起話題討論，或直接聯系郵箱：tech52admin@126.com