vue---移动端-获取爱奇艺movies数据展示列表demo_android 获得爱奇艺数据-CSDN博客

本文链接：https://blog.csdn.net/DcTbnk/article/details/107261610

在这里插入图片描述

`index.html`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>练习内容</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <div id="app" class="container">
      <div class="content">
        <!-- keep-alive 可以缓存组件的状态 -->
        <!-- 此时点击底下的四个不同导航，再点回列表导航时的内容还是之前的样子 -->
        <keep-alive>
          <component :is="current"></component>
        </keep-alive>
      </div>
      <ul class="nav">
        <!-- emmet语法 -->
        <li :class="index==0?'active':''" @click="index=0">
          <i class="fa fa-home fa-fw"></i>
          <span>首页</span>
        </li>
        <li :class="index==1?'active':''" @click="index=1">
          <i class="fa fa-fire fa-fw"></i>
          <span>列表</span>
        </li>
        <li :class="index==2?'active':''" @click="index=2">
          <i class="fa fa-cart-plus fa-fw"></i>
          <span>购物车</span>
        </li>
        <li :class="index==3?'active':''" @click="index=3">
          <i class="fa fa-user fa-fw"></i>
          <span>我的</span>
        </li>
      </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="./js/home.js"></script>
    <script src="./js/list.js"></script>
    <script src="./js/cart.js"></script>
    <script src="./js/user.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          index: 0, // 当前选中的索引
          current: "home", // 当前展示的组件
        },
        components: {
          home,
          list,
          cart,
          user,
        },
        watch: {
          // 监听this的改变
          index() {
            switch (this.index) {
              case 0:
                this.current = "home";
                break;
              case 1:
                this.current = "list";
                break;
              case 2:
                this.current = "cart";
                break;
              case 3:
                this.current = "user";
                break;
            }
          },
        },
      });
    </script>
  </body>
</html>

`home.js`

const home = {
  template: `<h1>我是首页</h1>`,
};

`list.js`

const list = {
  template: `<div class="movies">
    <ul>
      <li v-for="item in list" :key="item._id">{{item.title}}</li>
    </ul>
    <button @click="loadMore" v-show="!isEnd">下一页</button>
  </div>`,
  data() {
    return { list: [], page: 1, isEnd: false };
  },
  created() {
    // 获取第一页的数据
    this.loadData();
    // axios.get("http://localhost:3000/api/v1/m").then((res) => {
    //   this.list = res.data.movies;
    //   this.page++;
    // });
  },
  methods: {
    loadMore() {
      this.loadData();
      // axios
      //   .get("http://localhost:3000/api/v1/m?page=" + this.page)
      //   .then((res) => {
      //     this.list = [...this.list, ...res.data.movies];
      //     this.page++;
      //   });
    },
    // 封装函数 减少冗余的代码
    loadData() {
      if (!this.isEnd) {
        axios
          .get("http://localhost:3000/api/v1/m?page=" + this.page)
          .then((res) => {
            this.list = [...this.list, ...res.data.movies];
            this.page++;
            if (res.data.data.pages < this.page) {
              this.isEnd = true;
            }
          });
      }
    },
  },
};

`cart.js`

const cart = {
  template: `<h1>我是购物车</h1>`,
};

`user.js`

const user = {
  template: `<h1>我是个人中心</h1>`,
};