基于Vue的神影视频APP

最新推荐文章于 2024-10-28 15:18:39 发布

-Initiation

最新推荐文章于 2024-10-28 15:18:39 发布

阅读量2.4k

点赞数 53

文章标签： vue.js 音视频前端

本文链接：https://blog.csdn.net/m0_55709044/article/details/139213031

版权

本文介绍了一款基于Vue.js框架构建的神影视频APP，旨在创建一个类似淘票票电影的前端应用。该APP包含七个功能页面：电影、影院、我的、地区、热映、即将上映和查找。每个页面都有详细的功能描述，如电影页面可浏览上映和即将上映的电影，影院页面展示电影院位置和活动。开发环境包括VS Code、Node.js、npm和Vue脚手架，测试使用Google浏览器的开发者模式。

摘要由CSDN通过智能技术生成

需求说明：使用Vue脚手架进行搭建，页面简洁、精致，和一些常见的电影网站类似，例如支付宝中的“淘票票电影”。在项目中使用页面布局技术（表格，vue.js框架，DIV+CSS或者混合使用）进行页面设计，使网站功能齐全，界面美观大方，有一定的交互性。

功能分析：系统主要分为七个页面：分别是电影页面，影院页面，我的页面，地区页面，正在热映页面，即将上映页面和查找页面。

电影页面：作为程序默认的主页面，可以跳转到七个页面中的任一个页面，并可以在不切换movie目录的情况下浏览有什么电影正在上映和即将上映还有切换查找页面。
影院页面：可以浏览在哪些地方有电影院并且该电影院有什么活动。
我的页面:可以看到登录相关的样式和点击按钮。
地区页面;可以看到有哪些地区有相关电影。
正在热映页面：可以看到有哪些电影正在上映和电影的基本信息。
即将上映页面：可以看到有哪些电影即将上映和电影的基本信息。
查找页面：可以看到默认的查找页面。

2 程序概要设计

项目开发环境

编辑器VS code，Node.js，npm,vue脚手架，和测试浏览器Google(开发者模式)。

功能分析：系统主要分为七个页面：分别是电影页面，影院页面，我的页面，地区页面，正在热映页面，即将上映页面和查找页面。

电影页面：作为程序默认的主页面，可以跳转到七个页面中的任一个页面，并可以在不切换movie目录的情况下浏览有什么电影正在上映和即将上映还有切换查找页面。
影院页面：可以浏览在哪些地方有电影院并且该电影院有什么活动。
我的页面:可以看到登录相关的样式和点击按钮。
地区页面;可以看到有哪些地区有相关电影。
正在热映页面：可以看到有哪些电影正在上映和电影的基本信息。
即将上映页面：可以看到有哪些电影即将上映和电影的基本信息。
查找页面：可以看到默认的查找页面。

2 程序概要设计

项目开发环境

编辑器VS code，Node.js，npm,vue脚手架，和测试浏览器Google(开发者模式)。

电影页面：通过redirect属性确保重定向为程序默认的主页面，通过vue-route的component属性参数可以跳转到七个页面中的任一个页面，并可以在不切换movie目录的情况下浏览有什么电影正在上映和即将上映还有切换查找页面。
影院页面：通过HTML和css的设计确保页面能够正常显示页面内容不会错乱。
我的页面: 通过HTML和css的设计可以看到登录相关的样式和点击按钮。
地区页面;利用HTML和css的设计确保地区能够有层次的显示出来。
正在热映页面：利用HTML和css的设计确保看到有哪些电影正在上映和电影的基本信息。
即将上映页面：利用HTML和css的设计确保看到有哪些电影即将上映和电影的基本信息。
查找页面：利用前端相关属性确保可以看到默认的查找页面和图片。

图1.神影视频项目框架

程序框架整体采用组件来简化代码结构去降低代码冗余度和方便调试项目。

3 程序详细设计

本项目首先需要通过vue脚手架来搭建环境，具体环境的搭建如下

首先打开要创建的项目目录
然后打开cmd 窗口，先切换对应的磁盘，然后在窗口中输入cd D:\前端大作业命令（切换工作目录），按Enter键进入项目目录。
使用 vue create 语句创建项目，然后对项目进行命名，注意项目名称不要大写，否则无法创建。
按Enter键后，在提示的两种项目配置下选择自定义的配置，根据项目需要选择合适的模块按Enter键。（本项目选择Babel,Router,Vuex,Css Pre-processors）。
模块选择完，按Ender键，输入y键使用history模式的路由再按下Ender键
接下来选择Sass/SCSS来作为预编译的CSS，然后选择“In package.json”,作为配置内容的写入位置。