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的移動端項目：正在熱映模塊
)
