请求本地的 JSON 文件作为 mock 数据

请求本地的 JSON 文件作为 mock 数据，你可以使用 Vue 的生命周期钩子函数 created 或 mounted 来发送 HTTP 请求（GET 请求）并获取 JSON 数据。下面是一个简单的示例：

1. 首先，将你的 JSON 数据文件放置在项目目录下。通常，你可以将它放在 public 目录下，这样它会被静态提供

public/mock-data.json
1

2. 然后，在你的 Vue 组件中，你可以使用 axios 或 fetch 来获取这个 JSON 文件的内容。确保安装了 axios 或使用浏览器原生的 fetch 方法

axios方法

如果你使用了 Axios，你可以使用 Axios 的方式来发送 GET 请求，如下

import axios from 'axios';

created() {
  // 发送 GET 请求获取 JSON 数据
  axios.get('/mock-data.json')  // 注意：这里的路径是相对于 public 目录的
    .then(response => {
      this.data = response.data;
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}
1
2
3
4
5
6
7
8
9
10
11
12

这样，你就可以在 Vue 中请求本地的 JSON 文件作为 mock 数据。确保路径和文件名正确，并在组件中正确处理获取到的数据。

fetch方法

在 created 钩子函数中发送 GET 请求，使用 fetch 方法获取 JSON 数据，然后将它赋值给组件的 data 属性。请确保路径正确指向你的 JSON 文件

<template>
  <div>
    <h1>Mock Data</h1>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  created() {
    // 发送 GET 请求获取 JSON 数据
    fetch('/mock-data.json')  // 注意：这里的路径是相对于 public 目录的
      .then(response => response.json())
      .then(data => {
        this.data = data;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29