vue3中使用mockjs模拟数据及获取
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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)
})
})
在页面打印结果
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)