Wie liest Vue Testdaten im Schein?

Schritte zum Lesen von Mock-Daten im Vue-Projekt: Installieren Sie Mock.js, erstellen Sie die Mock.js-Datei, definieren Sie die Mock-Daten, verwenden Sie den $http-Dienst in der Vue-Komponente, um eine Anfrage zum Abrufen und Speichern der Mock-Daten zu initiieren in den Komponentendaten

Testdaten in Mock in Vue lesen

Wenn Sie Mock-Daten zum Testen in einem Vue-Projekt verwenden, können Sie die Daten in Mock durch die folgenden Schritte lesen:

1. Installieren Mock.js

<code>npm install --save-dev mockjs</code>

2 . Erstellen Sie eine Mock.js-Datei

Erstellen Sie eine Datei mit dem Namen mock.js im src-Verzeichnis und definieren Sie darin Mock-Daten: mock.js 的文件，并在其中定义 Mock 数据：

const Mock = require('mockjs');

// 定义 Mock 数据
Mock.mock(/api\/users/, {
  'list|10': [{
    id: '@id',
    name: '@cname',
    age: '@integer(18, 60)',
  }]
});

3. 在 Vue 组件中使用 Mock 数据

在需要使用 Mock 数据的 Vue 组件中，引入 Mock.js 文件并使用 $http 服务发起请求：

import mock from '@/mock'; // 导入 Mock.js 文件

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    this.$http.get('/api/users').then(response => {
      this.users = response.data;
    });
  },
};

4. 获取 Mock 数据

请求发送后，Vue 组件将收到 Mock.js 生成的响应，响应数据会存储在 this.users 中。

注意：

• Mock.js 文件中的 URL 路径与 Vue 组件中发起的请求 URL 路径必须一致。
• $httprrreee

3. Verwenden Sie Scheindaten in Vue-Komponenten 🎜🎜🎜Führen Sie in der Vue-Komponente, die Scheindaten verwenden muss, die Datei Mock.js ein und verwenden Sie den Dienst $http, um eine Anfrage zu initiieren: 🎜rrreee🎜🎜4. Holen Sie sich die Mock-Daten 🎜🎜🎜Nachdem die Anfrage gesendet wurde, erhält die Vue-Komponente die von Mock.js generierte Antwort und die Antwortdaten werden in this.users gespeichert. 🎜🎜🎜Hinweis: 🎜🎜

• Der URL-Pfad in der Mock.js-Datei muss mit dem in der Vue-Komponente initiierten Anforderungs-URL-Pfad übereinstimmen. Der Dienst 🎜
• $http wird vom Vue-Ressourcen-Plug-in bereitgestellt. Wenn Sie Vue-resource nicht verwenden, können Sie je nach Ihrer tatsächlichen Situation andere HTTP-Anforderungsbibliotheken (z. B. Axios) verwenden. 🎜🎜

Das obige ist der detaillierte Inhalt vonWie liest Vue Testdaten im Schein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!