Rumah > Artikel > hujung hadapan web > 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 数据:
<code class="javascript">const Mock = require('mockjs'); // 定义 Mock 数据 Mock.mock(/api\/users/, { 'list|10': [{ id: '@id', name: '@cname', age: '@integer(18, 60)', }] });</code>
3. 在 Vue 组件中使用 Mock 数据
在需要使用 Mock 数据的 Vue 组件中,引入 Mock.js 文件并使用 $http
服务发起请求:
<code class="javascript">import mock from '@/mock'; // 导入 Mock.js 文件 export default { data() { return { users: [], }; }, created() { this.$http.get('/api/users').then(response => { this.users = response.data; }); }, };</code>
4. 获取 Mock 数据
请求发送后,Vue 组件将收到 Mock.js 生成的响应,响应数据会存储在 this.users
中。
注意:
$http
rreee$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: 🎜🎜$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!