1.安装
npm install mockjs
2.在src文件夹下建立mock文件夹,在建立index.ts mock.js示例官网
// src/mock/index.ts
// 引入入mockjs
import Mock from "mockjs";
//使用setup配置请求的响应时间,单位是毫秒
Mock.setup({
// timeout: 1000 // 意味着接口1s后返回
timeout: '200-1000' // 意味这接口响应时间介于200毫秒-1s之间
})
// 请求list接口,返回的结构是{ code: 200, data: [{},{}...]}
const list = Mock.mock({
"data|10": [{ // 生成10条数据
"id|+1": 1, // id会自增
name: "@cname", // 随机生成姓名 --中文名
sex: "@integer(0, 1)", // 性别一般是用数字表示 0男生 1女生
email: "@email", // 随机生成邮箱地址
account: "@name", // 随机生成账号名 -- 英文
status: "@boolean", // 随机生成布尔值 表示账户状态
profile: "@image( 50x50, #FF6600, #fff, png, 头像 )", // 随机生成头像
createTime: "@datetime(yyyy-MM-dd HH:mm:ss)", // 随机生成创建时间
role: '@pick(["董事长", "总监", "经理", "组长"])', // 随机生成角色
},
],
});
Mock.mock("/list", "get", {
code: 200,
...list,
total: 10,
});
//导出
export default list;
3.在main.ts引入mock/index
//main.ts
import '@/mock/index'
4.使用mock数据,在需要使用的地方发送请求获取数据
//在home.vue中
//引入钩子函数onMounted
import { onMounted } from 'vue'
//引入封装好的发请求接响应
import service from '@/axios/service';
onMounted (()=>{
const res = service.get('/list').then(res=>{
console.log('res.data',res.data)
})
})
在页面打印结果