Now most of the projects are Taiwan before and after separation, this kind of development mode is likely to encounter a problem didn’t write good – if the backend interface, the front desk may be wasted, so to a certain extent, reduces the efficiency of front end development, blocked the progress of the project, so is there a plugin simulation data can help us? The answer is yes — Mock
What is a Mock?
Mocks use random data to simulate various scenarios. You can intercept Ajax requests and return simulated response data without modifying existing code; Support to generate random text, numbers, booleans, dates, email, links, pictures, colors, etc. Support Supports more data types, custom functions, and regex.
advantages
The advantage is that it is very simple, non-invasive, and basically overrides common interface data types.
Second, the application in the project
Without further ado, or directly look at the code!
1. Install
npm i mockjs
Copy the code
Mock > mock > mock > index. Js > extend_data.js
// mock/index.js
import Mock from "mockjs";
import "./extend_data"; // Extend data
// Mock data templates
let template = {
"list|10-20": [
// The number of repetitions is between 10 and 20 (for each item in the array), with a single number representing n repetitions
{
// For each item in the array
address: "@county()".// Generate random countries
name: "@name()".// Generate random names
imgUrl: "@image()".// A random image URL is generated
id: "@id()".// Random id
"Score | 23-78.1-4": 1.// Is a decimal number. The integer part is between 23 and 78, with 1 to 4 digits reserved
"isShow|1": true.// isShow may be half true and half false
"star|1-5": "nuc".// Repeat the string "nuc" 1-5 times
"index|+1": 1.// The attribute value is automatically incremented by 1. The initial value is number. index:1,index:2,index:3...
"cities|5": ["@city()"].// The property value is an array, each of which is a random city, and each array is 5 in length
props: {
// Attribute is an object
"population|100-1000": 1.first: "@first()"
},
num: / / \ d {5, 10}.// The value of the attribute is a regular expression, which generates regular expression data.
funcTem: function(param) {
// The attribute value is an object
// console.log(param.context.currentContext); // Returns the object of the current property funcTem
return param.context.currentContext.id;
},
streetArr: "@streets" // Each item is taken from the template array}};/ / start the mock
Mock.mock("/api/getAddress"."get", template);
// Mock.mock("/api/getPerson", "get", templatePerson);
export default Mock;
Copy the code
3. Extend data — use mock. Random
// Mock extension methods
import Mock from "mockjs"; // Introduce the mock library
const random = Mock.Random;
random.extend({
streets: function() {
// Streets here will be used with @ in the future
var streetList = ["Chenyang Village".Century Avenue."Wai Yang West Road"."Tianggu Eight Road"];
return this.pick(streetList); }});export default random;
Copy the code
4. In the entry file main.js, import the index.js file
import "mock/index.js" ;// Globally introduce mock configuration files
Copy the code
5. Simulate the request using AXIos
getAddress() {
this.axios.get("/api/getAddress").then(res= > {
console.log(res);
});
}
Copy the code
Requested data