基于Vue.js 的天天影视云视听平台的设计
隨著互聯(lián)網(wǎng)的飛速發(fā)展,大量的用戶會(huì)通過(guò)視聽平臺(tái)來(lái)觀看視頻。經(jīng)過(guò)調(diào)查發(fā)現(xiàn),截至2020年12月,我國(guó)網(wǎng)絡(luò)視聽用戶規(guī)模達(dá)9.44億,網(wǎng)民使用率為95.4%。以嗶哩嗶哩(Bilibili)彈幕視頻網(wǎng)站為例,截至2021年3月,嗶哩嗶哩月平均活躍用戶數(shù)量達(dá)到2.23億各類視頻播放量達(dá)到16億每日。嗶哩嗶哩通過(guò)平臺(tái)的大數(shù)據(jù)算法推薦和高精確的視頻索引吸引了大量的年輕用戶。抖音在2016年9月上線它在短時(shí)間內(nèi)實(shí)現(xiàn)了用戶群體和內(nèi)容爆發(fā)式的增長(zhǎng),短視頻模式開始變得流行。
基于Vue.js 的天天影視云視聽平臺(tái)的設(shè)計(jì)類似于抖音和嗶哩嗶哩,是一份快餐式的視聽方式,但要比抖音和嗶哩嗶哩的使用門檻更低。每一個(gè)人都可以去拍,去記錄,并在天天影視云視聽平臺(tái)上傳視頻;觀看者只要登錄,就可以即時(shí)看到拍攝者上傳的視頻。天天影視云視聽平臺(tái)的設(shè)計(jì)可以以抖音的快節(jié)奏短視頻為榜樣,并參考嗶哩嗶哩網(wǎng)站推薦索引和UI界面,以簡(jiǎn)單免費(fèi)、開放即時(shí)為特色,設(shè)計(jì)實(shí)現(xiàn)契合當(dāng)代年輕人喜好的網(wǎng)絡(luò)視聽平臺(tái)。
在創(chuàng)新驅(qū)動(dòng)發(fā)展戰(zhàn)略之下,平臺(tái)可以將5G、人工智能等新興技術(shù)不斷適用于網(wǎng)絡(luò)視聽從生產(chǎn)到播放的各個(gè)環(huán)節(jié)。這些新興技術(shù)將使網(wǎng)絡(luò)視聽的表達(dá)更加充實(shí),傳播更加高效。結(jié)合嗶哩嗶哩與抖音等短視頻特點(diǎn)的創(chuàng)意視聽平臺(tái)可以更加吸引大眾的眼球,獲得1+1>2的效果。
進(jìn)行網(wǎng)絡(luò)視聽市場(chǎng)的調(diào)研和Vue.js相關(guān)技術(shù)參考文獻(xiàn)閱讀,理解視聽平臺(tái)項(xiàng)目的大致業(yè)務(wù)邏輯框架。按照視頻網(wǎng)站項(xiàng)目相關(guān)的業(yè)務(wù)需求,設(shè)計(jì)項(xiàng)目所需要的框架模塊和交互界面。在理解項(xiàng)目業(yè)務(wù)邏輯、項(xiàng)目需求的基礎(chǔ)上,進(jìn)行項(xiàng)目詳細(xì)分析,創(chuàng)建數(shù)據(jù)庫(kù)、構(gòu)建表結(jié)構(gòu)。進(jìn)行項(xiàng)目規(guī)劃與進(jìn)度跟進(jìn)。并在項(xiàng)目完成之后進(jìn)行測(cè)試,分析不足和改進(jìn)。
天天影視云視聽平臺(tái)基于Vue.js的漸進(jìn)式框架,采用ThinkPHP框架技術(shù)和 Axios 來(lái)處理前后臺(tái)數(shù)據(jù)的交互,前端使用JavaScript腳本語(yǔ)言。后端開發(fā)使用ThinkPHP框架技術(shù),MySQL數(shù)據(jù)庫(kù)與Layui UI框架。
天天影視云視聽平臺(tái)分為前臺(tái)客戶端和后臺(tái)管理兩個(gè)部分,前臺(tái)客戶端分為首頁(yè)模塊、搜索模塊、視頻模塊、評(píng)論模塊、用戶模塊;后臺(tái)管理部分劃分為管理員個(gè)人中心模塊、視頻管理模塊、用戶管理模塊、用戶留言管理模塊。
前臺(tái)客戶端模塊:
①首頁(yè)模塊:搜索框展示、推薦視頻、視頻分類信息展示等。
②搜索模塊:搜索功能、搜索記錄等。
③視頻模塊:視頻播放、視頻暫停、收藏視頻等。
④評(píng)論模塊:發(fā)表評(píng)論、編輯評(píng)論等。
⑤用戶模塊:用戶注冊(cè)、用戶登錄等。
后臺(tái)管理模塊:
①管理員個(gè)人中心模塊:管理員注冊(cè)、管理員登錄、修改管理員個(gè)人信息等。
②視頻管理模塊:視頻刪除、視頻種類編輯等。
③用戶管理模塊:對(duì)用戶信息的修改、查找用戶信息等。
④用戶留言管理模塊:管理員可以查看用戶的留言、對(duì)用戶留言進(jìn)行回復(fù)等。
在傳統(tǒng)文化的傳播話語(yǔ)中,媒介技術(shù)以一種動(dòng)力性要素發(fā)揮了積極作用,并在與時(shí)俱進(jìn)的時(shí)代語(yǔ)境中推進(jìn)傳統(tǒng)文化的大眾化進(jìn)程,尤其在當(dāng)代社會(huì)的數(shù)字技術(shù)影響下,傳統(tǒng)文化的傳播實(shí)踐充分借力數(shù)字技術(shù)的功能性優(yōu)勢(shì)[5]。從王小悅的視聽平臺(tái)動(dòng)態(tài)延伸,到如今的蓬勃發(fā)展,Vue.js技術(shù)的應(yīng)用無(wú)不起到重要作用[6]。通過(guò)劉啟偉Vue.js與Web前端開發(fā)[7]以及楊豐嘉,黃媛媛的 Vue.js在線商城設(shè)計(jì)[8],將其與視聽媒體多元結(jié)合,促使視聽媒體的價(jià)值實(shí)現(xiàn),對(duì)視聽媒體的發(fā)展提供新的道路[9]。Vue.js作為一種重要的移動(dòng)業(yè)務(wù)分析技術(shù)可以實(shí)現(xiàn)對(duì)應(yīng)用和業(yè)務(wù)流程的管控滿足人們的數(shù)據(jù)需求,尤其是在可視化平臺(tái)網(wǎng)頁(yè)設(shè)計(jì)層面上[10]。
以嗶哩嗶哩(Bilibili)視聽平臺(tái)的設(shè)計(jì)為例,其利用了簡(jiǎn)潔的UI與方便快捷的分區(qū)、搜索功能成為當(dāng)今視聽平臺(tái)市場(chǎng)的巨頭[11]。Vue.js 作為前端開發(fā)的漸進(jìn)式框架,嚴(yán)格遵循CMD標(biāo)準(zhǔn)。同時(shí)提供了MVVM前端架構(gòu)模式和Vue全家桶用于系統(tǒng)的前端開發(fā)[12]。不同于其他的前端開發(fā)框架,Vue是能夠從底層組件到上層框架分層次應(yīng)用,充分體現(xiàn)了Vue的漸進(jìn)式原理,Vue的運(yùn)行速度快、將視圖、數(shù)據(jù)、結(jié)構(gòu)分離并且作為一個(gè)輕量型的框架,有助于視聽平臺(tái)項(xiàng)目的開發(fā)應(yīng)用。學(xué)習(xí)王璐,崔保磊等人的Vue.js開放平臺(tái)設(shè)計(jì),避免重復(fù)的前端工作,提高開發(fā)效率[13]。參考馮傳波,彭章友[14]等人與Paul Krill的移動(dòng)應(yīng)用可視化研究[15],進(jìn)行視聽平臺(tái)的搭建與開發(fā)。
參考文獻(xiàn)
[1]王一梅,馮麗萍,吳心怡. 2020年我國(guó)網(wǎng)絡(luò)視聽產(chǎn)業(yè)發(fā)展現(xiàn)狀與趨勢(shì)[J].廣播電視信息,2021,2
8(10):58-60.
[2]方生.基于“Vue.js”前端框架技術(shù)的研究[J].電腦知識(shí)與技術(shù),2021,17(19):59-60+64.
[3]胡開華,張玉靜,陳明祿,何文鑫.基于Vue.js的Web應(yīng)用開發(fā)教學(xué)案例設(shè)計(jì)與實(shí)[J].信息與電
腦(理論版),2021,33(18):91-94.
[4]王思辰,李林.基于Vue.js的電商管理平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代信息科技,2021,5(14):13-15+
20.
[5]趙紅勛, 付月.數(shù)字化時(shí)代傳統(tǒng)文化的視聽傳播策略探析[J].當(dāng)代電視,2021,17(11):
54 -58+62.
[6]王小悅.數(shù)字媒體影像的視聽語(yǔ)言表現(xiàn)研究[J].大觀(論壇),2021,14(07):77-78.
[7]劉啟偉.基于 Vue.js 框架的Web前端開發(fā)工具的設(shè)計(jì)與實(shí)現(xiàn)[D].北京:北京郵電大學(xué),2021.
[8]楊豐嘉,黃媛媛.基于Vue.js的在線商城網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)[J].工程技術(shù)研究,2020,2(8):11-13.
[9]劉永剛,祁江波,王大鵬,尹亞光.基于多源數(shù)據(jù)的視聽媒體收視調(diào)查平臺(tái)研發(fā)與應(yīng)用[J].廣播
電視網(wǎng)絡(luò),2020,27(11):81-83.
[10]沈皎佶.Vue.js技術(shù)在移動(dòng)應(yīng)用可視化平臺(tái)網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].數(shù)碼世界,2020,1(09):96-97.
[11]林瑋,黃倩如.區(qū)塊鏈技術(shù)介入視聽傳播平臺(tái)的基礎(chǔ)與潛能-以嗶哩嗶哩(Bilibbili)為例[J].
聲屏世界,2020,12(14):9-11.
[12]唐斌斌,葉奕.Vue.js在前端開發(fā)應(yīng)用中的性能影響研究[J].電子制作,2020,2(10):49-50+59.
[13]王璐,崔保磊,潘紅霞,趙莉,田宇.基于Vue.js的在線設(shè)計(jì)開放平臺(tái)研究與實(shí)現(xiàn)[J].信息技術(shù)與信息化,2019.1(11):168-170.
[14]馮傳波,彭章友,張鐘浩.基于 Vue.js 的移動(dòng)應(yīng)用可視化平臺(tái)的研究[J].工業(yè)控制計(jì)算機(jī),20
19,32(05):102-103.
總結(jié)
以上是生活随笔為你收集整理的基于Vue.js 的天天影视云视听平台的设计的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: VMware虚拟机链接克隆和完整克隆区别
- 下一篇: vue 一键修复eslint问题(web