vue项目中怎么使用mock数据

vue项目中怎么使用mock数据?

阅读 9.5k
7 个回答

可以直接使用mockjs
首先模拟数据:

import Mock from 'mockjs';
const LoginUsers = [
  {
    id: 1,
    username: 'zhangl',
    password: 'qwe123123',
    avatar: '',
    name: 'zhangl'
  }
];

const Users = [];

for (let i = 0; i < 50; i++) {
  Users.push(Mock.mock({
    id: Mock.Random.guid(),
    name: Mock.Random.cname(),
    addr: Mock.mock('@county(true)'),
    'age|18-60': 1, // 属性名和属性规则通过|分开
  }));
}

export { LoginUsers, Users };

然后模拟请求:

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { LoginUsers, Users } from './mockdata/user';

const mock = new MockAdapter(axios);

mock.onGet('/success').reply(200, {
  msg: 'success'
});

mock.onGet('/error').reply(500, {
  msg: 'failure'
});

// 登录
mock.onGet('/login').reply(config => {
  let {username, password} = config.params;
  return new Promise((resolve, reject) => {
    let data = {};
    setTimeout(() => {
      let hasUser = LoginUsers.some(u => {
        if (u.username === username && u.password === password) {
          data = JSON.parse(JSON.stringify(u));
          data.password = undefined;
          data.err = 0
          return true;
        }
        else {
          data.err = 1
        }
      });

      if (hasUser) {
        resolve([200, { code: 200, message: '请求成功', data }]);
      } else {
        reject({ code: 500, message: '账号或密码错误', data});
      }
    }, 1000);
  });
});

//首页数据
mock.onGet('/user/list').reply(config => {
  let { pageIndex } = config.params.pageIndex
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([200, {code: 200, message: '请求成功', data: Users}]);
    }, 1000);
  })
})

export default mock

什么项目都可以用charles来mock数据,我觉得用这个工具很方便

我开发环境用easy-mock.com来存放数据,然后在common.js中设置:
axios.defaults.baseURL = 'https://easy-mock.com/mock/59...';

到生产环境中,把baseURL改为正式的数据路径就行了。

虽然 跟mock 数据关系不大,不过还是要推荐一下 AnyProxy

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题