In the front-end development process, it is necessary to have background cooperation. But if we test our own development, 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 easier, I recommend the second.

Mock files

1, installation, development environment

npm i mockjs -D

Create a mock directory under SRC 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'));Copy the code

4. The content of the JSON file is as follows, using userinfo. json as an example:

{" result ":" success ", "data" : {" userSn ":" 3785521 ", "username" : "natural", "age" : 25, "imgUrl" : "https://avatar.csdn.net/8/5/D/3_bocongbo.jpg" }, "msg": "" }Copy the code

5. Introduce mock data in the main.js entry file and comment it out if you don’t need it.

import Vue from 'vue'; import App from './App'; import router from './router'; require('./mock'); // Introduce mock data, annotate line vue.config. productionTip = false if closed; new Vue({ el: '#app', router, components: { App }, template: '<App/>' });Copy the code

6. Access the vUE template

axios.get('/user/userInfo')
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});
Copy the code