vue3项目中mock的使用

已于 2023-09-20 23:35:36 修改
阅读量320 收藏 2
点赞数
分类专栏： vue 文章标签： javascript 前端 vue.js
于 2023-09-20 23:32:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50630857/article/details/133106746
版权

本地mock的使用

  1. src下新建mock文件夹和mock.js文件以及mock数据文件夹mockData
  2. 通过mock.js设置拦截器的地址并且返回相关的数据
  3. 在main.js中引入api/mock.js文件
  4. 在.vue文件中使用mock

  • src/mock/mockData/home.js

  • mock.js

  • home.vue中使用

线上fastmock的使用

新增 -> 添加项目 -> 添加接口 -> 预览接口

  • 添加项目

  • 添加接口

  • 预览接口

  • 网址为请求的地址

  • 应用到.vue文件

qq_50630857
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目中mock.js的使用及基本用法
12-09
官方网址：http://mockjs.com/ mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。 使用方式 这里主要讨论在vue项目中，使用axios发送ajax请求，mock.js模拟数据的流程。 vue-cli搭建项目后，安装axios和mock.js npm install -S axios npm install -D mockjs 在项目中新建mock.js文件夹，来设置要产生的模拟数据的格式。 3. 设想这样一个场景，页面在打开时要从数据库获取一个新闻列表，现
vue3 使用 mock 模拟服务器接口
bigcrab的博客
03-08 774
在前端开发中，需要模拟请求或者数据来做一些简单的调试，这里可以使用mock来模拟服务器接口；在src目录下创建mock文件夹，然后在mock文件夹中放置两个文件，一个。这里需要安装两个包，一个是。返回的是一个数组就好了。
Vue3使用Mock
Qing_0124的博客
04-19 5315
1.安装mock和axios npm install --save-dev mockjs npm install --save axios 2.创建mock文件夹 3.配置main.js文件 import axios from 'axios' require("./mock/mockApi.js");//提前创建好的mock文件 const app = createApp(App) app.config.globalProperties.$axios = axios; 4.配置mock
记录：VUE3中本地mock和线上请求
最新发布
qq_41300217的博客
03-21 137
【代码】记录：VUE3中本地mock和线上请求。
vue-cli3中使用mock（实际项目中快速搭建）
10-27
模块化配置mock,结合mock-api,axios,可应用于实际项目中；前后端分离开发之后，有了mock就可以不用等后端的接口完成后调用接口，前端可以自行模拟接口数据，快速开发。
vue3中使用mock.js
qq_42369064的博客
08-18 1738
Mock.js 是一个用于生成随机数据的模拟数据生成库。它可以帮助开发人员在前端开发中创建模拟接口，以便进行测试和开发。生成随机数据：Mock.js 提供了丰富的数据模板语法，可以根据指定的规则生成各种类型的随机数据，包括数字、字符串、布尔值、日期等。拦截 Ajax 请求：使用 Mock.js，你可以拦截前端的 Ajax 请求，并根据模板定义生成模拟数据返回给前端，以模拟后端接口的行为。
vue3中如何使用mock--看完必会
蜗牛~~
06-29 1014
当项目前后端同时开发，后端来不及提供接口时，前端可通过mock来模拟后端返回数据，非强制性使用 ，详情参考。随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。// 这种默认调用mockJS.Random的image的第一种方法。Mock.Random 是一个工具类，用于生成各种随机数据。只是在属性值字符串中占个位置，并不出现在最终的属性值中。，取其返回值作为最终的属性值，函数的上下文为属性。占位符引用的是 Mock.Random 中的方法。
vue3中使用mock
想好了再写！
05-23 1480
-设置模拟数据的存储文件夹，如果不是index.js需要写明完整路径。supportTs?: boolean;--是否读取ts文件模块，设置为true时不能读取js文件。--是否在控制台显示请求日志。
Vue3中简单使用Mock.js
weixin_45616480的博客
07-20 7583
前端开发人员用来模拟虚拟数据，拦截ajax请求，方便模拟后端接口。
Vue3项目中使用mock服务
qq_42981449的博客
04-04 731
4.设置接口返回数据，在mock文件夹下创建education/textbook.js文件。
【mockjs】vue3项目使用mockjs
m0_66571906的博客
02-09 1726
【mockjs】vue3+ts项目使用mockjs
详解vue-cli项目中怎么使用mock数据
01-19
注意：网上很多教程说需要在build目录下的dev-server.js文件中配置，但目前最新的vue-cli是没有dev-server.js这个文件的，因为已经被合并到webpack.dev.conf.js文件中，所以直接在该文件中配置即可 步骤 1、在根目录...
vue-cli项目中怎么使用mock数据
11-26
在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作...
vue3项目中mockjs的使用
FOR_HOU的博客
11-28 384
vue3项目中mockjs的使用。
Vue3：在 VSCode 中如何成功安装 Mockjs 及成功引入 Mock 的详细过程
狮子座的男孩
07-03 6148
前端开发往往依赖于后端数据接口，在后端接口就绪能够返回数据之前，前端通常很难开工; `Mock` 功能常用于解决数据模拟问题，有了 `Mock` 工具模拟数据后，前后端可以同步进入开发，提升团队研发效率。
十一、vue3+vite项目配置mock数据
blue_121的博客
07-14 1413
在根目录创建mock文件夹:去创建我们需要mock数据与接口！在 vite.config.js 配置文件启用插件。在mock文件夹内部创建一个user.ts文件。
vue3 Mock 数据使用
jieweiwujie的博客
02-16 77
4 在根目录创建mock:去创建我们需要mock数据与接口！根目录下创建 在mock文件夹内部创建一个user.ts文件。3 在 vite.config.js 配置文件启用插件。只看 viteMockServe相关的。5 安装接口插件 axios。在main.js中使用。或者使用npm都可以。
Vue3项目中使用Mock模拟接口数据【提高开发效率】
forever__fish的博客
08-25 2467
前端开发者可以在本地进行模拟后端数据，在请求数据之前进行拦截，这样就不会影响前端视图的展示了，mock就可以实现。
Vue3:mock模拟数据
qq_45061461的博客
02-20 529
2.创建user.ts，编写请求请求接口参数 以及 返回值。4.创建mock-vue.d.ts。3.创建typing.ts。1.创建index.ts。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值