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

更新时间：2023年01月26日 13:02:15 作者：Nanchen_42

这篇文章主要介绍了Vue3+Vite项目使用mockjs随机模拟数据,需要的朋友可以参考下

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

一、安装mockjs

yarn add mockjs -S 或 npm i mockjs -D

二、安装vite-plugin-mock

npm i vite-plugin-mock -D

三、在src/mock/source文件夹下创建user.ts

请添加图片描述

在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 // 是否开启开发环境
    })
  ]
})

在页面中引入

<template>
  <div>{{name.name}}</div>
  <div>{{nc}}</div>
</template>

<script lang='ts'>
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,
    };
  },
};
</script>
<style scoped>
</style>

打印效果如下：
请添加图片描述

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

如果只要随机数则直接生成即可
请添加图片描述
在这里插入图片描述

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

如果想要用随机数中的图片就需要从mockjs中引入一个Random方法
在这里插入图片描述
在页面上进行循环：

&lt;template&gt;
  &lt;div v-for="(item,index) in list" :key="index"&gt;
   &lt;img :src="http://9i0i.com/pic.php?p=item.image" alt=""&gt;
   &lt;p&gt;{{item.id}}&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang='ts'&gt;
import { useRoute } from "vue-router"; //引入路由组件
import { onMounted, ref } from "vue";
import axios from "axios";
export default {
  setup() {
    const list = ref("");
    onMounted(() =&gt; {
      axios.get("/api/getUserInfo").then((res) =&gt; {
        console.log(res);
        let lis = res.data.list;
        console.log(list.value =lis);
      });
    });

    return {
      nc,
      list,
    };
  },
};
&lt;/script&gt;
&lt;style scoped&gt;
&lt;/style&gt;

这里的Random.image()方法是从官网上拿下来用的
在这里插入图片描述
效果如下：

实现随机不同的图片＋字段

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

<template>
<div v-for="(item,index) in list" :key="index">
 <img :src="http://9i0i.com/pic.php?p=item.image" alt="">
 {{item.title}}
 </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(lis);
        console.log(list.value = lis);
      });
    });
    return {
      list,
    };
  },
};
</script>
<style scoped>
</style>

在这里插入图片描述
效果如下：

到此这篇关于Vue3+Vite项目使用mockjs随机模拟数据的文章就介绍到这了,更多相关Vue3+Vite项目使用mockjs模拟数据内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

Vite+Vue3使用MockJS的实现示例

Vue.js项目模板搭建图文教程
下面小编就为大家带来一篇Vue.js项目模板搭建图文教程。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue项目中CSS?Modules和Scoped?CSS的介绍与区别
在vue中我们有两种方式可以定义css作用域,一种是scoped,另一种就是css modules,下面这篇文章主要给大家介绍了关于Vue项目中CSS?Modules和Scoped?CSS的相关资料,需要的朋友可以参考下
2022-03-03
Vue中混入mixin的用法介绍
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
2022-10-10
Vue生产环境调试的方法步骤
开发环境下Vue会提供很多警告来帮你对付常见的错误与陷阱,而在生产环境下,这些警告语句却没有用,反而会增加应用的体积,下面这篇文章主要给大家介绍了关于Vue生产环境调试的方法步骤,需要的朋友可以参考下
2022-04-04
vue实现把页面导出成word文件的方法
这篇文章主要为大家详细介绍了vue实现把页面导出成word文件的方法,文中的实现步骤讲解详细,并且有详细的代码示例,需要的小伙伴可以参考一下
2023-10-10
Vue使用electron生成桌面应用过程详解
这篇文章主要介绍了Vue使用electron生成桌面应用过程，很想使用 electron 制作一个桌面应用，但是真的上手使用的时候才发现 electron 的坑实在是太多了，先将遇到的坑记录在这里，遇到一个记录一个
2023-04-04
探索Vue高阶组件的使用
本篇文章主要介绍了探索Vue高阶组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue在取对象长度length时候出现undefined的解决
这篇文章主要介绍了vue在取对象长度length时候出现undefined的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue动态绑定background的方法
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
2023-10-10
vue+element自定义查询组件
这篇文章主要为大家详细介绍了vue+element自定义查询组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09