vue項(xiàng)目中怎么使用mock數(shù)據(jù)

什么項(xiàng)目都可以用charles來mock數(shù)據(jù),我覺得用這個(gè)工具很方便

可以使用
mockjs 通用mock函數(shù)
xe-ajax 一個(gè)開源的基于Promise API請求函數(shù)，支持 Mock
https://github.com/xuliangzha...

可以直接使用mockjs
首先模擬數(shù)據(jù)：

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, // 屬性名和屬性規(guī)則通過|分開
  }));
}

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: '賬號或密碼錯(cuò)誤', data});
      }
    }, 1000);
  });
});

//首頁數(shù)據(jù)
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

可以看看這個(gè)，非常實(shí)用：VUE下如何高效快捷的使用MOCK數(shù)據(jù)

可以試下我這個(gè)插件https://juejin.im/post/59e8ad...

非常簡單

我開發(fā)環(huán)境用easy-mock.com來存放數(shù)據(jù)，然后在common.js中設(shè)置：
axios.defaults.baseURL = 'https://easy-mock.com/mock/59...';

到生產(chǎn)環(huán)境中，把baseURL改為正式的數(shù)據(jù)路徑就行了。

看一下easy-mock吧，應(yīng)該是最好用的mock插件了~這個(gè)是中文文檔

雖然 跟mock 數(shù)據(jù)關(guān)系不大，不過還是要推薦一下 AnyProxy