vue.js 构建项目_使用Vue.js构建电影播放器（代码挑战5的解决方案）-CSDN博客

本文介绍了如何使用Vue.js创建一个电影播放器，详细讨论了为何选择Vue.js，基础HTML/CSS/JavaScript构建，使用组件和数据管理来实现功能，并提供了代码挑战的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue.js 构建项目

Last week, we got on the code challenge #5, in which we were required to create a simple movie player using data of movies from a provided API.

上周，我们遇到了代码挑战＃5 ，其中要求我们使用提供的API中的电影数据创建一个简单的电影播放器。

You can check out awesome entries for the challenge using the hashtag #scotchchallenge on twitter or check the comments under the post. In this post, we shall be solving the challenge using Vue.js.

您可以在Twitter上使用#scotchchallenge标签来查看挑战的真棒条目，或查看帖子下的评论。在本文中，我们将使用Vue.js解决挑战。

为什么选择Vue.js？ ( Why Vue.js? )

Vue is a popular and fast-growing progressive JavaScript framework that offers the much-required flexibility and simplicity to build out awesome user interfaces.

Vue是一种流行且快速增长的渐进式JavaScript框架，它提供了构建出色的用户界面所需的灵活性和简便性。

基地 ( The Base )

The base code consists of HTML and CSS, written to structure and style the movie player.

基本代码由HTML和CSS组成，用于构造和设置影片播放器的样式。

HTML (HTML)

The app is structured to have a container div in which we place the video display and the thumbnails to select the video as separate child divs.

该应用程序的结构具有容器div，我们在其中放置视频显示和缩略图以选择视频作为单独的子div。

<div class="videos-container" id="app">
  <div class="video-player">
  </div>
  <div class="video-choices">
  </div>
</div>

CSS (CSS)

In styling the app, CSS was used with the SASS variant and Flexbox was mostly used to position the elements accurately.

在设计应用程序样式时，CSS与SASS变体一起使用，而Flexbox主要用于精确定位元素。

body {
  background: #1e3c72;
  background: linear-gradient(to right, #1e3c72, #2a5298);
  padding: 30px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.videos-container {
  background: #333;
  padding: 10px;
  box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.25);
  color: #FFF;
}

.video-player   {
  min-height: 300px;
  width: 100%;
  background: #000;
  margin-bottom: 10px;
}

.video-choices  {
  display: flex;

  :not(:last-child) {
    margin-right: 5px;
  }

  img {
    height: 100px;
  }  
}
.poster{
    float: left;
 }
.thumbnails{
  display: flex;
  justify-content: left;
}

JavaScript (JavaScript)

For the challenge, we were provided with an API containing a list of movies and data related to each of them.

对于挑战，我们提供了一个API，其中包含电影列表和与每个电影相关的数据。

const api= "https://scotch-mvplayer-api.herokuapp.com/api/v1"

As earlier stated Vue was used in buiding out the movie player interface because of its flexibility with handling data and passing this data to the DOM. In building this player, we split each part - the movie display and the thumbnail, into components to keep our code tidy and also for probable reusability.

如前所述，由于Vue具有处理数据并将此数据传递到DOM的灵活性，因此被用于构建电影播放器界面。在构建此播放器时，我们将每个部分（电影显示和缩略图）划分为多个组件，以保持代码整洁并确保可能的可重用性。

组成部分 (The Components)

The first component created was the <video-frame> component.

创建的第一个组件是<video-frame>组件。

const videoTag = {
  template: `
    <iframe
            allowFullScreen
            frameborder="0"
            height="376" :src="source.trailer"
              style="width: 100%; min-width: 750px"
            />
`,
  props: ["source"]
};

In the component, we defined the template as well as stated all props used by the component.

在组件中，我们定义了模板，并说明了组件使用的所有道具。

Props are used to pass data from parent components to child components in Vue applications.

道具用于在Vue应用程序中将数据从父组件传递到子组件。

The component's template consists of an iframe with which we shall embed all video links.

该组件的模板包含一个iframe ，我们将使用该iframe嵌入所有视频链接。

Next, we created the <video-thumbails> component to display all thumbnail images for each movie.

接下来，我们创建了<video-thumbails>组件，以显示每个电影的所有缩略图。

const thumbnail = {
  template: `
  <div class="thumbnails">
 <div v-for="movie in movies">
    <div class="poster" @click="changeCurrent(movie)">
      <img :src="movie.poster" height="200"alt="">
    </div>
  </div>
  </div>
`,
  props: ["movies"],
  methods: {
    changeCurrent(movie) {
      this.$emit('choose-movie', movie)
    }
  }
};

The <video-thumbnails> component is an object containing a template, props declaration and a list of methods utilized in the compoenent.

<video-thumbnails>组件是一个对象，其中包含模板，道具声明和该组件中使用的方法列表。

In the component's template, we utilize the list rendering Vue directive v-for to render each thumbnail in a list with identical divs. In each thumbnail, the poster of each thumbnail is displayed and an event directive is used to specify a function to be called once the div of each thumbnail is clicked. We shall proceed to create this function.

在组件的模板中，我们利用列表渲染Vue指令v-for来渲染具有相同div的列表中的每个缩略图。在每个缩略图中，将显示每个缩略图的张贴者，并使用事件指令来指定单击每个缩略图的div后要调用的功能。我们将继续创建此功能。

In the methods object, we created a changeCurrent() function which takes an argument of the current movie clicked. In the function, a custom event - choose-movie is emitted to the parent element with a second argument which is the movie selected. So whenever a poster is clicked, the action is sent to the parent <video-thumbnails> div which is watching for any choose-movie event emitted by child components.

在methods对象中，我们创建了一个changeCurrent()函数，该函数接受单击的当前影片的参数。在该函数中，具有第二个参数（即所选choose-movie ）的自定义事件（ choose-movie会发送到父元素。因此，每当单击海报时，动作就会发送到父<video-thumbnails> div，后者正在监视子组件发出的任何choose-movie事件。

While props are used to pass data from parent to child components, $emit is used to send events/actions from the child component to the parent.

虽然prop用于将数据从父组件传递到子组件，但是$ emit用于将事件/动作从子组件发送到父组件。

管理数据 ( Managing Data )

We created a Vue instance to utilize the components created as well as fetch and manipulate required data.

我们创建了一个Vue实例，以利用创建的组件以及获取和操作所需的数据。

var app = new Vue({
  el: "#app",
  components: {
    "video-frame": videoTag,
    "video-thumbnails": thumbnail
  },
  data() {
    return {
      api: "https://scotch-mvplayer-api.herokuapp.com/api/v1",
      movies: [],
      current: null
    };
  },
  created() {
    axios.get(this.api).then(res => {
      this.movies = res.data;
      this.current = this.movies[0]
    });
  },
  methods: {
    handleChangeCurrent(movie) {
      this.current = movie
    }
  }
});

We created a Vue instance and mounted it on the DOM element with the app id. Next, we defined the components created and a data function which returns an object that holds state data. The data function can also be written explicitly as an object but using a function which returns an object allows room for the creation of variables in the data function. We can use these variables to manipulate the returned object's values.

我们创建了一个Vue实例，并将其安装在具有app ID的DOM元素上。接下来，我们定义了创建的组件和一个数据函数，该函数返回一个保存状态数据的对象。数据函数也可以显式地编写为对象，但是使用返回对象的函数可以为在数据函数中创建变量留出空间。我们可以使用这些变量来操纵返回对象的值。

In the data object, we created a key holding our API URL as its value, an empty movies array to hold the fetched movies and a current variable to hold a value for any selected movie.

在数据对象中，我们创建了一个将API URL作为其值的键，一个空的movies数组以保存所获取的电影，并创建了一个current变量以保存任何选定电影的值。

To fetch the data contained, we used Axios, a promised based HTTP client. The Vue lifecycle method created(), makes a get request using Axios to our API, fetches the movie data, and assigns this data to the movies array created previously. Also, the current movie to be displayed is set to the first movie in the list of movies fetched.

为了获取包含的数据，我们使用了Axios，这是一个基于承诺的HTTP客户端。 Vue生命周期方法created() ，使用Axios向我们的API发出get请求，获取电影数据，并将此数据分配给先前创建的movies数组。另外，将要显示的当前电影设置为获取的电影列表中的第一个电影。

To handle the selection of a new movie from the thumbnails, a function handleChangeCurrent is created. This function receives an argument of the current movie data selected and assigns the value of state data current to the selected movie data.

为了处理从缩略图中选择新电影的过程，将创建一个handleChangeCurrent函数。该函数接收当前选择的电影数据的参数和状态数据的值赋给current到所选择的电影数据。

Putting these together, our HTML script becomes:

将这些放在一起，我们HTML脚本变为：

<div class="videos-container" id="app">
  <div class="video-player">
    <video-frame :source="current"></video-frame>
  </div>
  <div class="video-choices">
    <video-thumbnails :movies="movies" v-on:choose-movie="handleChangeCurrent"></video-thumbnails>
  </div>
</div>

Notice how we passed current as props to the <video-frame> component with the source attribute. Also, the movies array is passed to the <video-thumbnails> component in the same manner and the custom event choose-movie triggers the handleChangeCurrent function.

请注意，我们如何使用source属性将current作为道具传递给<video-frame>组件。同样， movies数组以相同的方式传递到<video-thumbnails>组件，并且自定义事件handleChangeCurrent choose-movie触发handleChangeCurrent函数。

Here's the final product.

这是最终产品。

结论 ( Conclusion )

We built a minimal movie player using Vue. Features used include props, custom events, emits, and components. While completing this, feel free to make use of other frameworks or tools, let's look forward to the next awesome challenge. Happy coding!

我们使用Vue构建了一个最小的电影播放器。使用的功能包括道具，自定义事件，发射和组件。完成此操作后，请随时使用其他框架或工具，让我们期待下一个令人敬畏的挑战。编码愉快！