经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue3+Vite项目使用mockjs随机模拟数据
来源:jb51  时间:2023/1/28 8:43:00  对本文有异议

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

一、安装mockjs

  1. yarn add mockjs -S npm i mockjs -D

二、安装vite-plugin-mock

  1. npm i vite-plugin-mock -D

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

请添加图片描述

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

  1. import { MockMethod } from 'vite-plugin-mock'
  2.  
  3. export default [
  4. {
  5. url: '/api/getUserInfo', // 注意,这里只能是string格式
  6. method: 'get',
  7. response: () => {
  8. return {
  9. menusList: [{
  10. id: '1',
  11. title: '南辰',
  12. subMenuList: [
  13. {
  14. id: '11',
  15. title: '南',
  16. path: '/user/nan'
  17. },
  18. {
  19. id: '12',
  20. title: '小',
  21. path: '/user/xiao'
  22. },
  23. {
  24. id: '13',
  25. title: '辰',
  26. path: '/user/chen'
  27. }
  28. ]
  29. }, {
  30. id: '2',
  31. title: '希',
  32. subMenuList: [
  33. {
  34. id: '21',
  35. title: '玩游戏',
  36. path: '/user/play'
  37. }
  38. ]
  39. }]
  40. }
  41. }
  42. }
  43. ] as MockMethod[] // 这里其实就是定义数据格式的,不了解的同学可以参考typescript的官方文档
  44.  

四、开发环境配置

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

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

  1. import { viteMockServe } from 'vite-plugin-mock'
  2.  
  3. export default defineConfig({
  4. plugins: [
  5. viteMockServe({
  6. mockPath: "./src/mock/source", // 解析刚刚user.ts的位置
  7. localEnabled: true // 是否开启开发环境
  8. })
  9. ]
  10. })
  11.  

在页面中引入

  1. <template>
  2. <div>{{name.name}}</div>
  3. <div>{{nc}}</div>
  4. </template>
  5.  
  6. <script lang='ts'>
  7. import { useRoute } from "vue-router"; //引入路由组件
  8. import { onMounted, ref } from "vue";
  9. import axios from "axios";
  10. export default {
  11. setup() {
  12. const nc = ref("");
  13. onMounted(() => {
  14. axios.get("/api/getUserInfo").then((res) => {
  15. console.log(res);
  16. nc.value = res.data.menusList[0].title;
  17. console.log(nc.value);
  18. });
  19. });
  20. const $route = useRoute();
  21. const name = $route.query;
  22. return {
  23. name,
  24. nc,
  25. };
  26. },
  27. };
  28. </script>
  29. <style scoped>
  30. </style>

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

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

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

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

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

  1. &lt;template&gt;
  2. &lt;div v-for="(item,index) in list" :key="index"&gt;
  3. &lt;img :src="item.image" alt=""&gt;
  4. &lt;p&gt;{{item.id}}&lt;/p&gt;
  5. &lt;/div&gt;
  6. &lt;/template&gt;
  7.  
  8. &lt;script lang='ts'&gt;
  9. import { useRoute } from "vue-router"; //引入路由组件
  10. import { onMounted, ref } from "vue";
  11. import axios from "axios";
  12. export default {
  13. setup() {
  14. const list = ref("");
  15. onMounted(() =&gt; {
  16. axios.get("/api/getUserInfo").then((res) =&gt; {
  17. console.log(res);
  18. let lis = res.data.list;
  19. console.log(list.value =lis);
  20. });
  21. });
  22.  
  23. return {
  24. nc,
  25. list,
  26. };
  27. },
  28. };
  29. &lt;/script&gt;
  30. &lt;style scoped&gt;
  31. &lt;/style&gt;

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

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

  1. import { MockMethod } from 'vite-plugin-mock'
  2. export default [
  3. {
  4. url: '/api/getUserInfo', // 注意,这里只能是string格式
  5. method: 'get',
  6. response: () => {
  7. return {
  8. 'list|1-10': [{
  9. // 属性 id 是一个自增数,起始值为 1,每次增 1
  10. 'id|+1': 1,
  11. /* image: Random.image() */
  12. "title": "@ctitle",
  13. "color":'@color',
  14. "image":"@image('','@color')"
  15. }],
  16. }
  17. }
  18. }
  19. ] as MockMethod[]
  20.  

index.vue

  1. <template>
  2. <div v-for="(item,index) in list" :key="index">
  3. <img :src="item.image" alt="">
  4. {{item.title}}
  5. </div>
  6. </template>
  7.  
  8. <script lang='ts'>
  9. import { useRoute } from "vue-router"; //引入路由组件
  10. import { onMounted, ref } from "vue";
  11. import axios from "axios";
  12.  
  13. export default {
  14. setup() {
  15. const list = ref("");
  16. onMounted(() => {
  17. axios.get("/api/getUserInfo").then((res) => {
  18. console.log(res);
  19. let lis = res.data.list;
  20. console.log(lis);
  21. console.log(list.value = lis);
  22. });
  23. });
  24. return {
  25. list,
  26. };
  27. },
  28. };
  29. </script>
  30. <style scoped>
  31. </style>

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号