Axios-图书列表案例

一、基本概念

1、什么是Axios

2、安装Axios

使用npm或yarn包管理工具安装Axios。

复制代码

# 使用npm包管理工具安装
npm install axios --save

3、掌握Axios 的用法

步骤1 ：将Axios封装成模块，创建src\axios\request.js文件。

复制代码

import axios from 'axios'
const request = axios.create({
  timeout: 2000
})
export default request

步骤2：在组件中导入模块，在src\App.vue文件中导入模块。

复制代码

import request from './axios/request.js'

补充概念

什么是API

HTTP请求中的get请求和post请求的区别

二、代码及运行结果

Axios****图书列表案例

步骤1：在项目目录下安装mockjs

复制代码

npm install mockjs --save-dev

步骤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	// 模拟的请求数据
})

步骤4：修改src\main.js文件，在创建Vue应用实例前导入mockServer.js文件

步骤5：新建tslb.vue 文件，图书列表显示页面

复制代码

<template>
  <div class="box">
    <button @click="getData">请求数据</button>

    <table width="90%" class="table">
      <caption>
        <h2>图书列表</h2>
      </caption>
      <thead>
        <tr>
          <th>编号</th>
          <th>书名</th>
          <th>作者</th>
        </tr>
      </thead>
      <!-- 把 v-for 放到 <tr> 上，而不是 <tbody> -->
      <tbody>
        <tr v-for="item in bookData.list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.author }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<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>

<style>
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  width: 100% !important;
}
.box {
  width: 100%;
  padding: 20px 0;
}
button {
  margin-bottom: 20px;
  padding: 6px 12px;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
  width: 90%; /* 确保表格宽度和属性一致 */
}
table td, table th {
  border: 1px solid #cad9ea;
  color: #666;
  height: 30px;
  padding: 0 8px;
}
table thead th {
  background-color: #CCE8EB;
  /* 给三列设置统一宽度，保证对齐 */
  width: 33.33%;
}
table tr:nth-child(odd) {
  background: #fff;
}
table tr:nth-child(even) {
  background: #F5FAFA;
}
</style>

步骤6：运行结果