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

原创已于 2022-10-20 19:50:05 修改 · 527 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #axios

于 2021-11-17 20:52:22 首次发布

vue项目-卖座电影专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用Vue.js和Axios从指定网站抓取正在上映电影列表的方法。通过设置请求头并调用API，成功获取了电影数据，并在前端实现了点击跳转至详情页的功能。

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>