Bagaimanakah vue membaca data ujian secara mock

Langkah untuk membaca data Mock dalam projek Vue: Pasang Mock.js, cipta fail Mock.js, tentukan data Mock, gunakan perkhidmatan $http dalam komponen Vue untuk memulakan permintaan untuk mendapatkan data Mock dan simpannya dalam data komponen

Baca data ujian dalam Mock in Vue

Apabila menggunakan data Mock untuk ujian dalam projek Vue, anda boleh membaca data dalam Mock melalui langkah berikut:

Pasang1 Mock.js

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

2 . Buat fail Mock.js

Buat fail bernama mock.js dalam direktori src dan tentukan data Mock di dalamnya: 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 路径必须一致。
• $httprreee

Gunakan data Mock dalam komponen Vue 🎜🎜🎜Dalam komponen Vue yang perlu menggunakan data Mock, perkenalkan fail Mock.js dan gunakan perkhidmatan $http untuk memulakan permintaan: 🎜rrreee🎜🎜4. Dapatkan data Mock 🎜🎜🎜Selepas permintaan dihantar, Komponen Vue akan menerima respons yang dijana oleh Mock.js, dan data respons akan disimpan dalam this.users. 🎜🎜🎜Nota: 🎜🎜

• Laluan URL dalam fail Mock.js mestilah konsisten dengan laluan URL permintaan yang dimulakan dalam komponen Vue. Perkhidmatan 🎜
• $http disediakan oleh pemalam Vue-resource. Jika anda tidak menggunakan sumber Vue, anda boleh menggunakan perpustakaan permintaan HTTP lain (seperti Axios) mengikut situasi sebenar anda. 🎜🎜

Atas ialah kandungan terperinci Bagaimanakah vue membaca data ujian secara mock. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!