vue3中使用mockjs模拟数据及获取

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)
  })
}) 

在页面打印结果