Vue development practice is my best practice, not the best in the industry, only for your reference, this is a series of articles, but the release time and content is not fixed.

introduce

Mock data is an important part of front-end development in a development pattern that separates the front and back ends.

With Mock data, the front-end can be developed in parallel with the back-end without having to rely on the back-end interface. After the interface is completed, you only need to shield the Mock API, and the test can be published once the integration is successful.

But if your company uses API management tools like RAP2, YAPI, etc., you can skip this article. They all offer online Mocks.

Writing mock interfaces

Create a directory

Create a mocks directory under SRC/of your project where all mock interfaces will be written:

Away / ├ ─ ─ index. Js# Unified exit└ ─ ─ data /You can save mock data as JSON
Copy the code

Mock API

The mockJS library is familiar, although it has not been updated for a long time, but it is sufficient for current development, or try the better-Mock library.

// src/mocks/index.js

import Mock from 'mockjs'

// To be authentic, you can set the timeout property, which is recommended
// See https://github.com/nuysoft/Mock/wiki/Mock.setup()
Mock.setup({
  timeout: '200-600'
})

// Generate Mock data. You can also use json files instead
const data = Mock.mock({
   // Template syntax
   // See http://mockjs.com/examples.html
  'users|10': [{id: '@id'.realName: '@cname',}})// Intercept the request
// See https://github.com/nuysoft/Mock/wiki/Mock.mock()
Mock.mock('/api/users'.() = > {
  return data.users
})

// Support for passing HTTP Method
Mock.mock('/api/users'.'GET'.() = > {
   // ...
})

// Can be written as an HTTP service
Mock.mock('/api/users'.'GET'.(req) = > {
   console.log(req.url) // => /api/users? sortBy=createAt
   // ...
})
Copy the code

The sample

Introduce the mock file at the entry point and the functionality will work.

// src/main.js

import './mocks'

import Axios from 'axios'

// The request made does not appear on the console because it was intercepted
Axios.get('/api/users')
Copy the code

File splitting

However, if there are too many interfaces, the file will become large and difficult to maintain, and can be split into multiple file management, such as:

├─ search. Mock. Js # Mock ├─ search. MockCopy the code

You can also create subdirectories based on business, with *.mock.js or *.mock.ts ending for dynamic matching and identification.

Split the Mock configuration file

Detach the MockJS configuration into the setup.mock.js file

// src/mocks/setup.mock.js

import Mock from 'mockjs'

// To be authentic, you can set the timeout property, which is recommended
// See https://github.com/nuysoft/Mock/wiki/Mock.setup()
Mock.setup({
  timeout: '200-600'
})
Copy the code

Split the Mock API

Split the API into xx.mock.js files

// src/mocks/users.mock.js

import Mock from 'mockjs'

// Generate Mock data. You can also use json files instead
const data = Mock.mock({
   // Template syntax
   // See http://mockjs.com/examples.html
  'users|10': [{id: '@id'.realName: '@cname',}})// Intercept the request
// See https://github.com/nuysoft/Mock/wiki/Mock.mock()
Mock.mock('/api/users'.() = > {
  return data.users
})
Copy the code

Automatic loading of Mock files

Automatically loads the *.mock.js file with the require.context provided by Webpack.

Vue-cli encapsulates the Webpack tool so we can use it directly.

// src/main.js

import Axios from 'axios'

// Only develop the launch Mock function
if (process.env.NODE_ENV === 'development') {
   // Change the file suffix for TypeScript projects
   const imp = require.context('./mocks'.true./\.mock\.js$/)

   // loop to load files
   imp.keys().forEach(key= > imp(key))
}
}

// The request made does not appear on the console because it was intercepted
Axios.get('/api/users')
Copy the code

Used in Vite

Vie also supports dynamic import modules, using Glob imports

// src/main.ts

import Axios from 'axios'

// Only develop the launch Mock function
if (import.meta.env.DEV) {
   import.meta.globEager('./mocks/**/*.mock.ts')}// The request made does not appear on the console because it was intercepted
Axios.get('/api/users')
Copy the code

series

  • The routing configuration
  • Menu and Routing
  • Local Proxy scheme
  • Local Mock scheme