vue中使用mockjs

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

第一步安装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' 即可，其他代码都不用动

以上是 vue中使用mockjs 的全部内容， 来源链接： utcz.com/z/379715.html

回到顶部