基于Vue.js 的天天影视云视听平台的设计

随着互联网的飞速发展，大量的用户会通过视听平台来观看视频。经过调查发现，截至2020年12月，我国网络视听用户规模达9.44亿，网民使用率为95.4%。以哔哩哔哩（Bilibili）弹幕视频网站为例，截至2021年3月，哔哩哔哩月平均活跃用户数量达到2.23亿各类视频播放量达到16亿每日。哔哩哔哩通过平台的大数据算法推荐和高精确的视频索引吸引了大量的年轻用户。抖音在2016年9月上线它在短时间内实现了用户群体和内容爆发式的增长，短视频模式开始变得流行。

基于Vue.js 的天天影视云视听平台的设计类似于抖音和哔哩哔哩，是一份快餐式的视听方式，但要比抖音和哔哩哔哩的使用门槛更低。每一个人都可以去拍，去记录，并在天天影视云视听平台上传视频；观看者只要登录，就可以即时看到拍摄者上传的视频。天天影视云视听平台的设计可以以抖音的快节奏短视频为榜样，并参考哔哩哔哩网站推荐索引和UI界面，以简单免费、开放即时为特色，设计实现契合当代年轻人喜好的网络视听平台。

在创新驱动发展战略之下，平台可以将5G、人工智能等新兴技术不断适用于网络视听从生产到播放的各个环节。这些新兴技术将使网络视听的表达更加充实，传播更加高效。结合哔哩哔哩与抖音等短视频特点的创意视听平台可以更加吸引大众的眼球，获得1+1＞2的效果。

进行网络视听市场的调研和Vue.js相关技术参考文献阅读，理解视听平台项目的大致业务逻辑框架。按照视频网站项目相关的业务需求，设计项目所需要的框架模块和交互界面。在理解项目业务逻辑、项目需求的基础上，进行项目详细分析，创建数据库、构建表结构。进行项目规划与进度跟进。并在项目完成之后进行测试，分析不足和改进。

天天影视云视听平台基于Vue.js的渐进式框架，采用ThinkPHP框架技术和 Axios 来处理前后台数据的交互，前端使用JavaScript脚本语言。后端开发使用ThinkPHP框架技术，MySQL数据库与Layui UI框架。

天天影视云视听平台分为前台客户端和后台管理两个部分，前台客户端分为首页模块、搜索模块、视频模块、评论模块、用户模块;后台管理部分划分为管理员个人中心模块、视频管理模块、用户管理模块、用户留言管理模块。

前台客户端模块:

①首页模块：搜索框展示、推荐视频、视频分类信息展示等。

②搜索模块：搜索功能、搜索记录等。

③视频模块：视频播放、视频暂停、收藏视频等。

④评论模块：发表评论、编辑评论等。

⑤用户模块：用户注册、用户登录等。

后台管理模块:

①管理员个人中心模块：管理员注册、管理员登录、修改管理员个人信息等。

②视频管理模块：视频删除、视频种类编辑等。

③用户管理模块：对用户信息的修改、查找用户信息等。

④用户留言管理模块：管理员可以查看用户的留言、对用户留言进行回复等。

在传统文化的传播话语中，媒介技术以一种动力性要素发挥了积极作用，并在与时俱进的时代语境中推进传统文化的大众化进程，尤其在当代社会的数字技术影响下，传统文化的传播实践充分借力数字技术的功能性优势[5]。从王小悦的视听平台动态延伸，到如今的蓬勃发展，Vue.js技术的应用无不起到重要作用[6]。通过刘启伟Vue.js与Web前端开发[7]以及杨丰嘉，黄媛媛的 Vue.js在线商城设计[8]，将其与视听媒体多元结合，促使视听媒体的价值实现，对视听媒体的发展提供新的道路[9]。Vue.js作为一种重要的移动业务分析技术可以实现对应用和业务流程的管控满足人们的数据需求，尤其是在可视化平台网页设计层面上[10]。

以哔哩哔哩（Bilibili）视听平台的设计为例，其利用了简洁的UI与方便快捷的分区、搜索功能成为当今视听平台市场的巨头[11]。Vue.js 作为前端开发的渐进式框架，严格遵循CMD标准。同时提供了MVVM前端架构模式和Vue全家桶用于系统的前端开发[12]。不同于其他的前端开发框架，Vue是能够从底层组件到上层框架分层次应用，充分体现了Vue的渐进式原理，Vue的运行速度快、将视图、数据、结构分离并且作为一个轻量型的框架，有助于视听平台项目的开发应用。学习王璐，崔保磊等人的Vue.js开放平台设计，避免重复的前端工作，提高开发效率[13]。参考冯传波，彭章友[14]等人与Paul Krill的移动应用可视化研究[15]，进行视听平台的搭建与开发。

参考文献

[1]王一梅,冯丽萍,吴心怡. 2020年我国网络视听产业发展现状与趋势[J].广播电视信息,2021,2

8(10):58-60.

[2]方生.基于“Vue.js”前端框架技术的研究[J].电脑知识与技术,2021,17(19):59-60+64.

[3]胡开华,张玉静,陈明禄,何文鑫.基于Vue.js的Web应用开发教学案例设计与实[J].信息与电

脑(理论版),2021,33(18):91-94.

[4]王思辰,李林.基于Vue.js的电商管理平台的设计与实现[J].现代信息科技,2021,5(14):13-15+

20.

[5]赵红勋, 付月.数字化时代传统文化的视听传播策略探析[J].当代电视,2021,17(11):

54 -58+62.

[6]王小悦.数字媒体影像的视听语言表现研究[J].大观(论坛),2021,14(07):77-78.

[7]刘启伟.基于 Vue.js 框架的Web前端开发工具的设计与实现[D].北京:北京邮电大学,2021.

[8]杨丰嘉,黄媛媛.基于Vue.js的在线商城网站设计与实现[J].工程技术研究,2020,2(8):11-13.

[9]刘永刚,祁江波,王大鹏,尹亚光.基于多源数据的视听媒体收视调查平台研发与应用[J].广播

电视网络,2020,27(11):81-83.

[10]沈皎佶.Vue.js技术在移动应用可视化平台网页设计中的应用[J].数码世界,2020,1(09):96-97.

[11]林玮,黄倩如.区块链技术介入视听传播平台的基础与潜能-以哔哩哔哩（Bilibbili）为例[J].

声屏世界,2020,12(14):9-11.

[12]唐斌斌,叶奕.Vue.js在前端开发应用中的性能影响研究[J].电子制作,2020,2(10):49-50+59.

[13]王璐,崔保磊,潘红霞,赵莉,田宇.基于Vue.js的在线设计开放平台研究与实现[J].信息技术与信息化,2019.1(11):168-170.

[14]冯传波,彭章友,张钟浩.基于 Vue.js 的移动应用可视化平台的研究[J].工业控制计算机,20

19,32(05):102-103.