# Mock Data

Mock data is an integral part of the front-end development, the key link to separate the front and back-end development. By pre-agreed with the server-side interface, analog request data and even logic, can make the front-end development independent, will not be blocked by the development of the server.

# Swagger

In my company project, the data is usually simulated by the backend using swagger. swaggerit is a REST APIs document generation tool that can cross-platform automatically generated from code comments, open source, support most of the language, the community is good. In short, it is very good and strongly recommended.

Online Demo

# Easy-mock

nxAdmin-template uses easy-mock to simulate the data. It is a pure front-end visualization, and can quickly generate simulation data persistence services. It's very easy to use and can be combined with swagger, suporrt cors. It's worth a try for both the team and the individual project.

Online Demo

# Mockjs

nx-admin is a purely front-end personal project, so all the data is generated locally by mockjs. Its principle is: intercept all requests and proxy to local simulation data, so no network sends any request.

If you need to remove it is easy.

All mock data is in the @/src/mock directory. It will only intercept the url you declared in @/src/mock/index.js.

Remove: Just remove import '/Mock' from@/src/main.js and delete the @/src/mock folder.

# Switch from mock directly to server request

There are many times when we encounter, local use of mock data, and the online environment uses real data.

• Easy-Mock

You need to ensure that your local simulated api is consistent with all other addresses except the root path. such as:

https://api-dev/login   // Local request

https://api-prod/login  // Online request

We can use the environment variables to do different environments and request different api base path.

//dev.env.js
module.exports = {
  // Inject the base path of thie local
  BASE_API: '"https://api-dev"'
};

//prod.env.js
module.exports = {
  // Inject the base path of thie production
  BASE_API: '"https://api-prod"'
};

Then create an axios instance based on the environment variable to have a different baseURL. @/utils/request.js

// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // request timeout
});

In this way we can automatically switched local and online apis based on environment variables.

• Mock.js

When we use Mock.js to simulate data locally, the real-world api method is used online. This is similar to the easy-mock method above. We mainly judge that when it is an online environment, we use real-world api. We only import Mock.js locally.

//main.js
if (process.env.NODE_ENV === "development") {
  require("./mock"); // simulation data
}

Mock data is only import in the local environment.