user 前端movie/movieClassics.Vue实现和电影列表的渲染

已于 2022-06-06 16:10:28 修改
阅读量1.3k 收藏 13
点赞数 1
分类专栏： 个人项目分享 Vue 文章标签： vue.js 前端 javascript
于 2022-06-02 21:02:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61504367/article/details/125106381
版权
本文展示了如何使用Vue.js构建一个电影分类查询应用，包括顶部导航菜单、电影类型的筛选、按上映时间排序功能。组件化设计使得电影列表能够根据条件动态加载，同时实现了电影海报的悬停效果和详细信息预览。代码中使用了axios进行API调用，获取电影类别数据，并通过watch监听器实时更新查询条件。

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

界面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码

在这里插入图片描述

在这里插入图片描述

movie.vue

<template>
  <el-container>
    <el-header>
<!--      上端的菜单栏-->
      <el-menu :default-active="$route.path"
               class="nav-menu"
               mode="horizontal"
               :router="true"
               background-color="#545c64"
               text-color="#fff"
               active-text-color="#ffd04b">
        <el-menu-item :index="item.path" v-for="item in menuList" :key="item.id">{{item.name}}</el-menu-item>
      </el-menu>
    </el-header>

    <el-main>
      <!-- 类别查询 -->
      <div class="tags-container">
        <div class="tags-line">
          <div class="tags-title">类型:</div>
          <el-radio-group v-model="categoryRadio">
<!--            显示所有的类型-->
            <el-radio-button :label="0">全部</el-radio-button>
            <el-radio-button :label="item.movieCategoryId" v-for="item in categoryList" :key="item.movieCategoryId">{{item.movieCategoryName}}</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <!-- 按条件排序 -->
<!--      <div class="order-by-container">-->
<!--        <el-radio v-model="orderByColumn" label="releaseDate">按时间排序</el-radio>-->
<!--&lt;!&ndash;        <el-radio v-model="orderByColumn" label="movieScore">按评价排序</el-radio>&ndash;&gt;-->
<!--      </div>-->
<!--      <router-view :movieCategoryId="categoryRadio" :movieAreaId="areaRadio" :movieAgeId="ageRadio" :orderByColumn="orderByColumn"></router-view>-->

      <!--     显示电影(根据类别,排序：根据上映时间)-->
      <router-view :movieCategoryId="categoryRadio" :orderByColumn="orderByColumn"></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Movie",
  data(){
    return {
      menuList: [
        {
          id: '1',
          name: '正在热映',
          path: '/movie/movieOngoing'
        },
        {
          id: '2',
          name: '即将上映',
          path: '/movie/movieUpcoming'
        },
        {
          id: '3',
          name: '经典影片',
          path: '/movie/movieClassics'
        }
      ],
      categoryRadio: 0,
      categoryList: [],
      orderByColumn: 'releaseDate'
    }
  },
  created() {
    //获得所有电影类别
    this.getCategoryList()
  },
  methods: {
    async getCategoryList() {
      const { data : res } = await axios.get('sysMovieCategory/find')
      if(res.code !== 200) return this.$message.error('获取服务器信息失败')
      this.categoryList = res.data
    }
  },
  watch:{
    '$route'(){
      //页面发生变化时初始化类别选项
      this.categoryRadio = 0
      this.orderByColumn = 'releaseDate'
    }
  }
}
</script>

<style scoped>
.el-header{
  padding: 0px;
}

.nav-menu{
  display: flex;
  justify-content: space-around;
}

.el-menu-item{
  font-size: 16px;
}

.el-menu-item:hover{
  color: #FFFFFF !important;
}

.el-main{
  width: 1200px;
  margin: 0 auto;
}

.tags-container{
  border: solid #EEEEEE 1px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.tags-line{
  width: 100%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: solid #EEEEEE 1px;
}

.tags-line:last-child{
  border-bottom: 0;
}

.tags-title {
  width: 5%;
  height: 24px;
  line-height: 24px;
  float: left;
  color: #999;
  font-size: 14px;
}

.el-radio-group{
  width: 92%;
  margin-left: 20px;
}

.el-radio-button {
  margin-right: 10px;
}

.el-radio-button:last-child{
  margin-right: 0;
}

.el-radio-button >>> .el-radio-button__inner {
  border: solid #eee 0px !important;
  border-radius: 50px !important;
}

.order-by-container{
  margin: 30px 10px 0 10px;
}
</style>

MovieClassics.vue


<template>
<!--  经典影片-->
  <div>
    <div class="movie-list">
<!--      movie-item 是一个vue模板，用于实现放大的效果和电影列表的渲染-->
      <movie-item :movieItem="item" v-for="item in movieList" :key="item.movieId"></movie-item>
    </div>

    <div class="no-cinema" v-if="sorry">
      <p>抱歉，没有找到相关结果，请尝试用其他条件筛选。</p>
    </div>

    <div class="pageHelper">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          background
          layout="prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import movieItem from "../../components/movie/movie-item";
import moment from "moment";

export default {
  name: "MovieClassics",
  components:{
    movieItem
  },
  props:{
    //接收到所要显示的电影类型
    movieCategoryId: Number,
    orderByColumn: String
  },
  data(){
    return{
      total: 0,
      pageSize: 30,
      pageNum: 1,
      movieList: [],
      sorry: false
    }
  },
  //computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新
  computed: {
    listenChange () {
      const {movieCategoryId, orderByColumn} = this
      return {movieCategoryId, orderByColumn}
    }
  },
  created() {
    this.getMovieList()
  },
  watch:{
    //监听器
    listenChange(){
      this.getMovieList()
    }
  },
  methods: {
    async getMovieList(){
      let queryInfo = {
        movieCategoryId: this.movieCategoryId,
        orderByColumn: this.orderByColumn,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        isAsc: 'desc'
      }
      const { data : res } = await axios.get('sysMovie/find', {params: queryInfo})
      this.movieList = res.data
      this.total = res.total
      if(this.movieList.length === 0) this.sorry = true
      else this.sorry = false
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.getMovieList()
    }
  }
}
</script>

<style scoped>
.movie-list{
  display: flex;
  flex-wrap: wrap;
}

.pageHelper{
  display: flex;
  justify-content: center;
  margin: 40px 0px;
}

.no-cinema{
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
  font-size: 16px;
  color: #333;
}
</style>

movie-item.vue

<template>
  <!-- 一部电影 -->
  <div class="movie-item">
<!--     v-on:mouseover="isHover = true" 绑定鼠标的悬停和离开-->
    <div v-on:mouseover="isHover = true" v-on:mouseleave="isHover = false">
      <!-- 点击海报，进入该电影详细信息 -->
      <a :href="movieInfoUrl">
<!--      this.global.base  :const base = 'http://127.0.0.1:8181/'(后端的接口)
        movieItem.moviePoster:  /images/movie/2020/12/15/4425e22bc1264164a2fbdd01d56cd939.jpg   -->
        <img class="poster" :src="this.global.base + movieItem.moviePoster">
      </a>
      <!-- 鼠标划过时的效果 -->
      <div class="movie-item-hover" v-if="isHover">
        <!-- 海报 -->
        <a :href="movieInfoUrl">
          <img class="poster-hover" :src="this.global.base + movieItem.moviePoster">
          <!-- 鼠标划过时显示的信息 -->
          <div class="movie-hover-info">
            <div class="title-hover">
              <span class="name-tags">{{movieItem.movieName}}</span>
            </div>
            <div class="title-hover">
              <span class="name-tags">类型: </span>{{movieItem.movieCategoryList}}
            </div>
            <div class="title-hover">
              <span class="name-tags">上映时间: </span>{{movieItem.releaseDate}}
            </div>
          </div>
        </a>
      </div>
    </div>
<!--     显示电影下面的电影名字 -->
    <div class="title-style">
      <a href="/movieInfo">{{movieItem.movieName}}</a>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: "movie-item",
  props: {
    movieItem: Object
  },
  data() {
    return {
      isHover: false,
      movieInfoUrl: ''
    }
  },
  created(){
    this.movieItem.moviePoster = JSON.parse(this.movieItem.moviePoster)[0]
    this.movieItem.moviePictures = JSON.parse(this.movieItem.moviePictures)
    //解析上映的时间
    this.movieItem.releaseDate = moment(this.movieItem.releaseDate).format('YYYY-MM-DD')
    //类型之间加/
    this.movieItem.movieCategoryList = this.movieItem.movieCategoryList.map((obj,index) => {
      return obj.movieCategoryName;
    }).join("/")
    console.log(this.movieItem.movieCategoryList)
    //赋值目标链接
    this.movieInfoUrl = '/movieInfo/' + this.movieItem.movieId
  },

  //监听器
  watch: {
    'movieItem'() {

      // 监听 movieItem 属性的数据变化
      // 作用 : 只要 movieItem 的值发生变化,这个方法就会被调用

      this.movieItem.moviePoster = JSON.parse(this.movieItem.moviePoster)[0]
      this.movieItem.moviePictures = JSON.parse(this.movieItem.moviePictures)
      //  格式化时间
      this.movieItem.releaseDate = moment(this.movieItem.releaseDate).format('YYYY-MM-DD')
      //  在每个类型之间，添加/,为了美观
      this.movieItem.movieCategoryList = this.movieItem.movieCategoryList.map((obj,index) => {
        return obj.movieCategoryName;
      }).join("/")

      //赋值目标链接，用于跳转到这个电影的详细信息
      this.movieInfoUrl = '/movieInfo/' + this.movieItem.movieId
    }
  }
}
</script>

<style scoped>
.movie-item{
  margin-top: 30px;
  margin-left: 30px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.poster{
  width: 160px;
  height: 220px;
}

.title-style{
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 16px;
  color: #333;
  margin-top: 10px;
}

.score{
  color: #ffb400;
  font-size: 24px;
  font-style: italic;
}

a{
  text-decoration: none;
  color: #333;
}

.movie-item-hover{
  position: absolute;
  width: 218px;
  height: 300px;
  z-index: 10;
  top: -40px;
  left: -29px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 16px #fff, 0 0 6px rgba(0, 0, 0, 0.2);
}

.poster-hover{
  width: 218px;
  height: 300px;
}

.movie-hover-info{
  padding: 16px;
  height: 150px;
  box-sizing: border-box;
  position: absolute;
  z-index: 11;
  top: 150px;
  background: #fff;
  width: 218px;
  color: #999;
}

.title-hover:first-child{
  font-size: 20px;
  line-height: 20px;
  margin-top: 6px;
}

.title-hover{
  font-size: 16px;
  line-height: 16px;
  margin-top: 12px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.name-tags{
  color: #333;
}
</style>

另外两个

在这里插入图片描述
这里只是请求的参数不一样，其余都是一样的。
以下为请求参数的对比：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

请求与响应

获得电影类别

在这里插入图片描述

{
  "msg": "操作成功",
  "total": 26,
  "code": 200,
  "data": [
    {
      "movieCategoryId": 1,
      "movieCategoryName": "爱情"
    },
    {
      "movieCategoryId": 2,
      "movieCategoryName": "喜剧"
    },
    {
      "movieCategoryId": 3,
      "movieCategoryName": "动画"
    },
    {
      "movieCategoryId": 4,
      "movieCategoryName": "剧情"
    },
    {
      "movieCategoryId": 5,
      "movieCategoryName": "恐怖"
    },
    {
      "movieCategoryId": 6,
      "movieCategoryName": "动作"
    },
    {
      "movieCategoryId": 7,
      "movieCategoryName": "科幻"
    },
    {
      "movieCategoryId": 8,
      "movieCategoryName": "悬疑"
    },
    {
      "movieCategoryId": 9,
      "movieCategoryName": "惊悚"
    },
    {
      "movieCategoryId": 10,
      "movieCategoryName": "犯罪"
    },
    {
      "movieCategoryId": 11,
      "movieCategoryName": "冒险"
    },
    {
      "movieCategoryId": 12,
      "movieCategoryName": "战争"
    },
    {
      "movieCategoryId": 13,
      "movieCategoryName": "奇幻"
    },
    {
      "movieCategoryId": 14,
      "movieCategoryName": "运动"
    },
    {
      "movieCategoryId": 15,
      "movieCategoryName": "家庭"
    },
    {
      "movieCategoryId": 16,
      "movieCategoryName": "古装"
    },
    {
      "movieCategoryId": 17,
      "movieCategoryName": "武侠"
    },
    {
      "movieCategoryId": 18,
      "movieCategoryName": "西部"
    },
    {
      "movieCategoryId": 19,
      "movieCategoryName": "历史"
    },
    {
      "movieCategoryId": 20,
      "movieCategoryName": "传记"
    },
    {
      "movieCategoryId": 21,
      "movieCategoryName": "歌舞"
    },
    {
      "movieCategoryId": 22,
      "movieCategoryName": "黑白电影"
    },
    {
      "movieCategoryId": 23,
      "movieCategoryName": "短片"
    },
    {
      "movieCategoryId": 24,
      "movieCategoryName": "纪录片"
    },
    {
      "movieCategoryId": 25,
      "movieCategoryName": "其他"
    },
    {
      "movieCategoryId": 26,
      "movieCategoryName": "历史"
    }
  ],
  "pageSize": 1000,
  "pageNum": 1
}

根据条件查询相应的电影

在这里插入图片描述
在这里插入图片描述

movie-item.vue

在这里插入图片描述
在这里插入图片描述

使用Vue构建视频播放列表
W3cplus
04-14 4163
这周有关于CSSConf Australia大会的视频已经放出来了。花了一天的时间看了一下视频，有些话题还是很有意思的。不过咱们今天要聊的不是这个大会中的事情。这不是在学Vue吗？总想给自己找点活干，练习练习Vue。我就在想，是不是可以把该大会的在YouTube上的视频列表效果给模拟出来。既然想了，那就动手试试呗。比如咱们接下来要做的一个效果如下：由于我们的视频和视频的相关信息都来源于YouTub
SSR服务器端渲染(Nuxt.js总结和豆瓣电影项目)
庚中
10-26 1303
引言 开始之前,我们先了解一下普通前端渲染过程: 而加了SSR的服务器渲染过程: 明显请求次数变少了,速度更快.那接下来隆重介绍服务端渲染 什么是服务器端渲染 前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改。 服务端渲染：前端发出请求后，后端在将HTM...
vue-movie-listing:影片列表
05-02
影片列表 第1周项目：Vue电影列表 实习生： 约翰（Doan Nguyen） 构建设置 # install dependencies yarn # serve with hot reload at localhost:8080 yarn dev # # Screenshot ! [Screenshot](/vue-movie-listing-screen-shot.png) For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
web 移动端电影项目 (Vue)
Mr.小灰狼_随笔
11-07 4967
一、电影模块开发 目录 一、电影模块开发 1.0、顶部幻灯片 1.1、列表顶部导航 1.2、正在热映 页面底部导航 组件缓存 图片懒加载 1.3、即将上映 1.4、电影详情 1.4.1、基本信息展示 2.4.2、底部菜单移除 1.5、影院列表 1.6、城市列表开发 二、个人中心 2.1、界面布局 2.2、登录 2.3、路由验证
Vue电影演示：Vue电影演示
02-21
项目简介 类豆瓣电影网站个人项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。 测试 VUE电影
movie-vue:电影推荐系统前端
03-11
电影 电影推荐系统前端 在线（ ） 前端vue vuex 后台spring boot jpa mahout项目地址（ ） 主页 推荐 评分
Sentry For Vue 完整接入详解(2021 Sentry v21.8.x)前方高能预警！三万字，慎入！
o__cc的博客
09-07 5046
内容源于：https://docs.sentry.io/platforms/javascript/guides/vue/ 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For React 完整接入详解 脑图 公众号：黑客下午茶 快速开始 S...
基于SSH框架的电影订票系统网站的设计与实现
clover926的博客
04-22 3545
源码及资料： http://www.byamd.xyz/sss.html 开发计划 1. 甘特图 2. 开发计划简述 如图所示在项目初期阶段，首先开始需求调研。 需求调研阶段，我们将首先根据初期的会议内容考虑市场需求以及基本的市场现状，并根据以上的内容设计问卷来寻找痛点。我们准备使用第三方问卷工具，以电子问卷的方式来进行调查。初步预计会收到200份问卷。 在需求调查阶段，同时开展对同类型的网站的评估工作。进入初步的需求分析阶段。目标是取得现有电影购票网站的基本购票流程，并对其交互等方面作出评估。找出
vue3+g2plot实现词云图
源滚滚编程
07-25 1181
效果预览：data,},return {},});本教程主要讲述了vue3怎么结合g2plot开发词云图并实际演示了6个实战案例。完整代码如下：打赏6元即可获取完整源码。本教程还配套了完整的视频教程：人生苦短，我用Python。我是您身边的Python私教，有任何Python问题请随时留言，我愿意献上绵薄之力，为您排忧解难，助您Python编程能力更上一层楼！
Vue3.0项目---蜘蛛电影（解析）
weixin_43842821的博客
04-09 935
项目简介 蜘蛛电影主要是仿猫...
从一个电影网站项目学习[前台显示端]—Vue.js
01-07
本篇文章通过一个完整的电影介绍和电影资源发布网站的项目，过一遍Vue.js。 通过前面章节的介绍 http://www.shanhubei.com/tag/vue 或在本平台下的相关文章了解一下。（ps本人是通过工具编辑器编写，同步在多个平台上） 项目源码： github：https://github.com/shanhubei/vue_movie_example gitee: https://gitee.com/shanhubei/vue_movie_example 从一个电影网站项目学习[前台显示端] 包含用户的操作、新闻的发布展示等功能。 现在正是开始编写项目。 建立电影网站Vue.js
电影网站前端模板
08-27
一套电影网站前端模板，前端页面。。
vue2x豆瓣电影展示项目
08-12
vue2.x豆瓣电影展示项目
weiweimovie：vue实现的一个电影页面
02-18
微电影 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
v-for的练习，渲染电影列表（可以实现简单的排序）
z3436的博客
02-15 1265
使用v-for来简单的渲染出信息（带排序）
【Vue】条件渲染 & 列表渲染
Superman_H的博客
02-08 866
# 条件渲染 ## `v-show` - 相当于设置元素 `display: none`。就是说，不论是否显示，浏览器都会渲染。适用于切换频率较高的场合 - `v-show` 不支持与 `` 标签元素一起使用 ```html v-show 的使用 v-show 的使用
从一个电影网站项目学习[前台显示端]---Vue.js
chenzhao635的专栏
02-17 1081
本篇文章通过一个完整的电影介绍和电影资源发布网站的项目，过一遍Vue.js。 通过前面章节的介绍 http://www.shanhubei.com/tag/vue 或在本平台下的相关文章了解一下。（ps本人是通过工具编辑器编写，同步在多个平台上） 项目源码： github：https://github.com/shanhubei/vue_movie_example gitee: https://g...
vue前端入门——制作一个电影网页
weixin_46265647的博客
01-22 7520
使用语言 Html5 JS css 使用框架 基于vue的前后端分离技术 movie.HTMl <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="./movie.css" /> </head> <body> <s
电影推荐系统前端开发：Vue.js实践教程
最新发布
weixin_29317963的博客
10-19 844
本文还有配套的精品资源，点击获取 简介：电影推荐系统前端是基于Vue.js框架的Web应用，它展示了电影列表和推荐，并集成了用户评分功能。项目采用了Vue.js的组件化开发模式，以及Vuex作为状态管理工具。后端使用Spring Boot处理HTTP请求，JPA管理数据库。Mahout机器学习库被用于实现推荐算法。整个项目托管于代码托管平台，并提供了主页面和个性化推荐页面。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪程序猿

就当请我吃顿饭

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值