vue中使用mockjs

时间:2024-07-06 21:37:14

第一步安装mockjs:npm i mockjs -S

在src目录下新建mock文件夹,文件夹添加test.js

test.js内容如下:

import Mock from 'mockjs';
const List = [];
const count = 20; for (let i = 0; i < count; i++) {
List.push(Mock.mock({
id: '@id',
title: '@ctitle(10, 20)',
'status|1': ['published', 'draft'],
author: '@cname',
display_time: '@datetime',
pageviews: '@integer(300, 5000)'
}));
} const nowPeople = {
"errcode": "0",
"errmsg": "success",
"data": {
"expo_audience": "@integer(100, 5000)",
}
} const viewNumber = {
"errcode": "0",
"errmsg": "success",
"data": { "desk_num": 24, "desk_duration": 105.50, "per_desk_duration": 25.20 }
} export const nowPeopleData = Mock.mock('http://compony.com/api/v1/t1', nowPeople);
export const viewNumberData = Mock.mock('http://compony.com/api/v1/t2', viewNumber);

在main.js中引入:

import * as expo from './mock/test.js'

axios.defaults.baseURL = 'http://compony.com/api/v1'

在组件中使用:

this.axios.get('/t1').then((data) => {
}

等到后台开发好api后,只需要注释掉import * as expo from './mock/test.js' 即可,其他代码都不用动