“MyPlay”視頻分享網(wǎng)站設(shè)計與實現(xiàn)

劉寧 馮浩 劉改 鄭小東

摘要：為給用戶帶來個性化視頻觀看分享體驗，設(shè)計并實現(xiàn)了“MyPlay”視頻分享網(wǎng)站。網(wǎng)站在注冊模塊中融入阿里云短信注冊，除按熱度順序展示、分類展示視頻外，可以按用戶喜好推薦接近用戶興趣的視頻。網(wǎng)站基于B/S結(jié)構(gòu)開發(fā)并實現(xiàn)前后端分離，后臺數(shù)據(jù)服務(wù)使用MySQL數(shù)據(jù)庫，后臺服務(wù)使用SpringBoot框架技術(shù)，前臺頁面渲染與展示使用Vue+ElementUi技術(shù)實現(xiàn)。最后系統(tǒng)測試證明了網(wǎng)站各功能模塊運行流暢。

關(guān)鍵詞：視頻分享;視頻推薦;網(wǎng)站設(shè)計;網(wǎng)站實現(xiàn);前后端分離

中圖分類號：TP391 ? ? ? ?文獻標識碼：A

文章編號：1009-3044（2020）31-0046-03

Abstract：To bring personalized video viewing and sharing experience to users， the "MyPlay" video sharing website is designed and implemented. The website function integrates Alibaba cloud SMS registration. In addition to displaying videos in order of popularity and classification， videos close to users' interests can be recommended according to users' preferences. The website is developed based on B/S structure and realizes front and rear end separation. The rear end data service uses MySQL database and SpringBoot framework， and the front page rendering and display uses Vue + ElementUi. Finally， the system test proves that the website run smoothly.

Key words： video sharing; video recommendation; website design;website implementation; front and rear end separation

近年來，伴隨著網(wǎng)絡(luò)流量和視頻播放的成本降低，分享、觀看視頻在人們的休閑娛樂以及網(wǎng)絡(luò)社交中占的比重越來越高。目前國內(nèi)視頻網(wǎng)站有很多主流平臺，比如嗶哩嗶哩動畫、抖音App等。國外有比如YouTube視頻網(wǎng)站，這是國外視頻類使用頻率最高的視頻網(wǎng)站。隨著網(wǎng)絡(luò)視頻行業(yè)市場愈發(fā)火爆，各種視頻分享網(wǎng)站還在不斷推出。本文分析視頻分享網(wǎng)站的開發(fā)流程，設(shè)計實現(xiàn)一個體現(xiàn)用戶個性化服務(wù)的視頻分享網(wǎng)站。

1 系統(tǒng)分析與設(shè)計

根據(jù)視頻分享網(wǎng)站的服務(wù)內(nèi)容設(shè)計功能模塊，并構(gòu)建相應(yīng)的數(shù)據(jù)庫。

1.1 功能模塊設(shè)計

“MyPlay”視頻分享網(wǎng)站最核心的功能是視頻上傳分享和視頻播放，個性化功能是針對用戶的視頻觀看歷史，匹配相似度高的用戶，進一步推薦這些用戶觀看過的視頻。網(wǎng)站主要模塊如圖1所示，包括注冊登錄模塊、用戶首頁模塊、后臺管理模塊、個人中心模塊、私信功能模塊、視頻詳情功能模塊等。

1.2 數(shù)據(jù)庫結(jié)構(gòu)設(shè)計

根據(jù)模塊設(shè)計，數(shù)據(jù)庫設(shè)計包含以下數(shù)據(jù)表：用戶表、視頻表、視頻評論表、視頻回復(fù)表、視頻類型表、收藏表、關(guān)注表、打分表、點贊點踩表、信息表、系統(tǒng)公告表、動態(tài)表、動態(tài)評論表、管理員表等。

2 ?前臺管理模塊設(shè)計與實現(xiàn)

前臺系統(tǒng)流程從用戶進入網(wǎng)站開始，在首頁可通過頁面頂部的注冊快速實現(xiàn)用戶注冊，進而登錄。用戶登錄后方可全方位體驗網(wǎng)站的個性化功能，如點擊某個視頻可以進入播放頁，發(fā)送彈幕、關(guān)注作者、轉(zhuǎn)發(fā)視頻、點贊/點踩視頻、評論留言等操作，用戶還可以在個人中心對個人資料、個人視頻、收藏視頻和已關(guān)注進行管理。

2.1 登錄注冊模塊

用戶使用手機號注冊登錄，需要填寫基本信息，并結(jié)合短信驗證碼完成。在注冊模塊使用了阿里云短信服務(wù)，在服務(wù)端引入了相關(guān)sdk，并且調(diào)用阿里云提供的接口，需要提供申請服務(wù)的appkey以及申請的對應(yīng)短信服務(wù)的編碼。首先通過Random生成一個4位的隨機數(shù)，之后通過調(diào)用阿里云短信服務(wù)api，向前臺提供的手機號參數(shù)發(fā)送帶有該隨機數(shù)的短信，發(fā)送成功后返回給前臺該隨機值，以便驗證通過。注冊成功后，用戶可憑手機號加密碼登錄網(wǎng)站。

2.2 用戶首頁展示模塊

用戶首頁展示所有用戶上傳且通過審核的視頻，按照熱度排序展示，還可以根據(jù)分類去查看不同類型的視頻。從界面左側(cè)菜單可進入動態(tài)、類別、個人中心以及消息中心等模塊。用戶首頁效果如圖2所示。在用戶登錄后，首頁會出現(xiàn)“猜你喜歡”區(qū)域。

“猜你喜歡”是根據(jù)登錄用戶以往觀看視頻時對視頻的打分情況，推薦和當前用戶喜好相似度高的用戶所看過的視頻，該功能使用了Mahout開源技術(shù)中的基于用戶的協(xié)同過濾算法。這里設(shè)計為用戶推薦最多4個視頻，最少是1個。如果是初次登陸的用戶，或?qū)Ξ斍坝脩魶]有可推薦的視頻，則依據(jù)網(wǎng)站內(nèi)視頻點贊的統(tǒng)計結(jié)果，推薦點贊量最高的4個視頻。

2.3 視頻上傳模塊

視頻上傳模塊最核心的問題就是對于上傳文件的處理，該系統(tǒng)設(shè)計需要上傳兩個文件：視頻的封面以及完整視頻。后臺服務(wù)端接收前臺傳入?yún)?shù)是一個文件數(shù)組，對該文件數(shù)組掃描，通過文件后綴判斷為圖片或為視頻，同時使用UUID生成一個唯一的文件名，防止出現(xiàn)文件名重復(fù)導致文件被覆蓋的問題。最后將最終的url訪問地址存入數(shù)據(jù)庫，而不是將整個文件存入數(shù)據(jù)庫，當然整個url訪問地址是通過使用地址映射，將本地磁盤映射到服務(wù)端中，從而可以通過服務(wù)短地址直接訪問本地磁盤中的內(nèi)容。

2.4 視頻播放模塊

在視頻播放頁，可以發(fā)表彈幕以及對視頻的評論，還可以對視頻進行評分。視頻的推薦功能就是以該評分為依據(jù)來實現(xiàn)。在該模塊，用戶還可以轉(zhuǎn)發(fā)、分享視頻給好友。

視頻播放采用了DPlayer插件，可以實現(xiàn)彈幕播放，倍速播放等效果。點贊和點踩是二選一，在點贊時，若之前有點過踩就會取消點踩。收藏視頻后，登錄后進入該視頻頁就會顯示已收藏。下載功能可以直接下載視頻到本地，方便用戶存儲觀看。轉(zhuǎn)發(fā)采用vue-social-share技術(shù)，可以轉(zhuǎn)發(fā)QQ空間、QQ好友及微信好友。

用戶可對視頻評分，首頁的“猜你喜歡”即以用戶評分作為數(shù)據(jù)源進行推薦。頁面顯示視頻分數(shù)為平均分，若顯示0分表示該視頻仍未被評分。隨著頁面刷新，視頻分數(shù)會隨著用戶追加評分而動態(tài)變化。

評論用于用戶對視頻發(fā)表和交流觀后感。未登錄狀態(tài)下，隱藏評論輸入框。登錄后會出現(xiàn)頭像、輸入框、評論按鈕，如圖3所示。評論區(qū)默認展示最新評論，也可以點擊所有評論，默認只展示一級評論，點擊查看回復(fù)會出現(xiàn)二級評論，展示的具體內(nèi)容包括發(fā)布時間，評論人、評論人頭像、回復(fù)人和回復(fù)內(nèi)容。

2.5 個人中心模塊

用戶可進入個人中心模塊界面，進行個人信息的修改，對“我的視頻”“我的關(guān)注”“我的收藏”進行管理等操作。界面設(shè)計上，這些子模塊均使用了同樣的頭部組件，包括用戶的頭像、用戶名、個性簽名和性別等信息。

查看其他用戶的個人中心，包括“Ta的視頻”“Ta的收藏”“Ta的關(guān)注”“Ta的動態(tài)”四個內(nèi)容，同樣使用同一個頭部，展示了用戶頭像、用戶名、個性簽名和性別信息，界面右側(cè)布局了關(guān)注和私信按鈕，點擊即可進行對應(yīng)操作。

3 后臺管理模塊

后臺管理模塊為管理員提供視頻審核、網(wǎng)站視頻熱度統(tǒng)計、系統(tǒng)公告發(fā)布管理以及視頻類別管理等功能。

3.1 管理員首頁

管理員登錄后進入管理員首頁，首頁展示如圖4所示。一方面顯示待審核視頻數(shù)量，另一方面用兩個餅狀圖分別展示每個類別中通過審核的視頻數(shù)量和每個類別視頻的觀看數(shù)量。餅圖形式的統(tǒng)計結(jié)果讓管理員直觀地了解到哪些類別的視頻在用戶中熱度更高。其中，餅狀圖數(shù)據(jù)使用了ECharts圖表插件。

3.2 視頻審核

視頻審核模塊以表格樣式展現(xiàn)，具體展示用戶上傳過的視頻信息，界面設(shè)計使用Element-Ui中的表格，讓待審核的視頻以表格形式列出，如圖5所示。管理員點擊“審批視頻”按鈕，即可出現(xiàn)視頻播放彈框，繼而觀看視頻來審核視頻是否符合規(guī)范。

4 結(jié)束語

在完成視頻分享網(wǎng)站基本功能的基礎(chǔ)上，實現(xiàn)了短信驗證碼快速注冊、視頻熱度排序、用戶個性化推薦、分享到QQ空間及好友，以及自動統(tǒng)計視頻分類熱度等功能，為視頻分享網(wǎng)站用戶提供個性化服務(wù)體驗，并提高了管理員管理水平和工作效率。

參考文獻：

[1] 王建，羅政，張希，等.Web項目前后端分離的設(shè)計與實現(xiàn)[J].軟件工程，2020，23（4）：22-24.

[2] 何軍，陳倩怡.Vue+Springboot+Mybatis開發(fā)消費管理系統(tǒng)[J].電腦編程技巧與維護，2019（2）：87-88，102.

[3] 楊妍.基于Spring Boot與Vue的系統(tǒng)管理模塊開發(fā)探究[J].電聲技術(shù)，2019，43（2）：32-34.

[4] 王姝賢.基于Spring MVC框架的圖片視頻庫系統(tǒng)的設(shè)計與實現(xiàn)[D].北京：北京交通大學，2018.

[5] 榮艷冬.關(guān)于Mybatis持久層框架的應(yīng)用研究[J].信息安全與技術(shù)，2015，6（12）：86-88.

[6] 林彩霞.視頻網(wǎng)站內(nèi)容管理系統(tǒng)的設(shè)計與實現(xiàn)[D].大連：大連理工大學，2018.

[7] 焦鵬琿.基于SpringBoot和Vue框架的電子招投標系統(tǒng)的設(shè)計與實現(xiàn)[D].南京：南京大學，2018.

[8] 李天慶.基于SSM框架的電子商城項目的設(shè)計與實現(xiàn)[D].濟南：山東大學，2019.

【通聯(lián)編輯：王力】