1.带着id传到详情页面中
效果:点击任一电影,跳转进Detail.vue页面时后面自动拼接上电影的filmId
http://localhost:8081/#/Detail/6112
http://localhost:8081/#/Detail/6105
等等
代码
nowPlaying.vue
<template><div><ul><li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)"><!-- 获取电影海报 --><img :src="data.poster" alt=""><!-- 获取电影标题 --><h3>{{data.name}}</h3><!-- 获取观众评分 --><p>观众评分{{data.grade}}</p><!-- 获取导演和主演信息:此处要处理一下数组data.actors(过滤) --><p>{{data.actors | actorfilter}}</p></li></ul></div></template><script>import axios from "axios"// 注册过滤器需要用到Vue,所以引入vue:在哪使用就在哪引入import Vue from "vue"Vue.filter('actorfilter',function(data){//回顾map的用法:// console.log([0,1,2].map(item=>`我是第${item+1}名`));// 处理data.name数组var newList=data.map(item=>item.name);// console.log(newList);return newList.join(' ');});export default {data(){return{// datalist:["1111","2222","3333"]datalist:[]}},methods:{handleChangePage(id){console.log("我的id是:",id);this.$router.push({name:'renameDetail',params:{id:id}});}},mounted(){// 网络>复制>复制链接地址// axios.get("/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=2318535")// 使用axios的完整写法配置字段/*字段获取:网络>标头>请求标头>X-Client-Info: {"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}X-Host: mall.film-ticket.film.list */axios({url:"/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=2318535",headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}',' X-Host': 'mall.film-ticket.film.list'}}).then(res=>{console.log("获取数据data:",res.data);// console.log("获取数据data:",res.data.data.films);this.datalist=res.data.data.films;})}}</script><style lang="scss" scoped>ul{li{padding:10px;overflow:hidden;img{float: left;width: 100px;}}}</style>
2.在详情页面Detail.vue中使用axios获取后台数据
2.1.获取axios的url地址
2.2.获取axios的headers
2.3.axios请求后台数据
Detail.vue
mounted(){// console.log("要id,获取信息:",this.$route);//看到router对象中有params:id属性(与index.JS的 path: '/Detail/:id'保持一致)console.log("要id,获取信息:",this.$route.params.id,this.id);//两种获取id的方法// step1到step4:这就是列表详情跳转页中,在路由中所做的配置--动态路由-// 获取后台数据:axios({// url:"/gateway?filmId=6112&k=1215097",url:`/gateway?filmId=${this.$route.params.id}&k=1215097`,headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297","bc":"310100"}',' X-Host': 'mall.film-ticket.film.info'}}).then(res=>{// console.log(res.data);this.filminfo=res.data.data.film;console.log("我是filminfo:",this.filminfo);})}
3.使用获取到的后台数据给详情页设置样式
Detail.vue
<template><!-- v-if="filminfo":若没有获取到后台数据则不进行初始渲染 --><!-- 或者把请求数据的代码从mounted放到created中 --><div v-if="filminfo"><img :src="filminfo.poster" class="poster"><h2>{{filminfo.name}}</h2></div></template><script>import axios from "axios"export default {data(){return{filminfo:null}},props:['id'],// step4:最终目的是为了在detail页面中获取唯一的id,利用此id再ajax请求后端详情页面数据mounted(){// console.log("要id,获取信息:",this.$route);//看到router对象中有params:id属性(与index.JS的 path: '/Detail/:id'保持一致)console.log("要id,获取信息:",this.$route.params.id,this.id);//两种获取id的方法// step1到step4:这就是列表详情跳转页中,在路由中所做的配置--动态路由-// 获取后台数据:axios({// url:"/gateway?filmId=6112&k=1215097",url:`/gateway?filmId=${this.$route.params.id}&k=1215097`,headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297","bc":"310100"}',' X-Host': 'mall.film-ticket.film.info'}}).then(res=>{// console.log(res.data);this.filminfo=res.data.data.film;console.log("我是filminfo:",this.filminfo);})} }</script><style lang="scss" scoped>.poster{width: 100%;}</style>
效果
如果觉得《-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式》对你有帮助，请点赞、收藏，并留下你的观点哦！
