專案名稱：視訊網站專案

開發語言：HTML，CSS（前端），JavaScript，NODEJS（expres）（後臺）

資料庫：MySQL

開發環境：Win7，Webstorm

上線部署環境：Linux伺服器

主要功能我們先來看一下最終的效果：使用者主頁的搭建：

• 實現了主頁輪播圖的顯示和切換，使用者可以從資料庫中自由配置和切換輪播圖的顯示
• 實現了主頁電影列表的顯示：從資料庫檔案讀取電影和電視劇列表資訊並在前臺顯示

<ignore_js_op> <ignore_js_op> 

• 使用者登入和註冊頁面的搭建：
• 實現了使用者的登入和註冊功能
• 使用者註冊和登入驗證碼提示功能（這部分建議使用谷歌或者火狐瀏覽器測試，因為使用的是svg格式的圖片，對於低版本的瀏覽器或者IE瀏覽器，可能會出現驗證碼不能正常顯示的問題）

<ignore_js_op> <ignore_js_op> 電影播放頁面的搭建

• 對於其他頁面的任意可以展現電影列表的頁面，使用者可以直接點選列表，直接進入播放頁面
• 播放頁面電影詳細資訊的展現
• 對於載入速度較慢的視訊，使用者可以自由切換播放介面進行加速
• 彈幕功能（特色功能）：類似於B站等其他視訊網站的彈幕功能，使用者在登入之後可以實現線上發言
• 使用者可以在相應的播放頁面檢視其他使用者已經發表的評論，同時也可以在登入之後自由發表評論
• 電影收藏和取消功能

<ignore_js_op> 電影搜尋功能（特色功能）

• 實現了根據視訊播放地址和視訊名稱全網視訊的搜尋和播放功能
• 實現了正在熱映，即將上映和TOP250的電影列表的展示
• 這部分由於目前網站也沒有提供一些搜尋的介面，這裡使用的是正則方式進行解析的思路實現了搜尋功能

<ignore_js_op> 使用者中心的管理

• 對於已經註冊的使用者，實現使用者基本資訊的修改
• 使用者密碼的修改
• 使用者評論記錄的檢視
• 使用者收藏電影的檢視和播放
• 使用者登入日誌的檢視

<ignore_js_op> 程式安裝方法步驟：

• 確保電腦已經安裝了NodeJS環境，執行版本儘量保持最新（V8以上吧），然後下載此安裝包後解壓到你的系統任意碟符下面的目錄；
• 在當前解壓資料夾的主目錄（包含package.json的那個資料夾）執行命令：npm install， 系統就會自動安裝該程式的依賴包；
• 登入你的網站資料庫管理介面（PHPAdmin）,如果是在本地測試的話，就使用Navicat等MYSQL資料庫連線工具連線資料庫，連線完成之後建立資料庫名為video，設定資料庫登入名root， 登入密碼為123456。如果需要配置其他使用者名稱或者密碼，請進入到modes/db.js檔案下面，修改程式碼11行/12行的位置，user和password改為你自己的使用者名稱個密碼就行；
• 資料庫環境配置完成之後，開啟解壓資料夾裡面的video.sql資料庫指令碼檔案，進入Navicat等資料庫管理工具，執行執行指令碼檔案，指令碼執行成功之後就會在已經建立好的資料庫下面建立程式執行所需要的資料表文件；
• 在以上的步驟都執行完成且正確的情況下，就可以在程式主目錄下面（有app.js的那個目錄）,先開啟app.js檔案，然後找到程式碼：server.listen(8080, ‘192.168.1.101’, function () {})，修改為你自己的主機相應的IP地址和埠號，然後執行命令，node app.js，在以上的配置都沒出錯的情況下，這裡就會正常啟動程式了，然後進入瀏覽器，輸入IP地址和埠號，就會進入到程式的主頁了。
• 初次進入到網站首頁後，由於資料庫中沒有資料的原因，首頁或者其他頁面可能會出現變形格式不正常等其他問題，大家可以向資料庫中新增一些測試資料，然後再測試一下。這裡也可以直接新增我這裡提供的一些測試資料，參見相關資料夾下面的video.sql 檔案（直接匯入資料表結構），如果是需要匯入內容檔案，這裡也提供了另外一個SQL檔案（包含部分內容的資料表movies.sql和tvs.sql）,直接使用資料庫管理工具，匯入SQL檔案資料到資料庫即可完成資料的匯入。

其他說明

• 頁面整體的風格模仿了Discuz等論壇網站的佈局
• 網站首頁的輪播圖效果模仿了優酷、愛奇藝、騰訊視訊等主流視訊網站的輪播圖效果
• 電影底部的的友情連結，使用了大部分網站的分欄佈局，使用者可以新增自己的QQ群以及微信公眾號方便增加自己網站的人氣
• 主要列表的分頁功能，對於一些內容顯示較多的不能再一頁顯示完整的頁面，使用了ajax無重新整理分頁對資料進行多條展示，提高了使用者的體驗
• 目前主流瀏覽器中也做了相應測試，建議大家使用谷歌或者火狐瀏覽器，效果可能會更好

• 總的來說吧，自己就是一個對前端技術有著較高熱情的小白吧，沒事的時候喜歡瞎折騰，對一些有意思的技術平時也比較喜歡研究一下吧。因此就在這股熱情的鼓勵下，懷著滿腔熱血，寫下了這個VIP視訊網站專案程式。因為發現有些東西一旦落下來，後面就也沒有太多的激情去繼續完善這個程式了，就把這個程式貢獻給開源社群吧，供大家學習交流使用，在這裡也希望大家能夠多多支援。
• 最後，也請大家尊重原創，轉載請註明出處。此外，由於時間原因以及個人能力有限等其他原因，目前程式中可能也會存在一些潛在的bug，對於程式中的一些技術細節或者其他問題，也歡迎大家多多交流，也歡迎大家提出來，後面也可以抽時間繼續維護這個專案，如果可以的話後面大家可以繼續維護吧。有什麼問題或者建議也歡迎大家在下面留言。
• 最後，也希望大家能夠多多支援，畢竟碼程式碼也是不容易的，你們的支援和評分起碼也是我前進的動力，謝謝大家支援。

下面的是大家下載程式解壓後的一個目錄結構吧,下面簡單對這個目錄結構做個說明：<ignore_js_op> controllers: 控制層，只要的核心業務邏輯程式碼data：資料抓取層，用於從愛奇藝網站抓取視訊資料儲存到資料庫，並在前端顯示，其中的db.js就是資料庫的相關配置檔案models：資料庫表結構對映檔案（用於把資料庫的關係資料模型轉換為物件模型）utils：工具包views：檢視檔案（網站專案的所有html檔案，這裡的格式是xtpl，主要是為了對資料進行動態展示，便於後期進行資料渲染）www：網站的所有靜態資原始檔，包括html，css，js等檔案app.js: 程式的入口檔案config.js :  程式的主要配置檔案，用於配置檔案上傳目錄等引數router.js：程式的路由配置*.sql：這幾個都是一些抓取的資料資訊，用於向資料庫中插入資料使用視訊網站專案原始碼下載連結：