05.带Header的axios网络请求、模板赋值、字体图标、V

实现卖座电影部分效果

vue项目数据请求

1.注释掉在App.vue组件中，我们请求猫眼电影的跨域请求（怕看起来乱）

//===>src/App.vue
<template>
  ...
</template>

<script>
...
export default {
...
  mounted() {
    // axios
    //   .get(
    //     "/ajax/mostExpected?ci=40&limit=10&offset=0&token=&optimus_uuid=B6BAB990A08011EAB779B9318588518547B90EEDF7814A73BFBDF558B7E483DA&optimus_risk_level=71&optimus_code=10"
    //   )
    //   .then(res => {
    //     console.log(res.data);
    //   });
  },
 ...
};
</script>
...

2.在nowplaying组件中获取卖座电影的数据

image.png

//===>src/views/Film/Nowplaying.vue
<template>
  <div>
    nowplaying
    <ul>
      <li v-for="data in datalist" :key="data" @click="handleChangePage(data)">{{data}}</li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      datalist: []
    };
  },
  mounted() {
    axios
      .get(
        "https://m.maizuo.com/gateway?cityId=120100&pageNum=1&pageSize=10&type=1&k=2449656"
      )
      .then(res => {
        console.log(res.data);
      });
  },
  methods: {
    handleChangePage(id) {
      console.log(id);
      //编程式导航
      this.$router.push(`/detail/${id}`);
      //编程式导航-名字跳转
      this.$router.push({ name: "kerwindetail", params: { id: id } });
    }
  }
};
</script>

请求失败

猫眼电影不需要配置反向代理，这里也没有用到反向代理。
那失败的原因是什么呢？
是因为猫眼电影需要加上一些特殊的头信息。

image.png

3.修改请求，并在模板中赋值

//===>src/views/Film/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: []
    };
  },
  mounted() {
    // axios
    //   .get(
    //     "https://m.maizuo.com/gateway?cityId=120100&pageNum=1&pageSize=10&type=1&k=2449656"
    //   )
    //   .then(res => {
    //     console.log(res.data);
    //   });
    axios({
      url:
        "https://m.maizuo.com/gateway?cityId=120100&pageNum=1&pageSize=10&type=1&k=2449656",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"159065562332628866547713"}',
        "X-Host": "mall.film-ticket.film.list"
      }
    }).then(res => {
      console.log(res.data);
      this.datalist = res.data.data.films;
    });
  },
  methods: {
    handleChangePage(id) {
      console.log(id);
      //编程式导航
      this.$router.push(`/detail/${id}`);
      //编程式导航-名字跳转
      this.$router.push({ name: "kerwindetail", params: { id: id } });
    }
  }
};
</script>

成功

iconfont

1.定义一些全局样式

//===>src/App.vue
...
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
li {
  list-style: none;
}
</style>

2.让Tabbar.vue组件显示在底部

//===>src/components/Tabbar.vue
...
<style lang="scss" scoped>
.myactive {
  color: red;
}
nav {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  background: white;
  ul {
    display: flex;
    li {
      flex: 1;
      line-height: 50px;
      text-align: center;
    }
  }
}
</style>

image.png
3.为下面的Tabbar添加图标(待更新...)

项目nowplaying

(Vue.filter()过滤器 用来处理数据)

//===>src/views/Film/nowplaying.vue
<template>
  <div>
    nowplaying
    <ul>
      <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data)">
        <img :src="data.poster" />
        <h3>{{data.name}}</h3>
        <p>观众评分{{data.grade}}</p>
        <p>主演：{{data.actors |actorfilter}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import Vue from "vue";
Vue.filter("actorfilter", function(data) {
  var newlist = data.map(item => item.name);
  return newlist.join(" ");
});
export default {
  data() {
    return {
      datalist: []
    };
  },
  mounted() {
    // axios
    //   .get(
    //     "https://m.maizuo.com/gateway?cityId=120100&pageNum=1&pageSize=10&type=1&k=2449656"
    //   )
    //   .then(res => {
    //     console.log(res.data);
    //   });
    axios({
      url:
        "https://m.maizuo.com/gateway?cityId=120100&pageNum=1&pageSize=10&type=1&k=2449656",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"159065562332628866547713"}',
        "X-Host": "mall.film-ticket.film.list"
      }
    }).then(res => {
      console.log(res.data);
      this.datalist = res.data.data.films;
    });
  },
  methods: {
    handleChangePage(id) {
      console.log(id);
      //编程式导航
      this.$router.push(`/detail/${id}`);
      //编程式导航-名字跳转
      this.$router.push({ name: "kerwindetail", params: { id: id } });
    }
  }
};
</script>
<style lang="scss" scoped>
ul {
  li {
    padding: 10px;
    overflow: hidden;
    img {
      float: left;
      width: 100px;
    }
  }
}
</style>

image.png