【原創】基於NodeJS Express框架開發的一個VIP視頻網站項目及源碼分享

項目名稱：視頻網站項目

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

數據庫：MySQL

開發環境：Win7，Webstorm

上線部署環境：Linux服務器

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

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

 

咱們先來看一下最終的效果：
用戶主頁的搭建：

• 實現了主頁輪播圖的顯示和切換，用戶能夠從數據庫中自由配置和切換輪播圖的顯示
• 實現了主頁電影列表的顯示：從數據庫文件讀取電影和電視劇列表信息並在前臺顯示

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

電影播放頁面的搭建

• 對於其餘頁面的任意能夠展示電影列表的頁面，用戶能夠直接點擊列表，直接進入播放頁面
• 播放頁面電影詳細信息的展示
• 對於加載速度較慢的視頻，用戶能夠自由切換播放接口進行加速
• 彈幕功能（特點功能）：相似於B站等其餘視頻網站的彈幕功能，用戶在登陸以後能夠實如今線發言
• 用戶能夠在相應的播放頁面查看其餘用戶已經發表的評論，同時也能夠在登陸以後自由發表評論
• 電影收藏和取消功能

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

• 實現了根據視頻播放地址和視頻名稱全網視頻的搜索和播放功能
• 實現了正在熱映，即將上映和TOP250的電影列表的展現
• 這部分因爲目前網站也沒有提供一些搜索的接口，這裏使用的是正則方式進行解析的思路實現了搜索功能

用戶中心的管理

• 對於已經註冊的用戶，實現用戶基本信息的修改
• 用戶密碼的修改
• 用戶評論記錄的查看
• 用戶收藏電影的查看和播放
• 用戶登陸日誌的查看

程序安裝方法步驟：

• 確保電腦已經安裝了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，對於程序中的一些技術細節或者其餘問題，也歡迎你們多多交流，也歡迎你們提出來，後面也能夠抽時間繼續維護這個項目，若是能夠的話後面你們能夠繼續維護吧。有什麼問題或者建議也歡迎你們在下面留言。
• 最後，也但願你們可以多多支持，畢竟碼代碼也是不容易的，大家的支持和評分起碼也是我前進的動力，謝謝你們支持。

下面的是你們下載程序解壓後的一個目錄結構吧,下面簡單對這個目錄結構作個說明：

controllers: 控制層，只要的核心業務邏輯代碼
data：數據抓取層，用於從愛奇藝網站抓取視頻數據存儲到數據庫，並在前端顯示，其中的db.js就是數據庫的相關配置文件
models：數據庫表結構映射文件（用於把數據庫的關係數據模型轉換爲對象模型）
utils：工具包
views：視圖文件（網站項目的全部html文件，這裏的格式是xtpl，主要是爲了對數據進行動態展現，便於後期進行數據渲染）
www：網站的全部靜態資源文件，包括html，css，js等文件
app.js: 程序的入口文件
config.js :  程序的主要配置文件，用於配置文件上傳目錄等參數
router.js：程序的路由配置
*.sql：這幾個都是一些抓取的數據信息，用於向數據庫中插入數據使用

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

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