Comment vue lit les données de test dans mock

Étapes pour lire les données Mock dans le projet Vue : installez Mock.js, créez le fichier Mock.js, définissez les données Mock, utilisez le service $http dans le composant Vue pour lancer une requête pour obtenir les données Mock et les stocker dans les données du composant

Lire les données de test dans Mock dans Vue

Lorsque vous utilisez les données Mock pour tester dans un projet Vue, vous pouvez lire les données dans Mock en suivant les étapes suivantes :

1. Mock.js

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

2 . Créez un fichier Mock.js

Créez un fichier nommé mock.js dans le répertoire src et définissez-y les données Mock : 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. Utiliser des données Mock dans les composants Vue 🎜🎜🎜Dans le composant Vue qui doit utiliser des données Mock, introduisez le fichier Mock.js et utilisez le service $http pour lancer une requête : 🎜rrreee🎜🎜4. Obtenez les données Mock 🎜🎜🎜Après l'envoi de la demande, Vue Le composant recevra la réponse générée par Mock.js et les données de réponse seront stockées dans this.users. 🎜🎜🎜Remarque : 🎜🎜

• Le chemin de l'URL dans le fichier Mock.js doit être cohérent avec le chemin de l'URL de la requête initiée dans le composant Vue. 🎜Le service
• $http est fourni par le plug-in Vue-resource. Si vous n'utilisez pas Vue-resource, vous pouvez utiliser d'autres bibliothèques de requêtes HTTP (telles que Axios) en fonction de votre situation réelle. 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!