2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式

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("https://m.maizuo.com/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:"https://m.maizuo.com/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:"https://m.maizuo.com/gateway?filmId=6112&k=1215097",url:`https://m.maizuo.com/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:"https://m.maizuo.com/gateway?filmId=6112&k=1215097",url:`https://m.maizuo.com/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>

效果

2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式相关推荐

2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式
文章目录 1.封装选项卡 2.设置iconfont 3.nowPlaying获取数据后写样式 3.1.获取后台数据 3.2.从data对象获取电影海报,标题,评分 3.3.过滤data.actor,获 ...
2022-11-17 vue移动端卖座电影项目(一) 获取后台数据
0.目标网页卖座电影 1.获取url数据位置:网络>复制>复制链接地址 2.获取电影列表数据字段获取:网络>标头>请求标头> 3.代码 views/nowPlayi ...
2021-12-11 vue移动端卖座电影项目(十一) comingSoon用后台获取的数据写样式,以及用vuex的Action处理异步问题:切换FilmHeader中的两个标签时直接缓存数据
文章目录 0.vuex工作流程图复习 1.思路 2.axios获取后台数据(仿nowPlaying页即可) 3.用vuex的Action处理异步问题:切换FilmHeader中的"正在热映& ...
2021-12-08 vue移动端卖座电影项目(八) 获取后台电影院数据,使用BetterScroll为电影院页面Cinema.vue设置滚动效果
文章目录 1.使用axios获取后台数据 2.把影院名遍历到页面中 3.better-scroll 3.1.安装命令`cnpm install --save better-scroll` 3.2. 引 ...
2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨
文章目录 0.实现效果 1.封装详情页的轮拨组件DetailSwiper 2.perView:显示张数设置为动态,两个轮拨图分别初始化的方法:重命名并获取当前的class名 3.最终代码和效果代码 ...
2021-11-30 vue移动端卖座电影项目(四) 当前项目代码
文章目录 0.目录和package.json依赖 1.src/assets/iconfont(文件夹) 2.src/components/tabbar.vue 3.router/index.js 4. ...
2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件目的步骤结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片目的步骤因为现在原网站已取消轮拨 ...
2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
2021-12-09 vue移动端卖座电影项目(九) 使用事件总线EvenetBus控制选项卡tabbar的显隐(进入入详情页时隐藏)
文章目录 0.事件总线复习 1.显隐逻辑 2.Detail.vue和它要控制的tabbar.vue不是父子关系 3.使用中央事件总线来控制 4.效果 0.事件总线复习 2021-10-21 vue笔记 ...

2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式

1.带着id传到详情页面中

效果:点击任一电影,跳转进Detail.vue页面时后面自动拼接上电影的filmId

代码

2.在详情页面Detail.vue中使用axios获取后台数据

2.1.获取axios的url地址

2.2.获取axios的headers

2.3.axios请求后台数据

3.使用获取到的后台数据给详情页设置样式

2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式相关推荐

最新文章

热门文章