Comment vue simule les données d'arrière-plan en demandant la configuration des données locales

Avec le développement continu des frameworks front-end, de plus en plus d'entreprises choisissent d'utiliser le modèle de développement de séparation front-end et back-end. Dans ce cas, le front-end doit simuler la demande de données en arrière-plan pour tester la page qu'il a développée afin de garantir que le débogage conjoint avec l'arrière-plan puisse se dérouler sans problème. Cet article explique comment simuler la configuration des données locales des demandes de données en arrière-plan à l'aide du framework Vue.

1. Projet d'échafaudage Vue-cli 3.x

Tout d'abord, vous devez utiliser l'échafaudage Vue-cli 3.x pour créer le projet. Cet article n’entrera pas dans les détails ici. Ensuite, dans le projet créé, vous pouvez créer un nouveau répertoire fictif dans le répertoire src pour stocker les données de simulation.

2. Installez et configurez Mock.js

1. Installation

Utilisez la ligne de commande suivante pour installer Mock.js dans le répertoire du projet :

npm install mockjs -D

2. Configuration

Créez une maquette dans le répertoire src/mock du fichier .js du répertoire du projet et configurez-le dans :

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.mock('/api/getList', 'get', {}), '/api/getList' est l'adresse d'interface demandée 'get' est la requête ; méthode (POST, GET, etc.); {} sont les données renvoyées par l'interface.

3. Introduisez le fichier Mock.js

Introduisez le fichier mock.js dans main.js et liez la méthode Mock sur Vue.prototype à utiliser lors de l'appel de l'API du composant :

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. Appelez les données simulées

Pour appeler des données simulées dans un composant, vous pouvez utiliser la méthode 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);
         })
     }
}

De cette façon, vous pouvez utiliser this.$http.get('/api/getList') pour demander l'arrière-plan data, et avant le débogage conjoint, simulez la requête dans le fichier mock.js. De cette manière, l'exactitude du code peut être entièrement testée pendant le processus de développement, tout en évitant les problèmes pouvant survenir lors du débogage conjoint.

Résumé :

À l'ère du développement séparé du front-end et du back-end, le front-end a besoin d'un débogage d'interface conjoint avec le back-end. Cependant, dans le processus de développement logiciel, le débogage conjoint présente souvent certains problèmes. En plus des problèmes de compatibilité lors du débogage conjoint, il est également nécessaire de résoudre le problème du fait que le front-end et le back-end ne peuvent pas être développés en même temps. Par conséquent, Mock.js peut être introduit pour simuler les demandes de données back-end afin de résoudre ce problème. Pour le dire simplement : « La simulation de l'interface back-end permet au front-end de tester indépendamment l'exactitude logique de la page front-end. Cela améliore pleinement l'efficacité de développement du front-end, économise les coûts de développement, réduit le taux d'erreur. de développement collaboratif à plusieurs personnes, et évitez également les problèmes inutiles lors de la simulation de données

.

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!