2022-11-17 vue移动端卖座电影项目(一) 获取后台数据

0.目标网页

卖座电影

1.获取url数据

位置:网络>复制>复制链接地址

2.获取电影列表数据

字段获取:网络>标头>请求标头>

3.代码

views/nowPlaying.vue

<template>
  <div>nowPlaying...
      <ul>
        <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data)">
          {{data.name}}
        </li>
  </ul>
  </div>

</template>
<script>
import axios from "axios"
export default {
  data(){
    return{
      datalist:["1111","2222","3333"]
    }
  },
  methods:{
    handleChangePage(id){
      console.log(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")    
    /*字段获取:网络>标头>请求标头>
        X-Client-Info: {"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}
        X-Host: mall.film-ticket.film.list 
    */
		// 使用axios的完整写法配置字段
        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);
          datalist=res.data.data.films;
        })
  }
}
</script>

结果:成功获取数据