how do I use mock data in vue projects?
how do I use mock data in vue projects?
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
Previous: What is the behavior of mvcc under innodb's read-uncommitted isolation level?
Next: An indescribable error was encountered while updating the vue-router view
...
make a rich text editor with quill editor, but hope to have a button and click to switch between the text and the source code. The effect is as follows: I don t know what to do. I m not very good at data binding. I hope someone will teach me. Tha...
I developed a music APP project with vue2.0, and the page access was normal in development mode, but there was a 404 error when accessing the dist index.html file after build came out, and I struggled with it for many days. Note in advance: I changed m...
if I add this line of code to main.js, I will report an error: import toastRegistry from . common toast index.js it s normal if you don t add it. I checked that the path does exist ...
as developers, we hope to provide customers (various enterprises) with multiple sets of templates for official websites. there is no seo requirement, so the front and back end separation architecture is used. at present, the ways I can think of are: ...
when using tabbar of iview-weapp, if tabbar is used as a component, will all pages that call tabbar refer to tabbar again? and after referencing, the following tabbar will refresh and flash when you click on the jump page. How to solve this problem? ...
recently using IndexedDB does not quite understand how to use index + cursor to make a fuzzy query of a date for example, the index I built is a time stamp "PROJDATE ": "0:00:00 on 2019-1-9 " I want to use a fuzzy query to query it as long as it matc...