The method of mock data Simulation background Interface in vue

This article mainly explains "the method of mock data simulation background interface in vue". The explanation in this article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the method of mock data simulation background interface in vue".

In the process of front-end development, it is necessary to have background cooperation. But if we test and develop ourselves, or if the background is too busy to have time, then we need to provide or modify the interface ourselves.

Here are two ways, the second is simpler, and the second is recommended by individuals.

I. mock file

1. Installation, development environment

Npm i mockjs-D

2. Create a new mock directory under the src directory with the following structure:

3. The contents of index.js are as follows:

Const Mock = require ('mockjs'); / / format: Mock.mock (url, post/get, returned data); Mock.mock (' / user/userInfo', 'get', require ('. / json/userInfo')); Mock.mock ('/ home/banner', 'get', require ('. / json/homeBanner'))

4. The contents of the json file are as follows. Take userInfo.json as an example:

{"result": "success", "data": {"userSn": "3785521", "username": "not very clear", "age": 25, "imgUrl": "https://avatar.csdn.net/8/5/D/3_bocongbo.jpg"}," msg ":"}"

5. Introduce mock data into the main.js entry file, and comment it out when it is not needed.

Import Vue from 'vue';import App from'. / App';import router from'. / router'; require ('. / mock'); / / import mock data. If closed, comment the line Vue.config.productionTip = false; new Vue ({el:'# app', router, components: {App}, template:''})

6. Access the vue template

Axios.get ('/ user/userInfo') .then (function (res) {console.log (res);}) .catch (function (err) {console.log (err);}); second, third party interface eolinker

1. Official website API address: https://www.eolinker.com/#/home/project/api/

Need to log in, unregistered partners, sign up for an account.

2. After registration, there is a default interface, of course, we have to do our own project.

3. New project

4. Add an interface

5. Custom API

6. Use the interface

7. In the front-end project, the backend url address has many versions, such as development version, beta version, production line version and so on. It is recommended that everyone manage it uniformly and do url splicing when visiting.

Thank you for your reading, the above is the content of "the method of mock data simulation background interface in vue". After the study of this article, I believe you have a deeper understanding of the method of mock data simulation background interface in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!