Vue 项目使用Mockjs

作者: 图恩分类: 开发笔记阅读: 969字数: 1007发布时间： 2020-11-12 14:56:17

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

一、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);

});