ajax生成随机数,vue进阶3 - Mock.js（生成随机数据，模拟Ajax请求）

一、安装

1.安装mock、axios

npm install mockjs axios

2、安装axios-mock-adapter

axios-mock-adapter是axios与mock配置器，是axios的模拟调试器

npm install axios-mock-adapter --save-dev

二、创建mock文件

1.新建src/mock/data/user.js，生成随机数据

import Mock from 'mockjs'; // 导入mockjs 模块

let Users = []; // 定义我们需要的数据

for (let i = 0; i <= 90; i++) {

Users.push(Mock.mock({ // 根据数据模板生成模拟数据

id: Mock.Random.guid(), // 随机生成一个id

name: Mock.Random.cname(), // 随机生成一个常见的中文姓名。

addr: Mock.mock('@county(true)'), // @county(true)为数据模板

'age|18-60': 1, // 'age|18-60': 1 为数据模板

birth: Mock.Random.date(), // 随机生成日期

sex: Mock.Random.integer(0, 1), // 随机生成整数, min:0, max1,

}));

}

const LoginUsers = [ // 制造登录账号，便于模拟登陆测试

{

id: 1,

username: 'admin1',

password: '123456',

name: '王某某'

},

{

id: 2,

username: 'admin2',

password: '123456',

name: '陈某某'

}

]

export { // 导出列表数据

LoginUsers，Users

};

2.新建src/mock.mock.js，模拟ajax请求的接口，生成并返回模拟数据

reply的参数为 (status, data, headers)

configt指前台传过来的数据

resolve([状态值，{返回的数据}])

import axios from 'axios';

import MockAdapter from 'axios-mock-adapter';

import { LoginUsers, Users } from './data/user'

let _Users = Users;

export default {

start() { //初始化函数

let mock = new MockAdapter(axios); // 创建 MockAdapter 实例

//登录

mock.onPost('/login').reply(config => {

let {username, password} = JSON.parse(config.data);

return new Promise((resolve, reject) => {

let user = null;

setTimeout(() => {

let hasUser = LoginUsers.some(u => {

if(u.username === username && u.password === password) {

user= JSON.parse(JSON.stringify(u));

user.password = undefined;

return true;

}

});

if(hasUser) {

resolve([200, { code:200, msg: '登录成功', user }]);

} else {

resolve([200, { code: 500, msg: '账号或者密码错误' }]);

}

},1000);

});

});

// 获取用户列表

mock.onGet('/user/list').reply(confige => {

let {name} = confige.params;

let mockUsers = _Users.filter(user => {

if(name && user.name.indexOf(name) == -1) return false;

return true;

});

return new Promise((resolve, reject) => {

setTimeout(()=> {

resolve([200, {

users: mockUsers

}])

}, 1000);

});

});

}

}

3.新建src/mock/index.js，导入同级下mock.js的内容，并且导出

import mock from './mock';

export default mock;

4.打开src/main.js， 引入mock，全局加载mock并执行初始化函数

import Mock from './mock'

Mock.start();

三、封装api函数

1.新建src/api/api.js，把所有接口都写到一个文件里面，封装成一个个函数，便于修改与管理

import axios from 'axios';

export const Login = params => { return axios.post(`/login`, params).then(res.data); };

export const getUserList = params => { return axios.get(`/user/list`, { params: params }); }

2.新建src/api/index.js

import * as api from './api';

export default api;

四、调用接口

新建src/pages/login.vue

登录

登录

import { Login } from '@/api/api'

export default {

data () {

return {

form2: {

username: '',

password: ''

},

rules2: {

username: [

{ required: true, message: '请输入账号', trigger: 'blur' },

],

password: [

{ required: true, message: '请输入密码', trigger: 'blur' }

]

}

}

},

methods: {

handleSubmit() {

this.$refs.form2.validate(valid => {

if(valid) {

let para = { username: this.form2.username, password: this.form2.password }

Login(para).then(res => {

let { msg, code } = res;

console.log(msg, code)

if(code !== 200 ) {

this.$message.error(msg)

} else {

this.$message.success(msg);

this.$router.push({ path: '/'})

}

})

} else {

return false;

}

});

}

}

}

.login {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

.login2 {

height: 100%;

width: 60%;

}