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的移动端项目：正在热映模块