使用Axios实现图书列表案例，图书列表页面初始效果如下图所示。

单击上图中“请求数据”按钮，数据请求成功页面效果如下图所示。

图书列表案例的实现分为以下2步。

1. 模拟数据

   为了方便演示，使用mockjs模拟后端接口，下面讲解如何安装mockjs，以及编写模拟数据和配置模拟数据的相关信息。

使用mockjs模拟后端接口

（1）使用yarn安装mockjs。

yarn add mockjs@1.1.0 --save

（2）创建src\mock\books.json文件，该文件用于存放模拟的数据。

[
  {
    "id": 1,
    "name": "西游记",
    "author": "吴承恩"
  },
  {
    "id": 2,
    "name": "红楼梦",
    "author": "曹雪芹"
  },
    {
    "id": 3,
    "name": "三国演义",
    "author": "罗贯中"
  },
  {
    "id": 4,
    "name": "水浒传",
    "author": "施耐庵"
  }
]

（3）创建src\mock\mockServer.js文件，该文件用于配置模拟数据的相关信息。

import Mock from 'mockjs'
import books from './books.json'
Mock.mock('/mock/getBooks', 'get', {
  code: 200,	// 请求成功的状态码
  data: books	// 模拟的请求数据
})

（3）修改src\main.js文件，在创建Vue应用实例前导入mockServer.js文件。

import './mock/mockServer.js'

  2. 请求数据

     后端接口和模拟数据准备好之后，就可以请求接口、获取数据了。下面讲解如何在页面中请求接口并获取数据。

<template>
  <div class="box">
    <button>请求数据</button>
    <table width="90%" class="table">
      <caption>
        <h2>图书列表</h2>
      </caption>
      <thead>
        <tr>
          <th>编号</th>
          <th>书名</th>
          <th>作者</th>
        </tr>
      </thead>
      <tbody>
        <!-- 主体内容 -->
      </tbody>
    </table>
  </div>
</template>
<style>
body, html {
  width: 100%;
  height: 100%;
}
#app {
  width: 100% !important;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
  }
table td, table th {
  border: 1px solid #cad9ea;
  color: #666;
  height: 30px;
}
table thead th {
  background-color: #CCE8EB;
  width: 100px;
}
table tr:nth-child(odd) {
  background: #fff;
}
table tr:nth-child(even) {
  background: #F5FAFA;
}
</style>

为“请求数据”按钮绑定单击事件处理方法。

<button @click="getData">请求数据</button>

在src\App.vue文件中请求接口数据。

<script setup>
import { reactive } from 'vue'
import request from './axios/request.js'
const bookData = reactive({
  list: []
})
// 测试请求方法
const getData = function() {
  request({
    url: '/mock/getBooks',
    method: 'get'
  }).then(res => {
    bookData.list = res.data.data
    console.log(res.data.data)
  }).catch(error => {
    console.log(error)
  })
}
</script>

在src\App.vue文件中编写主体内容。

<tbody v-for="item in bookData.list" :key="item.id">
  <!-- 主体内容 -->
  <tr>
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.author }}</td>
  </tr>
</tbody>