Article directory
1. Install Mock.js
Official website:Mock official
Scenario: Use Mock.js to simulate data in the Vue project
First, To install axios and Mock.js in the Vue project, execute the following code in the project directory:
After that, it can be viewed in package.json, which means the installation is successful.
Introduce mock.js and axios into main.js:
2. Simulate GET request
Create a mock folder in the src directory and create a mock.js file in it.
Refer to official documentation:
The Mock function receives three parameters, the first two of which are optional parameters, and the last parameter is required.
- The first parameter: the request address to be intercepted
- Second parameter: request type
- The third parameter: the template or function to pass data
A get request is simulated below. The first parameter is the request path, and the request path is /obtain; the second parameter is the request type, which is the get type; the third parameter is the returned data, which is used here Random function to Mock.
Use buttons in CardView.vue to obtain mock data. this.$axios.get means using get requests, and "/obtain" represents the access path.
Run the project, click the button, and the console will output the mock simulation data:
3. Simulate POST request
A post request is simulated below. The first parameter is the request path, and the request path is /requestPostData; the second parameter is the request type, which is the post type; the third parameter is the parameter carried in the request body.
Define a button on the page to call the request. this.$axios.post represents the post request, "/requestPostData" represents the access path, and {pid:5} represents the parameters carried by the post request.
Run the browser, click the button, and you can see that the POST request was successful!
4. Mock random function
The official tutorial provides a lot of random functions, which can be used directly if quoted. @函数名 You can check the official documentation for the specific usage of the functions.
Example: GET request to obtain data using Mock random function
Write click event on the page:
Click the button and the console will A piece of random data will be output. You can see that the output content is different every time you click.
Requirement: I want to generate not only one data, but multiple data every time I click the button. What should I do?
Method: You can add a quotation mark to data (single or double quotation marks are acceptable), and add a | symbol in the middle, followed by the number 3, that is, "data | 3" means generating 3 pieces of data.
Add a table to the page and render the table with simulated data.
After entering the project, you can see that 3 pieces of random data are generated in the table.
Supplement: "data | 3-6" means randomly generating 3-6 pieces of data.
Summarize
This is what I have learned so far. Any additional corrections are welcome~