如何使用 Vue 实现仿豆瓣电影查找功能的页面设计？

前言

随着互联网的快速发展，各种电子商务网站和应用程序被广泛应用于人们的日常生活中，为人们提供了许多便利。而针对电影方面的网站和应用程序，最著名的当属豆瓣电影了。本篇文章将以仿豆瓣电影的查找功能为例，介绍如何使用 Vue 实现该页面设计。该页面设计的主要功能包括：功能区域、条件筛选、电影列表、分页等。

一、功能区域

功能区域是指将一些常用功能集中在一个区域内，方便用户快速访问，比如登录、注册、我的收藏等。如下图所示，该功能区域主要包括网站标题、搜索框和登录注册按钮。

具体实现可以采用 Vue 的组件化开发方式，将功能区域封装成一个组件，在父组件中引入并渲染。HTML 代码示例：

<template>
  <div class="header-top">
    <div class="header-wrap">
      <h1 class="logo"><a href="#">豆瓣电影</a></h1>
      <div class="search-bar">
        <input type="text" placeholder="电影、影人、影院、电视剧">
        <span class="search-btn">搜索</span>
      </div>
      <div class="user-info">
        <a href="#">登录</a>
        <span class="split-line">|</span>
        <a href="#">注册</a>
      </div>
    </div>
  </div>
</template>

CSS 代码示例：

.header-top {
  height: 40px;
  line-height: 40px;
  background-color: #42b983;
}

.header-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}

.logo {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  a {
    color: #fff;
    text-decoration: none;
  }
}

.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  input {
    flex: 1;
    height: 30px;
    padding: 0 10px;
    border: none;
    border-radius: 15px;
    background-color: #f0f0f0;
    outline: none;
  }
  .search-btn {
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
    padding: 0 10px;
    border-radius: 15px;
    background-color: #fff;
    cursor: pointer;
  }
}

.user-info {
  margin-left: 20px;
  a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
  }
  .split-line {
    margin: 0 10px;
    color: #fff;
  }
}

二、条件筛选

条件筛选是指用户可以通过选择不同的条件来过滤搜索结果，比如按照地区、年份、类型等条件进行筛选。如下图所示，该条件筛选主要包括地区、年份、类型和排序方式。

具体实现可以采用 Vue 的响应式数据绑定和计算属性的方式，在数据变化时重新渲染页面。HTML 代码示例：

<template>
  <div class="filter-bar">
    <div class="filter-item">
      <span>地区：</span>
      <select v-model="filter.region">
        <option value="">全部</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="日本">日本</option>
        <option value="韩国">韩国</option>
      </select>
    </div>

    <div class="filter-item">
      <span>年份：</span>
      <select v-model="filter.year">
        <option value="">全部</option>
        <option v-for="year in years">{{year}}</option>
      </select>
    </div>

    <div class="filter-item">
      <span>类型：</span>
      <select v-model="filter.type">
        <option value="">全部</option>
        <option v-for="type in types">{{type}}</option>
      </select>
    </div>

    <div class="filter-item">
      <span>排序：</span>
      <select v-model="filter.sort">
        <option value="score-desc">评分从高到低</option>
        <option value="score-asc">评分从低到高</option>
        <option value="time-desc">时间从近到远</option>
        <option value="time-asc">时间从远到近</option>
      </select>
    </div>
  </div>
</template>

JavaScript 代码示例：

<script>
  export default {
    data() {
      return {
        filter: {
          region: '',
          year: '',
          type: '',
          sort: 'score-desc'
        },
        years: [],
        types: ['剧情', '爱情', '喜剧', '动画', '纪录片']
      };
    },
    computed: {
      filteredMovies() {
        const { region, year, type, sort } = this.filter;
        let movies = this.movies;

        if (region) {
          movies = movies.filter(movie => movie.region.includes(region));
        }
        if (year) {
          movies = movies.filter(movie => movie.year === year);
        }
        if (type) {
          movies = movies.filter(movie => movie.type.includes(type));
        }

        switch (sort) {
          case 'score-desc':
            movies = movies.sort((a, b) => b.score - a.score);
            break;
          case 'score-asc':
            movies = movies.sort((a, b) => a.score - b.score);
            break;
          case 'time-desc':
            movies = movies.sort((a, b) => new Date(b.time) - new Date(a.time));
            break;
          case 'time-asc':
            movies = movies.sort((a, b) => new Date(a.time) - new Date(b.time));
            break;
        }

        return movies;
      }
    },
    mounted() {
      this.years = Array.from(new Set(this.movies.map(movie => movie.year)));
    }
  };
</script>

三、电影列表

电影列表是指搜索结果根据条件筛选后展示的电影列表，包括电影海报、电影名称、电影评分等。如下图所示。

具体实现可以采用 Vue 的列表渲染和动态绑定的方式，代码示例：

<template>
  <div class="movie-list">
    <div class="movie-item" v-for="movie in filteredMovies" :key="movie.id">
      <div class="movie-poster">
        <img :src="movie.poster" alt="">
      </div>
      <div class="movie-info">
        <h3 class="movie-title">{{movie.title}}</h3>
        <p class="movie-score">评分：{{movie.score}}</p>
        <p class="movie-genre">类型：{{movie.type}}</p>
        <p class="movie-desc">简介：{{movie.desc}}</p>
      </div>
    </div>
  </div>
</template>

CSS 代码示例：

.movie-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.movie-item {
  width: calc(25% - 20px);
  margin: 10px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.movie-poster {
  height: 300px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.movie-info {
  padding: 10px;
  flex: 1;
}

.movie-title {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.movie-score {
  margin: 10px 0;
  color: #f60;
}

.movie-genre {
  margin: 0;
  color: #999;
}

.movie-desc {
  margin: 10px 0;
  color: #666;
}

四、分页

分页是指将搜索结果分成多个页面进行展示，每页展示一定数量的电影信息。如下图所示，该分页主要包括页码和上一页、下一页按钮。

具体实现可以采用 Vue 的计算属性和 v-for 指令，代码示例：

<template>
  <div class="page-bar">
    <div class="page-item" :class="{active: page === currentPage}" v-for="page in pageCount" :key="page">
      <a href="#">{{page}}</a>
    </div>

    <div class="page-control">
      <span class="prev-page" :class="{disabled: currentPage === 1}" @click="toPrevPage">上一页</span>
      <span class="next-page" :class="{disabled: currentPage === pageCount}" @click="toNextPage">下一页</span>
    </div>
  </div>
</template>

JavaScript 代码示例：

<script>
  export default {
    computed: {
      currentPage() {
        return parseInt(this.$route.query.page || 1);
      },
      pageCount() {
        return Math.ceil(this.filteredMovies.length / 12);
      }
    },
    methods: {
      toPrevPage() {
        if (this.currentPage > 1) {
          this.$router.push(`?page=${this.currentPage - 1}`);
        }
      },
      toNextPage() {
        if (this.currentPage < this.pageCount) {
          this.$router.push(`?page=${this.currentPage + 1}`);
        }
      }
    }
  };
</script>

CSS 代码示例：

.page-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;
}

.page-item {
  margin: 10px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border-radius: 3px;
  a {
    color: #333;
    text-decoration: none;
  }
  &.active {
    background-color: #42b983;
    a {
      color: #fff;
    }
  }
}

.page-control {
  margin: 10px;
  display: flex;
  align-items: center;
  .prev-page,
  .next-page {
    margin: 0 10px;
    padding: 5px 10px;
    background-color: #42b983;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
  }
  .disabled {
    background-color: #f0f0f0;
    color: #999;
    cursor: default;
  }
}

五、总结

本篇文章主要介绍了使用 Vue 实现仿豆瓣电影查找功能的页面设计，包括功能区域、条件筛选、电影列表、分页等。这些功能虽然简单，但是涉及到了 Vue 的组件化开发、响应式数据绑定、列表渲染、动态绑定等重要知识点。在学习 Vue 的过程中，应注重实践，多做项目，加深对 Vue 的理解和认识。