How to use mock data in vue projects

how do I use mock data in vue projects?

Mar.28,2021

you can use mockjs
to simulate data first

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

const Users = [];

for (let i = 0; i < 50; iPP) {
  Users.push(Mock.mock({
    id: Mock.Random.guid(),
    name: Mock.Random.cname(),
    addr: Mock.mock('@county(true)'),
    'age|18-60': 1, // |
  }));
}

export { LoginUsers, Users };

then simulate the request:

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

any project can use charles to mock data. I find it convenient to use this tool


you can try my plug-in https://juejin.im/post/59e8ad.

.

very simple


my development environment uses easy-mock.com to store data, and then sets it in common.js:
axios.defaults.baseURL =' https://easy-mock.com/mock/59.';

in a production environment, just change the baseURL to the formal data path.


take a look at easy-mock , it should be the best mock plug-in to use ~ this is Chinese document


you can take a look at this. Very practical: how to use MOCK data efficiently and quickly under VUE


although it does not have much to do with mock data, it is recommended that AnyProxy

Menu