步骤一:安装Mockjs
npm install mockjs
步骤二:在mock文件夹中新建users.js文件
步骤三:在users.js文件中引入mockjs
const Mock = require("mockjs");
导出随机用户信息
module.exports = {
'GET /api/users':(req,res)=>{
res.status(200).json({
users: Mock.mock({
'data|80-100': [
{
id:'@id',//随机id
name:'@name',//随机名称
nickName:'@last',随机昵称
phone:/^1[34578]\d{9}$/,//随机电话号码
'age|11-99':1,//年龄
address:'@county(true)',//随机地址
email:'@email',//随机邮箱
isMale:'@boolean',//随机性别
createTime:'@datetime',//创建时间
avatar() {
//用户头像
return Mock.Random.image('100×100',Mock.Random.color(),'#757575','png',this.nickName)
}
}
]
})
})
}
}
步骤四:
.roadhogrc.mock.js文件中写入,可以将mock文件夹中所有js依次读取
import fs from "fs";
import path from "path";
const mock = {}
fs.readdirSync(path.join(__dirname + '/mock')).forEach(function (file){
if(file.match(/\.js$/)) {
Object.assign(mock, require('./mock/' + file))
}
})
export default mock
步骤五:在services文件夹下的example.js中新加一个api
export function getUsers(){
return request("/api/users")
}
步骤六:在组件中引入并调用
import * as api from "../services/example"
在componentDidMount中调用
componentDidMount(){
api.getUsers()
.then(res=>{
console.log(res.data)
})
}
打印结果: