vue项目中怎么使用mock数据

Question

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

Answer 1

可以直接使用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

Answer 2

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

Answer 3

可以试下我这个插件https://juejin.im/post/59e8ad...

非常简单

Answer 4

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

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

Answer 5

看一下easy-mock吧，应该是最好用的mock插件了~这个是中文文档

Answer 6

可以看看这个，非常实用：VUE下如何高效快捷的使用MOCK数据

Answer 7

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