随着互联网与移动互联网迅速普及，网络上的电影娱乐信息数量相当庞大，人们对获取感兴趣的电影娱乐信息的需求越来越大,个性化的基于Vue框架实现云观影应用系统成为一个热门。然而电影信息的表示相当复杂，因此需要开发一个基于Vue框架实现云观影应用系统设计与实现的电影信息库。
该系统采用了B/S结构，将所有业务模块采用以浏览器交互的模式，选择MySQL作为系统的数据库，开发工具选择Springboot来进行系统的设计。基本实现了基于Vue框架实现云观影应用系统应有的主要功能模块，本系统有管理员、用户两大功能模块，管理员：主页、公共管理、用户管理、论坛管理、资讯管理、电影分类、电影信息、电影评分、退出；用户：首页、电影交流、网站公告、电影资讯、电影信息、个人中心等操作，不仅优化了用户体验，还大大提高了管理效率。同时，系统还提供了个性化的电影推荐功能，根据用户的观影历史和喜好，智能推荐符合他们口味的电影，实现了对于管理员与用户双赢，为用户提供更加优质的服务。
关键词：基于Vue框架实现云观影应用系统设计与实现； B/S结构；
With the rapid popularization of the Internet and mobile Internet, the number of movie entertainment information on the Internet is quite large, and people's demand for interested movie entertainment information is increasing, and personalized film recommendation system has become a popular one. However, the representation of film information is quite complex, so it is necessary to develop a film information database based on the design and implementation of cloud film viewing application system based on Vue framework.
The system adopts the B / S structure, adopts all business modules in the mode of browser-based interaction, selects MySQL as the database of the system, and the development tool selects Springboot to conduct the design of the system. The main functional modules of the movie recommendation system are basically realized. The system has two functional modules, administrator and user: home page, public management, user management, forum management, information management, information management, movie classification, movie information, movie score and exit; user: home page, movie communication, website announcement, movie information, movie information, personal center, which not only optimizes the user experience, but also greatly improves the management efficiency. At the same time, the system also provides personalized movie recommendation function, according to the users' viewing history and preferences, intelligent recommendation of movies in line with their tastes, to achieve a win-win situation for administrators and users, to provide users with better services.
Key words: design and implementation of cloud viewing application system based on Vue framework;;B / S structure;
目 录
第1章 前 言
1.1 研究背景
随着云计算技术的快速发展和普及，云服务已逐渐渗透到人们生活的方方面面，其中，云观影作为一种新兴的观影方式，受到了越来越多用户的青睐。云观影应用系统通过云计算平台为用户提供丰富的影片资源、流畅的观影体验以及便捷的社交互动功能，极大地满足了用户的观影需求。
Vue框架作为一种轻量级、高性能的前端框架，凭借其简洁的API、灵活的组件化设计和高效的机制，在前端开发领域得到了广泛应用。基于Vue框架实现云观影应用系统，不仅能够提升系统的开发效率和可维护性，还能够为用户提供更加友好、交互性强的观影界面。
本文旨在研究基于Vue框架的云观影应用系统的设计与实现。首先，我们将对云观影应用系统的需求进行深入分析，明确系统的功能模块和关键技术点。然后，我们将探讨如何利用Vue框架的特性和优势，实现系统的前端界面开发，包括用户登录、影片展示、播放控制、社交互动等功能的实现。同时，我们还将关注系统的性能优化和用户体验提升，通过合理的架构设计和代码优化，确保系统的高效运行和稳定性，我们将采用理论与实践相结合的方法，通过案例分析、技术调研和实验验证等手段，不断完善和优化系统的设计方案和实现细节。我们希望通过本文的研究，能够为云观影应用系统的开发提供有益的参考和借鉴，推动云观影技术的进一步发展和应用。
1.2 研究现状
经过调查，目前现代人的生活节奏加快，生活压力也在逐渐的增加，人们可以使用智能产品的功能给人们带来的便利，随着人们的网上管理不断的增加，越来越多的人们开始加入了网上管理的大潮中，但是我国对于网上电影推荐信息管理效果低下，而且出错率也很高。因此大家都在寻找一款更加专业化的基于Vue框架实现云观影应用系统。
随着基于Vue框架实现云观影应用系统的不断出现，用户需求的不断增多，云观影应用系统也不断的得到壮大，本系统主要根据用户和管理人员的实际需要，方便用户利用互联网实现对基于Vue框架实现云观影应用系统的了解、对比，甚至是交易。同时让管理者可以通过这个系统对用户实际需求以及各品牌电影的所有了解和管理情况进行管理。设计该系统主要目的是为了方便人们的对各种类型的电影的横向对比，帮助人们节省时间，而且减少管理者资金的投入。
1.3 系统开发目标
对于网站的前台设计，要保证主界面的整洁有序，能够抓住人的眼球，不会产生视觉疲劳，更重要的是，带给人容易操作的直观感受，这样才能留住用户去进行使用，增加三分热度的延续期。在系统的后台设计上，要采取非常简洁有效的技术，开发方便的同时，便于以后的维护。我们不但要确保所有的功能都能够满足用户的需求，用户还要能自己主动通过网站去实现想要的操作，而管理者的简单通过网站对用户的需求情况进行了解和管理。为达到这一目的，提出以下目标：
（1）用户可以实时查看最新的电影信息，以及相关资讯；
（2）用户可以对比各大电影的信息，选择自己较为满意的电影；
（3）用户可以通过论坛互相交流观看电影心得；
（4）管理员可以在后台方便管理前台网页的各种信息；
（5）管理员可以方便查询、汇总用户的使用状态。
第2章 技术与原理
2.1 开发技术
本系统前端框架采用了比较流行的渐进式JavaScript框架Vue.js。使用Vue-Router和Vuex实现动态路由和全局状态管理,Ajax实现前后端通信，Element UI组件库使页面快速成型。后端部分：采用springboot作为开发框架，同时集成MyBatis、Redis等相关技术。
2.2 JAVA技术
Java语言是目前使用率最高的一个语言类程序，并且他的代码还是开源的，任何的软件开发者都可以进行使用，目前已经在人类计算机编程语言发展史上产生了深远影响。所以Java语言是很成熟的，将他应用到我们的系统的开发中是不错的选择，而且由于常见所以绝大多数的人们都可以操作。
Java语言具有非常多种的特性，他的代码编写非常的简单，并且有多种编写方式，他有很好的面向对象性，而且他对使用的平台没有任何的要求，所有的平台都可以进行操作，他的安全性能也很高，因此他非常适合该系统的开发。
Java可以对平台没有任何的要求限制，可以在任何的平台上进行运行，不需要借助其他的语言编辑器来对代码进行编辑就可以开始运行了，这一点是非常好的，不仅我们在使用的时候更加的方便而且由于不需要借助其他的程序就能实现，所以可以节约我们的开发成本，而且经过Java编辑过的程序代码，可以直接进行使用，不需要重新编译，因此它是非常便利的，而且程序的运用不需要有专业的技术就可以运行了，为软件开发提供了很大的可行性。
2.3 MySQL数据库
mysql数据库具有很多的优点，他操作起来非常的简单，只需要编写一小段代码就可以实现相应的功能，而且编写出的代码可以在任何的平台下进行使用，对使用平台没有任何的要求，因此任何的软件开发人员都可以利用mysql数据库来进行系统的开发设计，同时他也可以为软件开发节省了很多的开销，mysql数据库由于存储量大、操作简单。功能强大因此将他最为该系统的数据存储是完全可以的。
mysql数据库是一个开放的架构，任何软件开发员都可以进行使用，随着计算机网络的不断发展，MySQL数据库也在功能方面不断的进行提升，也更加适应所有的系统的开发，我们在对数据库进行操作的时候，是非常简单易上手的，我们只需要编写一小段的代码就可以实现相应的功能，而且编辑出的代码可以在任何的平台上使用，不需要在进行二次的编译。由于MySQL数据库具有以上非常多的优点，我们将它最为数据库的首选应用到系统的开发中，由于他的体积非常小，开发的成本也非常的低，所有受到很多软件开发者的喜欢，被更多的运用到系统的开放中，所以本系统也是利用MySQL数据库来对所有的数据进行存储和编辑。
2.4 B/S结构
B/S（浏览器/服务器）结构是目前使用最多的结构模式，它可以使得系统的开发更加的简单，好操作，而且还可以对其进行维护。使用该结构时只需要在计算机中安装数据库，和一些很常用的浏览器就可以了。浏览器就会与数据库进行信息的连接，可以实现很多的功能，B/S结构是可以直接进行使用的，而且B/S结构在使用中极大的减少了工作的维护。基于B/S的软件，所有的数据库之间都是相互独立的，因此是非常安全的。因为基于B/S结构可以清楚的看到系统正在处理的业务，并且能够及时的让管理人员作出决策，这样就可以避免学校的损失。B/S结构的基本特点是集中式的管理模式，用户使用系统生成数据后，这些数据就可以存储到系统的数据库中，方便日后能够用到，这样就可以满足人们的所有的需求。
图2-1 B/S模式三层结构
第3章 需求分析
3.1 需求分析
开发系统的过程中，去调查用户的功能诉求，对需要存在的功能进行需求分析是特别重要的，且对于系统的开发有着实际的意义，设计基于Vue框架实现云观影应用系统通过对用户的需求进行分析，结合实际情况进行开发研究，对用户的所有需求做出一个完整的基本的框架，然后一步一步的完成、实现。需求分析可以为系统的开发提供一个目标，只有按照这个目标进行开发设计，才能进行完整的开发，这样设计出的系统才有使用的意义，才能在竞争激烈的软件市场中生存，才能真正的帮助人们解决问题，提高实际的效率。
3.2 系统可行性分析
本系统采取的是目前应用最广泛的程序进行技术的支持，主要的技术支持是java语言，他作为一个相当成熟的语言程序，在众多的软件开发中起着很大作用。而且用java语言编辑出来程序可以直接运行，不需要借助其他的翻译器进行翻译。所以在技术方面是完全可以行的。
本项目开发的初衷就是为了节约，因为系统开发的所有过程都是我自己开发的我，而且在开发过程使用到的技术也都是市面上常见的容易操作的，所以不需要请专业的人士花资金来进行系统的开发，而且在项目开发的过程中我也学到了更多的知识。开发的这个软件可以在网络中进行免费的下载，对计算机的软硬件没有很高的要求，因此这个项目是非常实惠的，在经济方面是完全可性的。
操作可行性也就是系统的可用性，一个系统的操作是否容易决定着这个系统的使用度，在系统的操作方面的设计我都是采取简洁易懂的方式，操作的整个菜单界面整齐有序，所有的功能都有序的排列，不会出现重叠或者需要转换的现象，用户想要哪方面的操作都可以直接进行操作，所以该系统任何人都可以进行操作，不需要有相关专业的技术这样用户在操作起来就容易很多。
3.3 项目设计目标与原则
1、关于基于Vue框架实现云观影应用系统的基本要求
（1）功能要求：管理员可以对所有的用户进行查看管理，可以对信息进行管理，可以及时的查看管理的情况，还可以对评论进行查看和管理等功能模块。
（2）性能：因为电影推荐中有很多的信息需要存储，因此对于系统的存储量有很大的要求，需要有一个强大的数据库的支持才能确保所有的信息都能安全稳定的进行存储。
（3）安全与保密要求：用户都必须通过管理员审核才能进入系统。
（4）环境要求：支持Windows系列、Vista系统等多种操作系统使用。
2、开发目标
基于Vue框架实现云观影应用系统的主要开发目标如下：
（1）用户可以实时查看最新的电影信息，以及相关资讯；
（2）用户可以对比各大电影的信息，选择自己较为满意的电影；
（3）用户可以通过评论互相交流观看电影心得；
（4）管理员可以在后台方便管理前台网页的各种信息；
3、设计原则
本实现云观影应用系统采用Java技术，Mysql数据库开发，充分保证了系统稳定性、完整性。
（1）系统效率：由于是云观影应用系统，因此就需要系统的效率是非常高的，并且可以支持很多人同时进行系统的使用。
（2）界面简洁清晰：系统界面要简单有序，所有的功能一目了然。
（3）储存性高：因为是实现云观影应用系统，所以就会在数据库要求上比较严格，信息录入的比较多，而且丰富复杂， 这就需要一个强大的数据库来存放更多的数据和保证数据的时时性。
（4）易学性：系统的设计一定要简单，使得人们使用起来非常好的顺手。
（5）稳定性需求：该系统在使用过程中必须保持稳定，不要出现卡顿、模糊等情况。
（6）稳定性：由于是实现云观影应用系统，因此系统运行必须要十分的稳定。
3.4 系统用例分析
云观影应用系统中普通用户角色用例图如图3-1所示：
图3.1 普通用户角色用例图
云观影应用系统中管理员角色用例图如图3-2所示：
图3.2管理员角色用例图
3.5 系统流程分析
用户需要拥有属于自己的账号和密码，且必须正确，这样才能顺利登录到系统中。进入网站后，用户可以自行查询各种电影，在自己满意的电影的详情页面的最后，可以直接选择购买操作。具体流程如下图3-3所示：
图3-3用户操作流程图
为了保证系统的安全性，要使用本系统对系统信息进行管理，必须先登陆到系统中。其具体登录流程图如图3-4所示：
图3-4系统操作流程图
第4章 架构设计
4.1 系统体系结构
基于Vue框架实现云观影应用系统的结构图4-1所示：
图4-1 系统结构
登录系统结构图，如图4-2所示：
图4-2 登录结构图
系统结构图，如图4-3所示：
图4-3 系统结构图
4.2 数据库实体设计
数据库的功能就是对系统中所有的数据进行存储和管理。所有的数据可以在数据库中产时间的进行存储，方便用户的使用。而且所有的数据库中的数据也应该具有一定的共享性，任何的系统可以对一些数据进行使用，同时还应该保持一定的独立性，每一个数据库中的数据都有很强的安全性，可以被很好的存放到数据库，没有进行身份的验证是不能对这些数据进行查看和使用的。数据库的设计需要明确每一个实体之间的联系，系统的E-R图如下图所示：
图4-4用户管理实体属性图
电影信息管理实体属性图如图4-5所示。
图4-5电影信息管理实体属性图
4.3 数据库表设计
当基于Vue框架实现云观影应用系统在运行的时候，数据库要能确保自己的独立性，想要哪部分的数据就选择相应的设置选项，对应的数据就会以表格的形式展现出来。当对这一个功能进行设置，他就会与数据库进行连接，会在对话框中弹出相应的数据源。
| 编号 |
名称 |
数据类型 |
长度 |
小数位 |
允许空值 |
主键 |
默认值 |
说明 |
| 1 |
token_id |
int |
10 |
0 |
N |
Y |
临时访问牌ID |
|
| 2 |
token |
varchar |
64 |
0 |
Y |
N |
临时访问牌 |
|
| 3 |
info |
text |
65535 |
0 |
Y |
N |
||
| 4 |
maxage |
int |
10 |
0 |
N |
N |
2 |
最大寿命：默认2小时 |
| 5 |
create_time |
timestamp |
19 |
0 |
N |
N |
CURRENT_TIMESTAMP |
创建时间： |
| 6 |
update_time |
timestamp |
19 |
0 |
N |
N |
CURRENT_TIMESTAMP |
更新时间： |
| 7 |
user_id |
int |
10 |
0 |
N |
N |
0 |
用户编号: |
| 编号 |
名称 |
数据类型 |
长度 |
小数位 |
允许空值 |
主键 |
默认值 |
说明 |
| 1 |
article_id |
mediumint |
8 |
0 |
N |
Y |
文章id：[0,8388607] |
|
| 2 |
title |
varchar |
125 |
0 |
N |
Y |
标题：[0,125]用于文章和html的title标签中 |
|
| 3 |
type |
varchar |
64 |
0 |
N |
N |
0 |
文章分类：[0,1000]用来搜索指定类型的文章 |
| 4 |
hits |
int |
10 |
0 |
N |
N |
0 |
点击数：[0,1000000000]访问这篇文章的人次 |
| 5 |
praise_len |
int |
10 |
0 |
N |
N |
0 |
点赞数 |
| 6 |
create_time |
timestamp |
19 |
0 |
N |
N |
CURRENT_TIMESTAMP |
创建时间： |
| 7 |
update_time |
timestamp |
19 |
0 |
N |
N |
CURRENT_TIMESTAMP |
更新时间： |
| 8 |
source |
varchar |
255 |
0 |
Y |
N |
来源：[0,255]文章的出处 |
|
| 9 |
url |
varchar |
255 |
0 |
Y |
N |
来源地址：[0,255]用于跳转到发布该文章的网站 |
|
| 10 |
tag |
varchar |
255 |
0 |
Y |
N |
标签：[0,255]用于标注文章所属相关内容，多个标签用空格隔开 |
|
| 11 |
content |
longtext |
2147483647 |
0 |
Y |
N |
正文：文章的主体内容 |
|
| 12 |
img |
varchar |
255 |
0 |
Y |
N |
封面图 |
|
| 13 |
description |
text |
65535 |
0 |
Y |
N |
文章描述 |
| 编号 |
名称 |
数据类型 |
长度 |
小数位 |
允许空值 |
主键 |
默认值 |
说明 |
| 1 |
type_id |
smallint |
5 |
0 |
N |
Y |
分类ID：[0,10000] |
|
| 2 |
display |
smallint |
5 |
0 |
N |
N |
100 |
显示顺序：[0,1000]决定分类显示的先后顺序 |
| 3 |
name |
varchar |
16 |
0 |
N |
N |
分类名称：[2,16] |
|
| 4 |
father_id |
smallint |
5 |
0 |
N |
N |
0 |
上级分类ID：[0,32767] |
| 5 |
description |
varchar |
255 |
0 |
Y |
N |
描述：[0,255]描述该分类的作用 |
|
| 6 |
icon |
text |
65535 |
0 |
Y |
N |
分类图标： |
|
| 7 |
url |
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
