【精品】vite3+vue3 整合 mock.js |
您所在的位置：网站首页 › vue使用mock教程 › 【精品】vite3+vue3 整合 mock.js |
【精品】vite3+vue3 整合 mock.js
|
mockjs官网 安装插件npm install mockjs --save-dev npm i vite-plugin-mock cross-env -D
在src下创建mock文件夹，然后在其中创建user.ts文件： 方式一 export default [{ type:'get', url:'/rbacapi/permission/getById/3', response: () => { return { code:200, msg:"ok", data:"hahaaha" } } }] 方式二 import { MockMethod } from 'vite-plugin-mock' export default [ { url: '/rbacapi/permission/getById/3', // 注意，这里只能是string格式 method: 'get', response: () => { return { code:200, msg:"ok", data:"xixixixixi" } } } ] as MockMethod[] // 这里其实就是定义数据格式的，不了解的同学可以参考typescript的官方文档 方式三 import {MockMethod} from 'vite-plugin-mock' import Mock from 'mockjs'; const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据 export default [ { url: '/rbacapi/permission/getById/3', // 注意，这里只能是string格式 method: 'get', response: () => { return { code: 200, msg: 'success', data: () => { const data = { id1: Random.guid(), id2: Random.string(10), idcard: Random.string('number', 8, 18), name: Random.cname(),// 随机生成任意名称 loginname: Random.name(), // 生成姓名 birth: Random.date('yyyy-MM-dd'), //参数指定日期格式，也可以不指定 gender: Random.boolean, country: Random.county(), province: Random.province(), homepage: Random.url(), // 生成web地址 intro: Random.cword(100, 160) } return data; }, } }, }, ] as MockMethod[]; // 定义数据格式 结果
除了可以使用上面在vite.config.ts文件中配置的方式外，还可以不在这个文件中配置，而是在页面中需要mock文件时，手动引入，当然也可以在main.ts文件中集中引入（方便在产品环境中集中删除）。 第一步：在src/mock文件夹中创建文件Province.ts： import Mock from 'mockjs' // 引入mockjs const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据 Mock.setup({//设置请求延时时间 timeout: 1000 }) let category ={ id:Random.guid(), name:"aaa", age:"bbb" } Mock.mock('/rbacapi/permission/getById/3', "get", category) //调用模拟数据方法 第二步：vue页面 hello world 人都是会遗忘的，但这也忘记的太快，太彻底了！ Plain import http from '@/utils/request'; import '@/mock/Product'; //引入mock文件 function fun() { http.get("/rbacapi/permission/getById/3").then(res => { console.log(res); }) } 结果
|
【本文地址】
今日新闻 |
推荐新闻 |