Vue+Element打造酷炫电影网站

2023-03-17 23:50:12

打造酷炫电影网站：Vue.js和Element UI强强联手

简介

电影爱好者们，准备好沉浸在视觉盛宴中吧！本文将带领您踏上一段激动人心的旅程，使用Vue.js和Element UI携手打造一个美轮美奂的电影网站。通过循序渐进的教程，您将逐步了解如何搭建网站框架，构建数据模型，并打造交互式的电影列表和详情页面。准备好了吗？那我们就开始吧！

构建网站框架

安装Vue CLI

首先，我们需要安装Vue CLI，它是一个命令行工具，可帮助我们轻松创建和管理Vue.js项目。在终端中运行以下命令：
```
npm install -g @vue/cli
```
创建项目

接下来，创建一个新的Vue.js项目：
```
vue create movie-website
```
安装Element UI

Element UI是一个功能强大的UI组件库，可为您的网站增添专业和现代感。让我们将其安装到项目中：
```
cd movie-website
npm install element-ui
```

集成Element UI

在您的main.js文件中，添加以下代码以集成Element UI：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

电影数据模型

创建电影模型

在src/models/movie.js文件中，定义一个电影数据模型：

export default class Movie {
  constructor(id, title, poster, description) {
    this.id = id;
    this.title = title;
    this.poster = poster;
    this.description = description;
  }
}

电影服务

创建电影服务

在src/services/movie.service.js文件中，定义一个电影服务类：

import axios from 'axios';

const API_URL = 'http://localhost:3000/movies';

export default class MovieService {
  static getAllMovies() {
    return axios.get(API_URL);
  }

  static getMovieById(id) {
    return axios.get(`${API_URL}/${id}`);
  }

  static createMovie(movie) {
    return axios.post(API_URL, movie);
  }

  static updateMovie(movie) {
    return axios.put(`${API_URL}/${movie.id}`, movie);
  }

  static deleteMovie(id) {
    return axios.delete(`${API_URL}/${id}`);
  }
}

电影组件

创建电影组件

在src/components/Movie.vue文件中，定义一个电影组件：

<template>
  <div class="movie">
    <img :src="movie.poster" alt="Movie Poster">
    <div class="movie-info">
      <h3>{{ movie.title }}</h3>
      <p>{{ movie.description }}</p>
    </div>
  </div>
</template>

<script>
import { Movie } from '../models/movie';

export default {
  props: {
    movie: {
      type: Movie,
      required: true
    }
  }
};
</script>

<style>
.movie {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.movie-info {
  margin-left: 10px;
}

h3 {
  font-size: 18px;
  font-weight: bold;
}

p {
  font-size: 16px;
}
</style>

电影列表组件

创建电影列表组件

在src/components/MovieList.vue文件中，定义一个电影列表组件：

<template>
  <div class="movie-list">
    <Movie v-for="movie in movies" :key="movie.id" :movie="movie"></Movie>
  </div>
</template>

<script>
import { MovieService } from '../services/movie.service';

export default {
  data() {
    return {
      movies: []
    };
  },
  mounted() {
    MovieService.getAllMovies().then(response => {
      this.movies = response.data;
    });
  }
};
</script>

<style>
.movie-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>

电影详情组件

创建电影详情组件

在src/components/MovieDetail.vue文件中，定义一个电影详情组件：

<template>
  <div class="movie-detail">
    <img :src="movie.poster" alt="Movie Poster">
    <div class="movie-info">
      <h3>{{ movie.title }}</h3>
      <p>{{ movie.description }}</p>
    </div>
  </div>
</template>

<script>
import { MovieService } from '../services/movie.service';

export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      movie: {}
    };
  },
  mounted() {
    MovieService.getMovieById(this.id).then(response => {
      this.movie = response.data;
    });
  }
};
</script>

<style>
.movie-detail {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.movie-info {
  margin-left: 10px;
}

h3 {
  font-size: 18px;
  font-weight: bold;
}

p {
  font-size: 16px;
}
</style>

整合与部署

整合组件

在src/App.vue文件中，整合您的电影列表和详情组件：

<template>
  <div id="app">
    <MovieList></MovieList>
    <MovieDetail v-if="selectedMovie" :id="selectedMovie"></MovieDetail>
  </div>
</template>

<script>
import MovieList from './components/MovieList.vue';
import MovieDetail from './components/MovieDetail.vue';

export default {
  components: {
    MovieList,
    MovieDetail
  },
  data() {
    return {
      selectedMovie: null
    };
  }
};
</script>