Vue3+Vite项目如何使用mockjs随机模拟数据

您所在的位置：网站首页 › vue使用mockjs前端本地模拟数据 › Vue3+Vite项目如何使用mockjs随机模拟数据

Vue3+Vite项目如何使用mockjs随机模拟数据

2023-05-17 08:00| 来源: 网络整理| 查看: 265

在vite中使用mockjs进行模拟数据，需要借助新的依赖进行使用

一、安装mockjsyarn add mockjs -S 或 npm i mockjs -D登录后复制二、安装vite-plugin-mocknpm i vite-plugin-mock -D登录后复制三、在src/mock/source文件夹下创建user.ts

Vue3+Vite项目如何使用mockjs随机模拟数据

在index.vue中放入以下内容：

import { MockMethod } from 'vite-plugin-mock' export default [ { url: '/api/getUserInfo', // 注意，这里只能是string格式 method: 'get', response: () => { return { menusList: [{ id: '1', title: '南辰', subMenuList: [ { id: '11', title: '南', path: '/user/nan' }, { id: '12', title: '小', path: '/user/xiao' }, { id: '13', title: '辰', path: '/user/chen' } ] }, { id: '2', title: '希', subMenuList: [ { id: '21', title: '玩游戏', path: '/user/play' } ] }] } } } ] as MockMethod[] // 这里其实就是定义数据格式的，不了解的同学可以参考typescript的官方文档登录后复制

四、开发环境配置

如果只是本地开发环境时使用，直接看下面即可步骤

在vite.config.ts进行个人配置

import { viteMockServe } from 'vite-plugin-mock' export default defineConfig({ plugins: [ viteMockServe({ mockPath: "./src/mock/source", // 解析刚刚user.ts的位置 localEnabled: true // 是否开启开发环境 }) ] })登录后复制

在页面中引入

{{name.name}} {{nc}} import { useRoute } from "vue-router"; //引入路由组件 import { onMounted, ref } from "vue"; import axios from "axios"; export default { setup() { const nc = ref(""); onMounted(() => { axios.get("/api/getUserInfo").then((res) => { console.log(res); nc.value = res.data.menusList[0].title; console.log(nc.value); }); }); const $route = useRoute(); const name = $route.query; return { name, nc, }; }, }; 登录后复制

打印效果如下： Vue3+Vite项目如何使用mockjs随机模拟数据

如果想使用随机数可以看接下来的步骤

如果只要随机数则直接生成即可 Vue3+Vite项目如何使用mockjs随机模拟数据

想要随机数在return中放入随机条件即可。

如果想要用随机数中的图片就需要从mockjs中引入一个Random方法 Vue3+Vite项目如何使用mockjs随机模拟数据在页面上进行循环：

;template; ;div v-for="(item,index) in list" :key="index"; ;img :src="item.image" alt=""; ;p;{{item.id}};/p; ;/div; ;/template; ;script lang='ts'; import { useRoute } from "vue-router"; //引入路由组件 import { onMounted, ref } from "vue"; import axios from "axios"; export default { setup() { const list = ref(""); onMounted(() =; { axios.get("/api/getUserInfo").then((res) =; { console.log(res); let lis = res.data.list; console.log(list.value =lis); }); }); return { nc, list, }; }, }; ;/script; ;style scoped; ;/style;登录后复制

这里的Random.image()方法是从官网上拿下来用的 Vue3+Vite项目如何使用mockjs随机模拟数据效果如下：

实现随机不同的图片＋字段import { MockMethod } from 'vite-plugin-mock' export default [ { url: '/api/getUserInfo', // 注意，这里只能是string格式 method: 'get', response: () => { return { 'list|1-10': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1, /* image: Random.image() */ "title": "@ctitle", "color":'@color', "image":"@image('','@color')" }], } } } ] as MockMethod[]登录后复制

index.vue

{{item.title}} import { useRoute } from "vue-router"; //引入路由组件 import { onMounted, ref } from "vue"; import axios from "axios"; export default { setup() { const list = ref(""); onMounted(() => { axios.get("/api/getUserInfo").then((res) => { console.log(res); let lis = res.data.list; console.log(lis); console.log(list.value = lis); }); }); return { list, }; }, }; 登录后复制

Vue3+Vite项目如何使用mockjs随机模拟数据效果如下：

以上就是Vue3+Vite项目如何使用mockjs随机模拟数据的详细内容，更多请关注php中文网其它相关文章！

【本文地址】

Vue3+Vite项目如何使用mockjs随机模拟数据

Vue3+Vite项目如何使用mockjs随机模拟数据

今日新闻

推荐新闻