[JavaScript知识库]mock数据，VUE模拟后台接口

在前端开发过程中，有后台配合是很必要的。但是如果自己测试开发，或者后台很忙，没时间，那么我们需要自己提供或修改接口。下面提供两种方式，第二种更简单，个人推荐第二种。

一、mock文件

1、安装，开发环境

npm i mockjs -D

2、在src目录下新建mock目录，结构如下：

3、index.js内容如下：

const Mock = require('mockjs');

//格式： Mock.mock( url, post/get , 返回的数据)；

Mock.mock('/user/userInfo', 'get', require('./json/userInfo'));

Mock.mock('/home/banner', 'get', require('./json/homeBanner'));

4、json文件内容如下，以userInfo.json为例：

{
  "result": "success",
  "data": {
    "userSn": "3785521",
    "username": "不求甚解",
    "age": 25,
    "imgUrl": "https://picture.jpg"
  },
  "msg": "success"
}

5、在main.js入口文件中引入mock数据，不需要时，则注释掉。

import Vue from 'vue';
import App from './App';
import router from './router';
 
require('./mock'); //引入mock数据，关闭则注释该行
 
Vue.config.productionTip = false;
 
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

6、在vue模板访问

async getUserDatas(){
  let res = await axios.get('/user/userInfo')
  if (res.status === 200) { 
  console.log('sussecc', res) 
  } else {
    throw new Error('error', res.message)
  }
}