基于 MVVM 架构的视频播放平台设计与开发 黄

2021【3 】3

ISSN:2661-3719(Print); 2661-3727 (Online) 计算机系统网络和电信 201

基于 MVVM 架构的视频播放平台设计与开发

黄皓洋 黄媛媛

四川大学锦城学院计算机与软件学院 四川 成都 611731

【摘要】如今，随着互联网的发展，人们可以从网上获取到大量信息。而视频是这些信息的主要获取来源之一，网络视频 的火热也加速了视频网站的发展。本文描述了一个基于 MVVM 架构开发的视频播放平台，前端运用 Vue.js 渐进式框架与 Element UI 组件库搭建页面 , 后端采用 Node.js 搭建运行环境，数据库使用 MySQL 存储数据。用户可以通过关键字搜索和 菜单栏分类检索想看的视频。在用户注册账号、登录平台后，可以点击视频进入播放页面观看视频，也可以将自己感兴趣 的视频收藏下来，并在个人中心展示已收藏的视频。根据需求，网站的开发可分为安全管理模块、内容管理模块、收藏管 理模块以及个人中心模块四大部分。

【关键词】MVVM ；视频播放平台；Node.js ；MySQL

1 现状

如今，在互联网技术的催化下新媒体更趋向于视频 化发展。视频更是以其携带丰富的信息在娱乐与学习中 占据不可或缺的地位^[1]，网络视频的火热也加速了视频 网站的发展。优秀的视频网站设计可以迅速吸引用户的 眼球，基于人们多样化的需求，打造自身平台的特点，

让自身的定位更加清晰，给用户带来更好的使用体验。

2 需求分析

观看视频是解压、娱乐、放松身心的方式，也是学 习知识、了解时事新闻的媒介。高效便捷的操作以及更 人性化的功能是提升用户体验的重要方式。所以一个在 线视频播放平台的开发，需要满足用户消遣娱乐、学习 和了解新闻的需求，也需要实现高效便捷的操作与人性 化的功能。

本视频播放平台将整体分为安全管理模块、内容管 理模块、收藏管理模块以及个人中心模块四个部分。安 全管理模块包括注册、登录与注销。内容管理模块包括 了以卡片式排列的视频展示部分、帮助用户更快寻找到 视频的检索功能以及视频播放功能。收藏管理模块可以 把用户感兴趣的视频存到个人中心以便观看，个人中心 模块可以编辑用户的昵称、简介等信息。以上四个部分 可以基本实现一个视频播放平台的开发。

3 技术选型

视频播放平台的系统架构采用前后端分离，前端使 用 Vue.js 框架对其进行开发。

后端采用 Node.js 运行环境，Node.js 的编写是不 受特定软件限制的 , 打开浏览器就可以执行程序。前后 端通过接口传递数据。

利用 MySQL 数据库来存储数据，它可以以极快的速 度、极高的效率，安全地处理大量数据。

4 模块设计

本视频播放平台将整体分为安全管理模块、内容管 理模块、收藏管理模块以及个人中心模块四个部分（如 图 1 所示）。这四个部分将信息进行分类：安全管理模 块包括注册、登录与注销。用户需要通过账号和密码进

行注册并登录，登录后可以进入播放页观看视频，页面 点击退出登录即可注销。内容管理模块包括了视频展示 部分以卡片形式排列的视频封面及标题，页面顶部包含 平台 logo、搜索框以及用户头像，搜索框可以快速检索 含有关键字的视频，页面左侧区域为菜单栏，将视频类 型按电影、电视剧、学习、综艺、新闻进行分类，可以 通过类别快速检索视频；点击视频卡片进入播放页，播 放器播放视频，视频播放器可以切换暂停与播放状态、

可以调整视频的声音大小、可全屏播放视频、可下载视频、

可以在小窗模式下播放视频。点击播放器下方灰色的心 形收藏按钮，当前视频就可以被显示在个人中心的收藏 视频栏；个人中心界面能够查看或编辑用户的个人信息 以及将用户收藏的视频展示到此处。

图 1 功能模块图

5 模块开发

用户点击转到注册，跳转到注册界面，在输入框中 填写账号密码的信息后点击注册按钮。点击注册按钮时，

会先判断输入框是否填写了信息，当输入框的内容不为 空时，再将输入框的内容传递给服务器并发送请求。服 务器请求成功则把输入框的内容保存到数据库，并在前 端渲染注册成功的提示。服务器请求失败则在前端渲染 注册失败的提示。

5.1.2 用户登录

用户点击转到登录，跳转到登录界面，在输入框输 入账号密码的信息后点击登录按钮。输入框通过 v-model 语句进行数据双向绑定，点击登录按钮时，会先判断输 入框填是否填写了信息，当输入框的内容不为空时，再

202 Computer system network and elecommunications 将输入框的内容传递给服务器并发送请求。服务器请求

成功则把输入框内容与数据库保存的内容相比对，比对 成功则提示登录成功并跳转到首页。服务器请求失败或 者比对失败则在前端渲染登录失败的提示。

5.1.3 注销

用户点击菜单栏的退出登录按钮，注销登录的状态，

页面跳转到未登录的首页。

5.2 内容管理模块 5.2.1 首页视频展示

首页（ 如图 2 所示）作为 用户进 入页面的 第一场 景，需要有清晰明了的色彩设计以及分区设计。色彩可 以使界面更灵动，合理利用色彩的明度值、对比度和饱 和度等属性 , 可以很好的展现软件图标、按钮等功能，

提高软件的适用性和舒适性^[2]，使用户更愿意继续停留 在页面。更重要的是，对于大多数色觉障碍人士，蓝色 依然可以被辨识，因此系统使用蓝色 rgb(87,156,247) 作为按钮及关键文字的颜色。以带有淡蓝色相的灰白色 rgb(241,243,245) 作为界面的背景颜色，使界面更具有 层次感。^[3]

结合 Element UI 将页面划分为顶部区域、左侧区域 以及主体区域。主体区域是排列的视频卡片，卡片中显 示了视频封面以及视频标题。卡片式设计能够突出重点 内容，增强视觉统一性，能够帮助用户快速简历视觉流，

提高用户浏览的效率^[4]。点击视频卡片在新标签页打开 对应视频的播放页。

图 2 首页视频展示 ５．２．２ 视频检索

用户在顶部区域的搜索框输入想查找的视频并点击 搜索按钮，后台查询信息，展示含有关键字的视频卡片，

如果搜索不到关键字，则页面提示没有相关内容。用户 在左侧菜单栏点击不同分类的按钮，页面主体部分会通 过路由显示同类型的视频卡片。

搜索框使用 v-model 将输入的值与其需要传递的值 进行双向数据绑定，然后通过 $axios.get 将搜索框的内 容传到后端，后端查询数据库中包含输入框内容的信息，

并用返回码表示查询得到的结果。前端接收到对应的返 回码后渲染页面，显示相关视频。后端搜索视频代码如下。

// 搜索视频

router.get(‘/findvideo’, (req, res) => { let vid = req.query.vid // 视频 id let title = req.query.title // 视频标题 sql = `SELECT * FROM video WHERE video.vid =

‘${vid}’ and video.title LIKE ‘%${title}%’`

console.log(sql);

db.query({

sql: sql

}, (err, results, fields) => { console.log(results)

res.send(results) })

})

5.2.3 视频播放

播放页包含一个播放器，点击播放按钮时，后台向 服务器发送请求，请求成功就开始播放对应的视频。播 放器可以点击三角按钮切换暂停与播放状态；拖动进度 条能够定位到视频的任意进度；拖动音量条调整声音的 大小；点击全屏按钮能够以全屏幕尺寸播放视频；点击 画中画模式的按钮能够在小窗模式下播放视频；点击下 载能够下载当前观看的视频；点击灰色心形按钮就能收 藏当前视频，再次点击心形则取消收藏，通过心形颜色 来区分用户是否收藏了该视频。右侧是推荐视频，点击 能够跳转到另一个视频的播放页。

5.3 收藏模块 5.3.1 添加收藏

在播放页，用户在观看视频时如果对当前视频感兴 趣，可以点击播放器右下角灰色的心形收藏按钮，后台 向服务端发送请求。若服务器请求成功，即可收藏当前 视频，将当前视频保存到数据库的收藏表单中，并将心 形变为红色，在个人中心的收藏视频下方可以显示当前 视频。

5.3.2 取消收藏

点击红色状态的心形按钮则取消收藏，后台向服务 端发送请求，若服务器请求成功，则在数据库的收藏表 单中删除此视频。

5.3.3 查看收藏

在个人中心的收藏视频栏可以迅速找到用户收藏的 视频，点击菜单栏的收藏视频可以分类展示已收藏的视 频。点击视频卡片跳转到播放页观看。

收藏功能是为了解决针对一些特定的内容，用户产 生了未来需要使用的念头，在未来却无法顺利或快速的 把上次看过的内容给找出来的问题^[5]。有了收藏功能，

用户可以很方便的存储和浏览感兴趣的视频。

5.4 个人中心模块

个人中心展示了用户头像、用户昵称、用户简介、

收藏视频等信息。点击修改资料，在需要修改的信息处 点击编辑可修改个人信息，前端获取输入框的内容并传 到后端，后端使用语句 UPDATE user SET username =

?,WHERE id = ${req.body.id} 修改数据库对应的信息，

再给前端返回两个值表示修改成功或失败，前端通过这 两个值渲染修改成功或修改失败的提示文字。

6 结语

随着互联网的发展以及网络视频的快速兴起，通过 视频获取丰富的信息已经成为常态。观看视频是解压、

娱乐，放松身心的方式，也是学习知识、了解时事新闻 的媒介。视频的音画可以刺激感官，从而让人更专注地 汲取视频所传达的信息。本文基于 MVVM 架构开发的视频 播放平台，页面雏形和大部分功能已经基本实现，满足

2021【3 】3

ISSN:2661-3719(Print); 2661-3727 (Online) 计算机系统网络和电信 203

了用户的基本需求，通过 Vue.js 框架开发不仅可以合理 布局，带来更加便捷高效的操作，还可以灵活地维护数 据更新内容，提高用户粘性，从而提高视频播放平台的 价值。

【参考文献】

[1] 时月月 . 视频处理平台的设计与实现 [D]. 北京 交通大学 ,2020.

[2] 沈 强 . 浅 谈 软 件 UI 的 色 彩 情 感 [J]. 大 众 文 艺 ,2016(14):98-99.

[3]HarmonyOS Developer. 文档中心 - 通用基础设 计 - 色彩 .

[4] 闫文喆 . 卡片在移动 UI 设计中的运用研究 [J].

西部皮革 ,2020,42(08):41-42.

[5] 台灯少女 . 教育学习类产品中的“收藏”功能 分析 . 产品人的结构化思考 .