Cara vue mensimulasikan data latar belakang yang meminta konfigurasi data setempat

Dengan pembangunan berterusan rangka kerja bahagian hadapan, semakin banyak syarikat memilih untuk menggunakan model pembangunan pemisahan bahagian hadapan dan belakang. Dalam kes ini, bahagian hadapan perlu mensimulasikan permintaan data latar belakang untuk menguji halaman yang telah dibangunkannya untuk memastikan penyahpepijatan bersama dengan latar belakang dapat diteruskan dengan lancar. Artikel ini akan memperkenalkan cara mensimulasikan permintaan data latar belakang konfigurasi data setempat menggunakan rangka kerja Vue.

1. Projek perancah Vue-cli 3.x

Pertama, anda perlu menggunakan perancah Vue-cli 3.x untuk mencipta projek. Artikel ini tidak akan terperinci di sini. Kemudian, dalam projek yang dibuat, anda boleh mencipta direktori olok-olok baharu dalam direktori src untuk menyimpan data simulasi.

2. Pasang dan konfigurasikan Mock.js

1. Pemasangan

Gunakan baris arahan berikut untuk memasang Mock.js dalam direktori projek:

npm install mockjs -D

2. Konfigurasi

Buat fail mock.js dalam direktori src/mock di bawah direktori projek dan konfigurasikannya di dalamnya:

import Mock from 'mockjs'

//这是模拟数据示例
Mock.mock('/api/getList', 'get', {
    code: 0,
    message: 'ok',
    data: {
        list: [
            { id: 1, name: '兰博基尼', price: '1亿', color: 'red' },
            { id: 2, name: '法拉利', price: '2亿', color: 'blue' },
            { id: 3, name: '奥迪', price: '3亿', color: 'black' },
            { id: 4, name: '宝马', price: '4亿', color: 'white' }
        ]
    }
})

Mock. In mock('/api/getList', 'get', {}), '/api/getList' ialah alamat antara muka yang diminta; {} ialah data yang dikembalikan oleh antara muka .

3. Perkenalkan fail Mock.js

Perkenalkan fail mock.js dalam main.js dan ikat kaedah Mock pada Vue.prototype supaya API komponen boleh dipanggil Apabila menggunakan:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import './mock/mock.js'

Vue.config.productionTip = false

//将mock绑定到Vue实例的原型上
Vue.prototype.$Mock = Mock

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. Panggil data simulasi

Untuk memanggil data simulasi dalam komponen, anda boleh menggunakan kaedah Vue.prototype.$Mock.mock()

//示例中的调用请求
methods: {
    getData() {
        this.$Mock.mock('/api/getList', 'get', {});
        this.$http.get('/api/getList').then(res => {
            //响应成功操作
            console.log(res);
        }, error => {
            //响应失败操作
            console.log(error);
         })
     }
}

Dengan cara ini, anda boleh menggunakan ini.$http.get('/api/getList') untuk meminta data latar belakang dan sebelum penyahpepijatan bersama, buat permintaan simulasi dalam fail mock.js. Dengan cara ini, ketepatan kod boleh diuji sepenuhnya semasa proses pembangunan, sambil mengelakkan masalah yang mungkin dihadapi semasa penyahpepijatan bersama.

Ringkasan:

Dalam era pembangunan berasingan bahagian hadapan dan bahagian belakang, bahagian hadapan memerlukan penyahpepijatan antara muka dengan bahagian belakang Walau bagaimanapun, dalam proses perisian pembangunan, penyahpepijatan bersama sering mempunyai masalah tertentu. Sebagai tambahan kepada isu keserasian semasa penyahpepijatan bersama, ia juga perlu untuk menyelesaikan masalah bahawa bahagian hadapan dan belakang tidak boleh dibangunkan pada masa yang sama. Oleh itu, Mock.js boleh diperkenalkan untuk mensimulasikan permintaan data bahagian belakang untuk menyelesaikan masalah ini. Secara ringkasnya: "Mensimulasikan antara muka bahagian belakang membolehkan bahagian hadapan menguji ketepatan logik halaman hadapan secara bebas. Ini meningkatkan kecekapan pembangunan bahagian hadapan sepenuhnya, menjimatkan kos pembangunan, mengurangkan kadar ralat. pembangunan kolaboratif berbilang orang, dan juga Elakkan masalah yang tidak perlu apabila mensimulasikan data

.

Atas ialah kandungan terperinci Cara vue mensimulasikan data latar belakang yang meminta konfigurasi data setempat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!