How vue simulates background data requesting local data configuration

With the continuous development of front-end frameworks, more and more companies choose to use the front-end and back-end separation development model. In this case, the front-end needs to simulate the background data request to test the page it has developed to ensure that the joint debugging with the background can proceed smoothly. This article will introduce how to simulate background data request local data configuration using the Vue framework.

1. Vue-cli 3.x scaffolding project

First you need to use the Vue-cli 3.x scaffolding to create the project. This article will not go into details here. Then, in the created project, you can create a new mock directory in the src directory to store simulation data.

2. Install and configure Mock.js

1. Installation

Use the following command line in the project directory to install Mock.js:

npm install mockjs -D

2. Configuration

Create the mock.js file in the src/mock directory under the project directory and configure it in it:

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' is the requested interface address; 'get' is the request method (POST, GET, etc.); {} is the data returned by the interface.

3. Introduce the Mock.js file

Introduce the mock.js file into main.js, and bind the Mock method on Vue.prototype so that the component API can be called When using:

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. Call simulated data

To call simulated data in a component, you can use the Vue.prototype.$Mock.mock() method

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

This way You can use this.$http.get('/api/getList') in the page to request background data, and before joint debugging, make a simulated request in the mock.js file. In this way, the correctness of the code can be fully tested during the development process, while avoiding problems that may be encountered during joint debugging.

Summary:

In the era of separate development of front-end and back-end, the front-end needs interface joint debugging with the back-end. However, in the software development process, joint debugging often has certain problems. In addition to compatibility issues during joint debugging, it is also necessary to solve the problem that the front and back ends cannot be developed at the same time. Therefore, Mock.js can be introduced to simulate back-end data requests to solve this problem. To put it simply: "Simulating the back-end interface allows the front-end to independently test the logical correctness of the front-end page. This fully improves the development efficiency of the front-end, saves development costs, reduces the error rate of multi-person collaborative development, and also Avoid unnecessary trouble when simulating data.

The above is the detailed content of How vue simulates background data requesting local data configuration. For more information, please follow other related articles on the PHP Chinese website!