What problem does Mock.js solve

Question:

The front-end and back-end projects are separated. The front-end and back-end personnel develop projects according to API documents. They should not rely on each other directly, and the front-end personnel should not wait
Test after the back-end interface is developed. Since it does not rely on the back-end interface, how should the front-end personnel test?

solve:

Through the simulation data generator, the simulation data interface can be generated through certain rules (API documents) and provided to the front-end personnel for testing.

What is Mock.js
Official website: mock official website
file: mock.js document

Mock.js is used to generate random data and intercept Ajax requests.
By intercepting Ajax requests and generating and returning simulation data according to the data template, the front-end siege division can develop independently of the back-end and help write unit tests.

Using EasyMock

What is EasyMock

Easy Mock is a visual service that can quickly generate simulation data. It is an extremely simple, efficient
An online Mock service that can visualize and quickly generate simulation data.
Now Easy Mock has built-in Mock.js, so we can forge data more happily.
Official website: https://www.easy-mock.com/ The server is inaccessible
file: https://www.easy-mock.com/docs
Easy Mock built by dream Valley: http://mock.mengxuegu.com/

Create project

1. visit http://mock.mengxuegu.com/ , log in.
   Note: there is no separate registration page. The user name entered for the first time will automatically help you register. Pay special attention to the entry without changing the password, so be sure to remember the password
   

2. Click + in the lower right corner to create a project
   

3. Create a project as follows:
   

Create test data interface

1. Click Create interface
   

2. EasyMock add analog data configuration

Request address: / test
Request method: get

{
"code": 20000,
"message": "Operation succeeded"
}

1. Test whether the data interface is normal
   

Call data interface

1. Use the devServer.proxy option in the vue.config.js file to configure the proxy

Note: copy the Base URL created by yourself. If you want to use the teacher's, copy the URL in the source code instead of the document.

devServer: {
// . .  ellipsis
before: require('./mock/mock-server.js'),
// Development environment agent configuration
proxy: {
[process.env.VUE_APP_BASE_API] :{ // Is the '/ dev API' of the. env.development file:
// Destination server address
target: 'http://mengxuegu.com:7300/mock/5f114e0544ef223bad8c9827/blog-admin',
changeOrigin: true, // Turn on the proxy server,
pathRewrite: {
// '^/dev-api': '',
[ '^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
},

1. Create the src/api/test.js file to define the calling interface API

import request from '@/utils/request'
export default{
test() {
return request({
url: '/test',
method: 'get'
})
}
}

1. Call the interface to get data

// Introduce api
import api from '@/api/test'
export default {
//... omitted
created() {
this.fetchData()
},
methods: {
fetchData() {
api.test().then(response => {
console.log(response)
})
}
},
}

1. visit http://localhost:9528/#/dashboard Home page, check whether the browser prints the value

Post request with parameter message timeout
Modify the request mode of the / test interface to post

Question:
If Axios sends a Post request with request parameters, it will always report a request timeout, as shown below

import request from '@/utils/request'
export default{
test() {
return request({
url: '/test',
method: 'post',
data: {'name': 'waiter'}
})
}
}

reason:
This problem is caused by the express middleware body parser in mock server. It shows that there is no problem with requests without parameters, and that happens with parameters

The solution is:

1. Comment out the comments under the mock\mock-server.js file and add a new one (about line 12)

// app[mock.type](mock.url, mock.response)
app[mock.type](mock.url, bodyParser.json(), bodyParser.urlencoded({
extended: true
}), mock.response)

1. Then pull down and find the comment below

// app.use(bodyParser.json())
// app.use(bodyParser.urlencoded({
// extended: true
// }))

1. After modification, the complete diagram: