Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：正在热映模块
目录
正在热映
数据修改
修改获取正在热映NowPlaying页面数据的方式和数据源。
导入axios
原来的datalist数据是写的死数据，改为通过axios请求后端接口数据。
并设置请求头。示例如下：
html
<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开头的请求路径就会进行转发请求。
示例如下：
javascript
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置空为空数组，
然后在接口获取数据后，进行赋值。
示例如下：
渲染列表
修改原有渲染列表代码。
示例如下：
html
<template>
<div>
nowplaying
<ul>
<li v-for="data in datalist" :key="data.filmId"
@click="handleChangePage(data.filmId)">
{{data.name}}
</li>
</ul>
</div>
</template>显示图片
在原来的列表渲染上，增加电影封面显示；
增加img标签，动态绑定图片路径。
示例如下：
html
<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>优化列表
优化列表样式和元素排列组合。
示例如下：
html
<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>设置列表样式
对列表中的影片封面、标题、内容设置样式。
示例如下：
html
<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>主演
主演部分因为是列表结构，需要使用过滤器来处理主演变成字符串，
而后显示在列表中。
定义过滤器
在当前页面定义过滤器，示例如下：
javascript
import Vue from 'vue'
// 定义过滤器处理主演名称
Vue.filter('actorName', (data) => {
return data.map(item => item.name).join(' ')
})使用过滤器
直接在主演后面使用过滤器。示例如下：
html
<div>主演：{{data.actors | actorName}}</div>主演过长处理
当主演过长时，通过设置样式超过盒子长度直接进行隐藏。
示例如下：
设置类
html
<div class="actors">主演：{{data.actors | actorName}}</div>设置样式
css
.content {
font-size: 13px;
color:gray;
.actors {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 11.6333rem;
}
}无主演情况处理
过滤器处理时，增加参数判断。
示例如下：
javascript
Vue.filter('actorName', (data) => {
if (data === undefined) return '暂无主演'
return data.map(item => item.name).join(' ')
})观众评分
观众评分不存在，则不显示，但仍占位。
示例如下：
html
<div :class="data.grade ? '' : 'hidden'">观众评分：
<span style="color:red">{{data.grade}}</span></div>设置隐藏样式
css
.hidden {
visibility: hidden;
}盒子高度修改
在app.vue中设置整个列表 距底部49px。
html
<template>
<div>
<tabbar></tabbar>
<!-- 路由容器 -->
<section>
<router-view></router-view>
</section>
</div>
</template>设置样式
css
section {
padding-bottom: 2.7222rem;
}总结
Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：正在热映模块