Vue uses mockjs to write fake data and apply problem records

When the backend does not write the background json data, but the frontend needs to use data to write the page. This allows you to use mockjs to write a fake data source, send ajax request and get the data

1. Use the command line to download mockjs

npm install mockjs --save-dev

2. Create a new mock folder in the src file directory

3. Create a new json file under the newly added mock folder, example: and a file

The file is as follows

[
    {
        "date": '2016-05-02',
        "name": 'Wang Xiaohu',
        "address": 'Lian 1518, Jinshajiang Road, Putuo District, Shanghai'
    },
    {
        "date": '2016-05-02',
        "name": 'Wang Xiaohu',
        "address": 'Lian 1518, Jinshajiang Road, Putuo District, Shanghai'
    },
    {
        "date": '2016-05-02',
        "name": 'Wang Xiaohu',
        "address": 'Lian 1518, Jinshajiang Road, Putuo District, Shanghai'
    },
    {
        "date": '2016-05-02',
        "name": 'Wang Xiaohu',
        "address": 'Lian 1518, Jinshajiang Road, Putuo District, Shanghai'
    },
]

as follows

//Introduce the mockjs module firstimport Mock from 'mockjs';
// Introduce the path to the file where you write the jsonimport list from './';
 
// Simulated data return("/mock/list", {
    code: 200,
    data: list
});

5. Introduce the file into the entry file under the src folder

import '@/mock/mockServe'

6. Create a new file in the API folder under the src directory

// Secondary encapsulation for axiosimport axios from 'axios';
 
// 1. Use the method create of the axios object to create an axios instance// It's axios, but just a little configurationconst request = ({
    //Configuration object    // Basic path: When sending a request, a mock will appear in the path    baseURL:"/mock",
    // represents the time when the request timeout    timeout:5000
})
 
//Request Interceptor---Send a request in the project (the request was not sent out) can do something((config) =&gt; {
    return config;
  });
  
  //Response interceptor---After the server manually requests, the response will be executed (the corresponding success)  ((res) =&gt; {
      //Subjects that were done successfully      return ;
    },
    (err) =&gt; {
      alert("Server response data failed");
    }
  );
// Expose to the outsideexport default request;

7. Create a new file in the API folder under the src directory

import mockRequest from './mockAjax'
 
export const reqGetList = () => mockRequest({url:'/list',methods:'get'})

8. Write the request code on the corresponding page to send the request

import {reqGetList} from '@/api/
 
mouted(){
    reqGetList().then(res=>{
        (res)
    })
}

After the above steps, you can request corresponding false data on the page.

You can also manage API files in the entry file uniformly

// Any component can use API-related interfacesimport * as API from '@/api'
 = API;

Then send the requested code in the corresponding requested page as

().then(res=>{
	 = ;
})

This is the article about Vue using mockjs to write fake data and apply it. For more related content of Vue mockjs, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!