【VIP視訊網站專案上線】基於Nodejs的Express框架開發的VIP視訊網站專案及完整程式碼分享...

weixin_33766168發表於2018-09-30
網站NodeJSExpress框架
版權宣告：本文為博主原創文章，未經博主允許不得轉載。更多學習資料請訪問我愛科技論壇:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/82914063

 

 

 

 

專案名稱：VIP視訊網站專案

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

資料庫：MySQL

開發環境：Win7，Webstorm

上線環境：Linux伺服器

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

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

VIP視訊網站專案基本介紹

程式安裝方法

  • 確保電腦已經安裝了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檔案資料到資料庫即可完成資料的匯入。

當前版本 V1.0.0

主要功能

  • 使用者主頁的搭建：
    • 實現了主頁輪播圖的顯示和切換，使用者可以從資料庫中自由配置和切換輪播圖的顯示
    • 實現了主頁電影列表的顯示：從資料庫檔案讀取電影和電視劇列表資訊並在前臺顯示
  • 使用者登入和註冊頁面的搭建：
    • 實現了使用者的登入和註冊功能
  • 使用者註冊和登入驗證碼提示功能
  • 使用者登入註冊驗證碼機制
  • 電影播放頁面的搭建
    • 對於其他頁面的任意可以展現電影列表的頁面，使用者可以直接點選列表，直接進入播放頁面
    • 播放頁面電影詳細資訊的展現
    • 對於載入速度較慢的視訊，使用者可以自由切換播放介面進行加速
    • 彈幕功能（特色功能）：類似於B站等其他視訊網站的彈幕功能，使用者在登入之後可以實現線上發言
    • 使用者可以在相應的播放頁面檢視其他使用者已經發表的評論，同時也可以在登入之後自由發表評論
    • 電影收藏和取消功能
  • 使用者中心的管理
    • 對於已經註冊的使用者，實現使用者基本資訊的修改
    • 使用者密碼的修改
    • 使用者評論記錄的檢視
    • 使用者收藏電影的檢視和播放
    • 使用者登入日誌的檢視
  • 電影搜尋功能（特色功能）
    • 實現了根據視訊播放地址和視訊名稱全網視訊的搜尋和播放功能
    • 實現了正在熱映，即將上映和TOP250的電影列表的展示
  • 其他
  • 頁面整體的風格模仿了Discuz等論壇網站的佈局
  • 網站首頁的輪播圖效果模仿了優酷、愛奇藝、騰訊視訊等主流視訊網站的輪播圖效果
  • 電影底部的的友情連結，使用了大部分網站的分欄佈局，使用者可以新增自己的QQ群以及微信公眾號方便增加自己網站的人氣
  • 主要列表的分頁功能，對於一些內容顯示較多的不能再一頁顯示完整的頁面，使用了ajax無重新整理分頁對資料進行多條展示，提高了使用者的體驗
  • 目前主流瀏覽器中也做了相應測試，建議大家使用谷歌或者火狐瀏覽器，效果可能會更好

其他說明

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

相關文章