用Vue.js开发一个电影App的前端界面

最新推荐文章于 2024-07-23 17:06:34 发布

落叶无声9

最新推荐文章于 2024-07-23 17:06:34 发布

阅读量8.3k

点赞数 4

分类专栏：前端 Vue.js 开发文章标签： web框架 vue-js vue html5框架前端

本文链接：https://blog.csdn.net/mongo_node/article/details/78871575

版权

本文介绍如何使用Vue.js 2构建一个类似Netflix风格的电影流媒体Web界面。通过创建Vue实例，设置数据和路由，实现了电影介绍、页脚导航、电影组件以及收藏功能。文章还提供了代码示例和实际运行的链接。

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

用Vue.js开发一个电影App的前端界面

我们要构建一个什么样的App？

我们大多数人使用在线流媒体服务（如Netflix）观看我们最喜欢的电影或者节目。这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界面（见上图）。

最终的产品可以去这里找：https://codepen.io/itslit/full/mvvjzr。

尽管Bulma将作为应用的CSS框架，但是本文将主要集中在Vue.js的使用和浏览CSS式样，如果你想跟着学，我设置了一个可以作为开始学习的地方，所有自定义组合，初始数据对象和必要的需要通过CDN引用的外部库（如Vue-router等），都可以从https://codepen.io/itslit/pen/qmzrev获得。

App的基本需求

让我们记下这些基本需求：

介绍（登录）屏幕
页脚要允许用户可以选择自己想要的电影
一个电影屏幕，显示电影的标题/描述和并且有“立即播放”的提示。
一个电影预告片屏幕，在电影播放时显示电影的预告片。
可以将电影添加到收藏夹中

我们将创建应用程序，让页脚随时出现，而首页、电影和电影预告片将共享相同的屏幕。

数据

为了简单起见，我们将从一个简单/可靠的数据对象（对象）开始，它将作为我们所有组件的主存储器。这个存储对象将拥有我们所需要的所有电影信息，并将集中在克里斯托弗·诺兰的令人敬畏的电影。下面是数据对象的一部分：

const movies = {

"dunkirk": {

"id": 'dunkirk'

"title": 'Dunkirk',

"subtitle": 'Dunkirk',

"description": 'Miraculous evacuation of Allied soldiers from Belgium, Britain, Canada, and France, who were cut off and surrounded by the German army from the beaches and harbor of Dunkirk, France, during the Battle of France in World War II.',

"largeImgSrc": `url('https://image.tmdb.org/t/p/w780/fudEG1VUWuOqleXv6NwCExK0VLy.jpg')`,

"smallImgSrc': 'https://image.tmdb.org/t/p/w185/fudEG1VUWuOqleXv6NwCExK0VLy.jpg',

"releaseDate": 'July 21 2017',

"duration": '1hr 46min',

"genre": 'Action, Drama, History',

"trailerPath": 'https://www.youtube.com/embed/F-eMt3SrfFU',

"favorite": false

},

"interstellar": {

...

},

"the-dark-knight-rises": {

...

},

"inception": {

...

},

"the-prestige": {

...

}

}

让我们开始构建App

既然我们已经创建了主要的存储对象并理解了我们的所有组件是如何布局的，我们就可以开始构建接口了。

让我们首先创建Vue实例。我们将把实例挂载到DOM元素app，并返回全局存储的movies，作为我们的HTML中访问的实例数据对象的一部分。

const rootApp = new Vue({

el: '#app',

data() {

return {

movieChoices: movies

}

}

})

我们现在可以开始处理每个独立的组件了。

页脚部分

让我们从列出数据存储中所有电影的固定页脚部分开始。

<div id="app">

<section class="hero is-primary is-medium">

<div class="hero-foot">

<div class="columns is-mobile">

<div v-for="movieChoice in movieChoices" class="column">

<li class="movie-choice">

<img :src="`${movieChoice.smallImgSrc}`" class="desktop"/>

<p class="mobile">{ { movieChoice.subtitle }}</p>

</li>

</div>

</div>

</div>

</section>

</div>