三十四、进阶之获取详情页面信息并显示_卖座网我的页面如何判断

（1）分析如何获取对应电影的详情信息

获取卖座网站电影的详情信息

观察卖座网，进入“阿凡达”和“你好李焕英”的详情页面，可以发现路径变化的只有电影id（filmId）

因此我们可以通过电影的id获取对应电影的详情信息

https://m.maizuo.com/gateway?filmId=5382&k=4136317

https://m.maizuo.com/gateway?filmId=5335&k=2152933

因此可以通过下面的代码，获取详情信息

（2）获取详情页面信息，并将电影名和封面显示到详情页

Detail.vue

<template>
    <!-- 避免filmlist为空报错的情况 -->
    <div v-if="filmlist"> 
        <img :src="filmlist.poster" class="poster">
        <h2>{{filmlist.name}}</h2>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    //props: ['id'], //获取传过来的数据myid
    data(){
        return{
            id:'',
            filmlist:null
        }
    },
    mounted () {
        // console.log("获取详情信息",this.$route.params.myid)
        this.id=this.$route.params.myid
        axios({
            url:`https://m.maizuo.com/gateway?filmId=${this.id}&k=2152933`,
            headers:{
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1615895162724483673423873","bc":"110100"}',
                'X-Host': 'mall.film-ticket.film.info'
            }
        }).then(res=>{
            console.log(res.data);
            this.filmlist = res.data.data.film
        })
    }
}
</script>
<style lang="scss" scoped>
.poster{
    width: 100%;
}
</style>

（3）将演员和剧照分别以轮播图的形式，显示到页面上

注意：演员一页显示4张，剧照一页显示3张。在使用同一个轮播组件时，可以通过传值的方式进行设置

Detail.vue(向组件传值时，定义的preview和actorswiper都是随意取的)

DetailSwiper.vue

（4）代码

DetailSwiper.vue

<template>
    <div class="swiper-container filmswiper">
        <div class="swiper-wrapper">
             <!--插槽-->
            <slot></slot>  
        </div>
 
    </div>
</template>
<script>
//引入swiper
import Swiper from 'swiper' //swiper.js
import 'swiper/swiper.min.css' //swiper.css
export default {
    props: ["preview","myclass"],
    //组件加载时，执行mounted方法
    mounted () {
        //初始化swiper
        new Swiper('.'+this.myclass,{
            slidesPerView:this.preview,//一页显示3个
            spaceBetween:this.myclass==="actorswiper"?20:10,//每个slide之间的距离
            freeMode:true
         
         })
    }
}
</script>
<style lang="scss" scoped>
//调整轮播图宽度
.swiper-wrapper{
    img{
        width: 100%;
    }
}
</style>

Detail.vue