“MyPlay”视频分享网站设计与实现

刘宁 冯浩 刘改 郑小东

摘要：为给用户带来个性化视频观看分享体验，设计并实现了“MyPlay”视频分享网站。网站在注册模块中融入阿里云短信注册，除按热度顺序展示、分类展示视频外，可以按用户喜好推荐接近用户兴趣的视频。网站基于B/S结构开发并实现前后端分离，后台数据服务使用MySQL数据库，后台服务使用SpringBoot框架技术，前台页面渲染与展示使用Vue+ElementUi技术实现。最后系统测试证明了网站各功能模块运行流畅。

关键词：视频分享;视频推荐;网站设计;网站实现;前后端分离

中图分类号：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

近年来，伴随着网络流量和视频播放的成本降低，分享、观看视频在人们的休闲娱乐以及网络社交中占的比重越来越高。目前国内视频网站有很多主流平台，比如哔哩哔哩动画、抖音App等。国外有比如YouTube视频网站，这是国外视频类使用频率最高的视频网站。随着网络视频行业市场愈发火爆，各种视频分享网站还在不断推出。本文分析视频分享网站的开发流程，设计实现一个体现用户个性化服务的视频分享网站。

1 系统分析与设计

根据视频分享网站的服务内容设计功能模块，并构建相应的数据库。

1.1 功能模块设计

“MyPlay”视频分享网站最核心的功能是视频上传分享和视频播放，个性化功能是针对用户的视频观看历史，匹配相似度高的用户，进一步推荐这些用户观看过的视频。网站主要模块如图1所示，包括注册登录模块、用户首页模块、后台管理模块、个人中心模块、私信功能模块、视频详情功能模块等。

1.2 数据库结构设计

根据模块设计，数据库设计包含以下数据表：用户表、视频表、视频评论表、视频回复表、视频类型表、收藏表、关注表、打分表、点赞点踩表、信息表、系统公告表、动态表、动态评论表、管理员表等。

2  前台管理模块设计与实现

前台系统流程从用户进入网站开始，在首页可通过页面顶部的注册快速实现用户注册，进而登录。用户登录后方可全方位体验网站的个性化功能，如点击某个视频可以进入播放页，发送弹幕、关注作者、转发视频、点赞/点踩视频、评论留言等操作，用户还可以在个人中心对个人资料、个人視频、收藏视频和已关注进行管理。

2.1 登录注册模块

用户使用手机号注册登录，需要填写基本信息，并结合短信验证码完成。在注册模块使用了阿里云短信服务，在服务端引入了相关sdk，并且调用阿里云提供的接口，需要提供申请服务的appkey以及申请的对应短信服务的编码。首先通过Random生成一个4位的随机数，之后通过调用阿里云短信服务api，向前台提供的手机号参数发送带有该随机数的短信，发送成功后返回给前台该随机值，以便验证通过。注册成功后，用户可凭手机号加密码登录网站。

2.2 用户首页展示模块

用户首页展示所有用户上传且通过审核的视频，按照热度排序展示，还可以根据分类去查看不同类型的视频。从界面左侧菜单可进入动态、类别、个人中心以及消息中心等模块。用户首页效果如图2所示。在用户登录后，首页会出现“猜你喜欢”区域。

“猜你喜欢”是根据登录用户以往观看视频时对视频的打分情况，推荐和当前用户喜好相似度高的用户所看过的视频，该功能使用了Mahout开源技术中的基于用户的协同过滤算法。这里设计为用户推荐最多4个视频，最少是1个。如果是初次登陆的用户，或对当前用户没有可推荐的视频，则依据网站内视频点赞的统计结果，推荐点赞量最高的4个视频。

2.3 视频上传模块

视频上传模块最核心的问题就是对于上传文件的处理，该系统设计需要上传两个文件：视频的封面以及完整视频。后台服务端接收前台传入参数是一个文件数组，对该文件数组扫描，通过文件后缀判断为图片或为视频，同时使用UUID生成一个唯一的文件名，防止出现文件名重复导致文件被覆盖的问题。最后将最终的url访问地址存入数据库，而不是将整个文件存入数据库，当然整个url访问地址是通过使用地址映射，将本地磁盘映射到服务端中，从而可以通过服务短地址直接访问本地磁盘中的内容。

2.4 视频播放模块

在视频播放页，可以发表弹幕以及对视频的评论，还可以对视频进行评分。视频的推荐功能就是以该评分为依据来实现。在该模块，用户还可以转发、分享视频给好友。

视频播放采用了DPlayer插件，可以实现弹幕播放，倍速播放等效果。点赞和点踩是二选一，在点赞时，若之前有点过踩就会取消点踩。收藏视频后，登录后进入该视频页就会显示已收藏。下载功能可以直接下载视频到本地，方便用户存储观看。转发采用vue-social-share技术，可以转发QQ空间、QQ好友及微信好友。

用户可对视频评分，首页的“猜你喜欢”即以用户评分作为数据源进行推荐。页面显示视频分数为平均分，若显示0分表示该视频仍未被评分。随着页面刷新，视频分数会随着用户追加评分而动态变化。

评论用于用户对视频发表和交流观后感。未登录状态下，隐藏评论输入框。登录后会出现头像、输入框、评论按钮，如图3所示。评论区默认展示最新评论，也可以点击所有评论，默认只展示一级评论，点击查看回复会出现二级评论，展示的具体内容包括发布时间，评论人、评论人头像、回复人和回复内容。

2.5 个人中心模块

用户可进入个人中心模块界面，进行个人信息的修改，对“我的视频”“我的关注”“我的收藏”进行管理等操作。界面设计上，这些子模块均使用了同样的头部组件，包括用户的头像、用户名、个性签名和性别等信息。

查看其他用户的个人中心，包括“Ta的视频”“Ta的收藏”“Ta的关注”“Ta的动态”四个内容，同样使用同一个头部，展示了用户头像、用户名、个性签名和性别信息，界面右侧布局了关注和私信按钮，点击即可进行对应操作。

3 后台管理模块

后台管理模块为管理员提供视频审核、网站视频热度统计、系统公告发布管理以及视频类别管理等功能。

3.1 管理员首页

管理员登录后进入管理员首页，首页展示如图4所示。一方面显示待审核视频数量，另一方面用两个饼状图分别展示每个类别中通过审核的视频数量和每个类别视频的观看数量。饼图形式的统计结果让管理员直观地了解到哪些类别的视频在用户中热度更高。其中，饼状图数据使用了ECharts图表插件。

3.2 视频审核

视频审核模块以表格样式展现，具体展示用户上传过的视频信息，界面设计使用Element-Ui中的表格，让待审核的视频以表格形式列出，如图5所示。管理员点击“审批视频”按钮，即可出现视频播放弹框，继而观看视频来审核视频是否符合规范。

4 结束语

在完成视频分享网站基本功能的基础上，实现了短信验证码快速注册、视频热度排序、用户个性化推荐、分享到QQ空间及好友，以及自动统计视频分类热度等功能，为视频分享网站用户提供个性化服务体验，并提高了管理员管理水平和工作效率。

參考文献：

[1] 王建，罗政，张希，等.Web项目前后端分离的设计与实现[J].软件工程，2020，23（4）：22-24.

[2] 何军，陈倩怡.Vue+Springboot+Mybatis开发消费管理系统[J].电脑编程技巧与维护，2019（2）：87-88，102.

[3] 杨妍.基于Spring Boot与Vue的系统管理模块开发探究[J].电声技术，2019，43（2）：32-34.

[4] 王姝贤.基于Spring MVC框架的图片视频库系统的设计与实现[D].北京：北京交通大学，2018.

[5] 荣艳冬.关于Mybatis持久层框架的应用研究[J].信息安全与技术，2015，6（12）：86-88.

[6] 林彩霞.视频网站内容管理系统的设计与实现[D].大连：大连理工大学，2018.

[7] 焦鹏珲.基于SpringBoot和Vue框架的电子招投标系统的设计与实现[D].南京：南京大学，2018.

[8] 李天庆.基于SSM框架的电子商城项目的设计与实现[D].济南：山东大学，2019.

【通联编辑：王力】