Vue 项目使用Mockjs

在前端开发过程中，有后台配合是很必要的。但是如果自己测试开发，或者后台很忙，没时间，那么我们需要自己提供或修改接口。下面这种方式就是前端可以自己添加假数据来实现接口联调。

一、mock文件

1、安装，开发环境

npm i mockjs -S

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

3、index.js内容如下：

import Mock from 'mockjs'

import userInfo from './json/userInfo'

Mock.mock('/userInfo', 'get', userInfo)

export default Mock

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

const userInfo = {

  'responseCode': 0,

  'data': {

    'userSn': '3785521',

    'name': '不求甚解',

    'age': 25

  },

  'msg': '成功'

}

export default userInfo

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

import Vue from 'vue';

import App from './App';

import router from './router';

import Mock from './mock/index'; //引入mock数据，关闭则注释该行

Vue.config.productionTip = false;

new Vue({

  el: '#app',

  router,

Mock,

  components: { App },

  template: '<App/>'

});

6、在vue模板访问

axios.get('/userInfo')

.then(function(res){

  console.log(res);

})

.catch(function(err){

  console.log(err);

});

本文章由javascript技术分享原创和收集