Vue 正在热映模块

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：正在热映模块

目录

正在热映

数据修改

导入axios

配置反向代理

正在热映渲染

赋值数据

渲染列表

显示图片

优化列表

设置列表样式

主演

定义过滤器

使用过滤器

主演过长处理

无主演情况处理

观众评分

总结

---

正在热映

数据修改

修改获取正在热映NowPlaying页面数据的方式和数据源。

导入axios

原来的datalist数据是写的死数据，改为通过axios请求后端接口数据。

并设置请求头。示例如下：

<script>
import axios from 'axios'
export default {
  data () {
    return {
      datalist: ['春眠不觉晓', '处处闻啼鸟', '夜来风雨声', '花落知多少']
    }
  },
  mounted () {
    axios({
      url: '/api/gateway?cityId=130100&pageNum=1&pageSize=10&type=2&k=34098',
      headers: {
        'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1',
        'X-Host': 'mall.film-ticket.film.list',
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17479694011920413022027777"}'
      }
    }).then(res => {
      console.log(res.data)
    })
  },
  methods: {
    handleChangePage (id) {

      // 通过命名路由跳转
      this.$router.push({
        name: 'detail',
        params: {
          id
        }
      })
    }
  }
}
</script>

 

配置反向代理

解决跨域方式

接口需要设置允许跨域，前端或后端设置都可以；或者反向代理。

目前解决跨域问题，在vue.config配置反向代理。

凡是向api开头的请求路径就会进行转发请求。

示例如下：

const path = require('path')

// 解析路径的函数
const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports = {
  lintOnSave: false, // 检查语法格式
  // 配置反向代理
  devServer: {
    proxy: {
      '/api': {
        target: 'https://m.maizuo.com',
        changeOrigin: true,
        pathRewrite: { '/api': '' } // 重写路径
      }
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
        _mycom: resolve('src/mycomponents') // 将_mycom映射到src/mycomponents
      }
    }
  }
}

控制台打印数据

正在热映渲染

赋值数据

在NowPlaying页面在data函数中先把datalist置空为空数组，

然后在接口获取数据后，进行赋值。

示例如下：

 

渲染列表

修改原有渲染列表代码。

示例如下：

<template>
    <div>
        nowplaying
        <ul>
            <li v-for="data in datalist" :key="data.filmId"
            @click="handleChangePage(data.filmId)">
                {{data.name}}
            </li>
        </ul>
    </div>
</template>

显示图片

在原来的列表渲染上，增加电影封面显示；

增加img标签，动态绑定图片路径。

示例如下：

<template>
    <div>
        nowplaying
        <ul>
            <li v-for="data in datalist" :key="data.filmId"
            @click="handleChangePage(data.filmId)">
                <img :src="data.poster" alt="">
                {{data.name}}
            </li>
        </ul>
    </div>
</template>

 

优化列表

优化列表样式和元素排列组合。

示例如下：

<template>
    <div>
        <ul>
            <li v-for="data in datalist" :key="data.filmId"
            @click="handleChangePage(data.filmId)">
                <img :src="data.poster" alt="">
                <div class="play_info">
                  <div class="title">{{data.name}}</div>
                  <div class="content">
                    <div>观众评分：<span style="color:red">{{data.grade}}</span></div>
                    <div>主演：{{data.actors}}</div>
                    <div>
                      {{data.nation}} | {{data.runtime}}分钟
                    </div>
                  </div>
                </div>
            </li>
        </ul>
    </div>
</template>

 

设置列表样式

对列表中的影片封面、标题、内容设置样式。

示例如下：

<style lang="scss" scoped>
ul{
  li{
    overflow:hidden;
    padding: .833333rem;
    img {
      width: 3.6666667rem;
      height: 5.2222rem;
      float: left;
    }
    .play_info {
      float:left;
      padding-left: 10px;
    }
    .title {
      font-size: 16px;
    }
    .content {
      font-size: 13px;
      color:gray;
    }
  }
}
</style>

 

主演

主演部分因为是列表结构，需要使用过滤器来处理主演变成字符串，

而后显示在列表中。

定义过滤器

在当前页面定义过滤器，示例如下：

import Vue from 'vue'

// 定义过滤器处理主演名称
Vue.filter('actorName', (data) => {
  return data.map(item => item.name).join(' ')
})

 

使用过滤器

直接在主演后面使用过滤器。示例如下：

<div>主演：{{data.actors | actorName}}</div>

主演过长处理

当主演过长时，通过设置样式超过盒子长度直接进行隐藏。

示例如下：

设置类

<div class="actors">主演：{{data.actors | actorName}}</div>

设置样式

.content {
      font-size: 13px;
      color:gray;
      .actors {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 11.6333rem;
      }
    }

无主演情况处理

过滤器处理时，增加参数判断。

示例如下：

Vue.filter('actorName', (data) => {
  if (data === undefined) return '暂无主演'
  return data.map(item => item.name).join(' ')
})

 

观众评分

观众评分不存在，则不显示，但仍占位。

示例如下：

<div :class="data.grade ? '' : 'hidden'">观众评分：
<span style="color:red">{{data.grade}}</span></div>

设置隐藏样式

.hidden {
  visibility: hidden;
}

 

盒子高度修改

在app.vue中设置整个列表 距底部49px。

<template>
  <div>
    <tabbar></tabbar>
    <!-- 路由容器 -->
    <section>
      <router-view></router-view>
    </section>
  </div>
</template>

设置样式

section {
  padding-bottom: 2.7222rem;
}

总结

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：正在热映模块