Mock.js 问题记录

于 2024-05-09 11:26:37 发布
阅读量510 收藏 5
点赞数 3
分类专栏： vue 文章标签： javascript 开发语言 Mock
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LL596214569/article/details/138606686
版权

文章目录

Mock.js 问题记录

最新写网页的时候引入了 Mock.js 来生成模拟数据；
Mock使用起来很方便，具体可以参考 官网 很快就能上手，
但是这个项目最近一次提交还是在2019年，git上提的issue也没有回复，似乎作者已经放弃维护了，我在使用过程中遇到了一些问题，这里做一下记录；

1. 浮点数范围限制对小数不起效

在这里插入图片描述

官方文档上给的说明float占位符参数是 float( min, max, dmin, dmax )
但是实际测试时发现当指定小数时，如果指定的范围都>0, 得到的结果范围是 (min)-(max+decimal)
如果指定的范围有负数，结果范围是 (min-decimal)-(max+decimal)

2. increment 全局共用

自增占位符是全局公用的，也就是整个进程中都是用的同一个 increment 值；

在这里插入图片描述

<
最低0.47元/天 解锁文章
vue2/3 - 使用mock模拟数据，axios发送请求时报错Request failed with status code 404报错，请求数据报错404，vue mock.js 报错详细解决！
高级前端工程师
07-10 2775
vue，nuxt，mock，插件，模拟请求接口数据，报错，用mockjs模拟数据，axios发送get请求时出错，路径没问题为什么会404，接口地址没有错，请求数据报错404，http请求出现了问题，axios，详细解决教程，404，mock.js请求数据报错404，vue报错解决，浏览器，请求，URL请求地址，正确，错误，Request failed with status code 404，vue报错解决:mock.js请求数据报错404_vue中使用mockjs没有数据，vue-cli中mock本地j
VUE 修复MOCKJS ResponseType BUG
03-22
VUE 修复MOCKJS ResponseType BUG
mockjs 应用时遇到的问题汇总
qq_18283943的博客
10-27 785
mockjs 应用时遇到的问题汇总主要的技术难点：1.数据结构的随机数据的生成存在重复性2.使用mockjs 中碰到的问题 主要的技术难点： 1.数据结构的随机数据的生成存在重复性 工作量主要集中在如果定义好一个数据结构，以及如何做做到，本地开发和线上数据衔接的便捷处理方案； 2.使用mockjs 中碰到的问题 1.mockjs 中模拟请求会自动修改requestType 导致，自定义的requestType失效，引起类如文件excel 等文件上传下载的数据流数据出错等需要设置特定requestType的请
Vue3解决：Mockjs 引入后并访问 404(Not Found) 的页面报错问题
狮子座的男孩
07-27 5872
但在页面 报错为：GET http://localhost:5173/list 404 (Not Found)(即：在页面并没有找到自己引入 Mockjs 时，设置的地址和假数据)功能常用于解决数据模拟问题，有了 Mock 工具模拟数据后，前后端可以同步进入开发，提升团队研发效率；前端开发往往依赖于后端数据接口，在后端接口就绪能够返回数据之前，前端通常很难开工;根据上述的问题剖析和描述，发现：在引入。项目中，引入了 Mockjs。后，设置的数据和地址有问题；
[mockjs]Mock使用过程中的坑
前端
09-16 701
该方式是直接对mockjs中/src/mock/xhr/xhr.js文件进行修改，但是该方式只有原作者修改并上传才不会影响下次的使用，否则更改的是本地的，对于每次初始化时重新下载了mockjs无法从根本上解决。mockjs源码导致了文件流被responseType:'json’解析了，因此无法正确识别，因此，我们只需在将转换为json的response.data重新转换为需要的类型。在使用了 mockjs 的情况下，接收到的response.data不是文件流，而是string类型。
mockjs 项目实战踩坑
diaofugeng2712的博客
09-19 671
MOck.js ;由于业务需要，第一次接触Mock.js,只是用于实战，不是多精通；我至今也有个疑惑还没解开； 使用坑总结； 首先mock.js 进行模拟数据， 1 第一个bug 写了Ajax右键打开，会报错：Cross origin requests are only supported for protocol schemes: http, data, chrome, ...
mock.js的使用
qq_45387575的博客
12-16 1981
每个属性由三部分组成：属性名、生成规则、属性值生成规则的含义需要依赖属性值的类型才能确定占位符只是在属性值字符串中占个位置，并不会出现在最终的属性值中@占位符@占位符(参数 [, 参数])占位符引用的是Mock.Random中的方法可以通过 Mock.Random.extend() 来扩展自定义占位符。
Mock.js（前端模拟数据生成器）使用简介
不怕麻烦的鹿丸的博客
02-23 1529
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值// 属性名 name// 生成规则 rule// 属性值 value属性名 和 生成规则 之间用 |分隔。生成规则 是可选的。生成规则 有 7 种格式：生成规则 的 含义 需要依赖 属性值 才能确定。属性值 中可以含有 @占位符。属性值 还指定了最终值的初始值和类型。1、属性值是字符串String通过重复'value'生成一个字符串，重复次数大于等于min，小于等于max。通过重复'value'
Vue项目中的mock.js的使用以及基本用法和ES6的新增方法
m0_62019369的博客
10-29 5556
Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截Ajax请求不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。官网注：easy-mock，一个在线模拟后台的数据平台。
Mock.js随机字符串方法string的bug记录
※老鼠拧刀满街找猫※
12-31 2073
在写一个随机生成密码的过程中，引用到了Mock.js这个库，测试过程发现了string方法测试的数据一多就会出现bug，这里把执行的@string(8,9)这个随机的方法也显示到随机的结果里面，如下： 后来查看 ...
玩转 Mockjs，前端也能跑的很溜(2)
2301_82243603的博客
05-03 855
生成一个区间数值。生成一个 min 到 max 之间的数值，num 用来指定类型//使用运行结果：生成一个 1-3 之间的数字。可能的结果有：1、2、3生成带有小数点的数字。生成一个浮点数，整数部分介于 min 和 max 之间，小数保留 dmin 到 dmax 位。num 用来指定类型。//使用运行结果：生成 1-10 之间的带有 1到 2 位小数的浮点数。如：2.1、3.12 等生成一个整数部分为 5 ,保留 1 到 2 位小数的浮点数。如：5.1、5.33、5.09 等。
Mockjs POST和GET不同参数返回不同结果的解决办法
黄彪博客
08-27 5389
文章目录文章参考问题描述Mock 关键API介绍说明API 介绍参数说明案例POST 请求，相同的URL不同的参数GET 请求，相同的URL不同的参数Restful 请求，不同的URL不同的参数 文章参考 Mock.mock() 方法介绍 Mockjs如何拦截带参数的GET请求 问题描述 在工作中想使用POST请求方式获取数据字典的数据，由于不同的数据字典需要传递不同的参数，但是接口是同一个，这样就尴尬了，因为URL是固定的，那么怎么区分不同的参数呢？ Mock 关键API介绍说明 API 介绍 Mo
mockjs的使用
qq_40409143的博客
03-28 1549
mockjsmockjs是什么为什么要使用mockjs（背景）具体怎么使用使用后带来的效果可以使用哪些协助工具哪些地方可以突破，可以做的更好还有其他的类似工具吗可以提高使用的效率吗设计的思想是什么为什么可以模拟后端接口呢，为什么不会导致跨域问题呢你从中收获到了什么 mockjs是什么 为什么要使用mockjs（背景） 具体怎么使用 使用后带来的效果 可以使用哪些协助工具 rap2 可以使用rap2工具来管理自己的API，RAP是一个接口管理平台。 注册登入之后可以写自己的接口。如图： 通过使用这个工具，可
前端Mockjs数据模拟
weixin_45974259的博客
02-18 1846
1.安装mockjs(本案例完整代码在最下方) 通过指令npm install mockjs安装mock , 之后在src文件夹下创建一个mock文件夹,再在mock文件夹下创建一个index.js文件 之后接着在main.js文件中引入mock 之后就可以在mock文件下的index.js文件中模拟数据了 1.首先我们需要在mock下的index.js文件中引入mock import Mock from "mockjs"; 2.接着在此处我们模拟了一个 新闻列表数据 ,该数据是..
Vue项目中常见问题(19)mockjs模拟数据
qq_46368050的博客
05-16 1411
目录 gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master 1.对于ListContainer组件与Floor组件数据服务器没有提供数据(接口),怎么办? 2.mock数据是什么? 3.安装mockjs 4.mockjs使用的步骤 4.1在项目当中的src文件夹当中创建一个mock文件夹 4.2准备JSON数据(在mock文件夹中创建相应的JSON文件) 4.3把mock数据需要的图...
利用Mock变量在ApiPost发送一个自增的参数（例如page）
weixin_47719617的博客
06-01 2051
ApiPost简介： ApiPost是一个支持团队协作，并可直接生成文档的API调试、管理工具。它支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员不可多得的工具 。 什么是Mock变量： Mock变量就是通过ApiPost内置的mock.js生成随机的数据（MockJS官网：http://mockjs.com/）。 为什么要在ApiPost里使用Mock变量？ 常规情况下，我们进行接口测试，都是手动输入参数，比如下图： 我们手动输入了100作为参数ID的值进行发送，对于一般
TypeScript + Vue3 + mock使用过程中遇到的问题记录：mockjs发送带有参数的get的请求返回结果404，得不到响应结果
Dpl0216的博客
09-02 2496
TypeScript + Vue3 + mock使用过程中遇到的问题记录：mockjs发送带有参数的get的请求返回结果404，得不到响应结果问题的解决
前端的date类型后台接收_前端mock数据(超级详细)
weixin_39583222的博客
11-19 1615
在实际的项目研发过程中，我们经常会遇到如下的尴尬场景：前端开发依赖于后端接口数据，但是后台人员不足或者无法立即到位，前端迟迟不能开工，或者前端小伙子自己参照ui设计图，完成对应的静态页面（没有数据交互），待后台人员到位，再进行二次开发，协助完成接口对接。1.什么是mock数据？前后端同时开发的时候，后端接口数据没有出来，前端可以mock假数据，模拟开发；2.mock数据的优势？A 团队可以并行...
如何在Vue CLI项目中集成Mock.js来模拟后端增删改查操作的接口响应数据？请结合实例进行说明。
最新发布
11-09
在Vue CLI项目中集成Mock.js进行数据模拟，尤其在后端接口尚未完成时，对于前端开发者来说是一个提升开发效率和预览界面与功能的实用技能。具体操作如下： 参考资源链接：[Vue-cli项目中mockjs的实战教程：数据模拟与删除](https://wenku.csdn.net/doc/2g2460wv95?spm=1055.2569.3001.10343) 首先，确保你已经全局安装了Vue CLI，并使用`vue init webpack vue-mock`命令来创建一个新的项目。之后，全局安装Mock.js包，使用命令`npm install mockjs --save-dev`。 在项目中，创建一个`mock`目录，并在其中创建一个`index.js`文件，用于定义模拟数据。在`main.js`中引入Mock.js，并使用Mock.mock方法定义你的数据模型。例如，可以创建一个简单的用户列表模拟数据： ```javascript const Mock = require('mockjs'); // 模拟用户数据 Mock.mock('/api/users', 'get', { 'data|10': [{ 'id': '@increment()', 'name': '@name', 'age|18-30': 1, 'email': '@email' }] }); // 模拟添加用户的接口 Mock.mock('/api/users/add', 'post', (config) => { const newItem = JSON.parse(config.body); Mock.mock('/api/users', 'get', { 'data|10': [...Mock.data('api/users').data, newItem] }); return newItem; }); // 模拟删除用户的接口 Mock.mock('/api/users/:id', 'delete', (config) => { const id = config.url.split('/api/users/')[1]; Mock.mock('/api/users', 'get', { 'data|10': Mock.data('api/users').data.filter(item => item.id !== +id) }); return { success: true }; }); // 模拟更新用户的接口 Mock.mock('/api/users/:id', 'put', (config) => { const id = config.url.split('/api/users/')[1]; const newItem = JSON.parse(config.body); Mock.mock('/api/users', 'get', { 'data|10': Mock.data('api/users').data.map(item => { if (item.id === +id) { return newItem; } return item; }) }); return newItem; }); ``` 在上述代码中，我们定义了四个接口模拟：获取用户列表、添加用户、删除用户和更新用户。每条记录都包含一个唯一的`id`、一个随机生成的名字、年龄和电子邮箱。使用`@increment()`生成递增的`id`，使用`@name`、`@age`和`@email`生成模拟数据。 通过`Mock.mock`方法，我们指定了接口路径和请求类型，并提供了模拟的数据返回。这样，在开发阶段，前端可以模拟与后端进行交互，而无需等待后端API的完成。 最后，启动Vue项目并运行`npm run dev`，Mock.js就会拦截指定的API请求，并返回模拟的数据。这样，你就可以在前端实现增删改查的操作，并看到相应的界面响应。 为了更深入理解如何在Vue CLI项目中集成Mock.js，建议阅读《Vue-cli项目中mockjs的实战教程：数据模拟与删除》。本教程不仅介绍了如何在Vue CLI项目中集成Mock.js，还详细演示了如何使用Mock.js模拟增删改查操作的接口响应数据，适合希望提高项目开发效率和体验前后端分离带来的好处的开发者。 参考资源链接：[Vue-cli项目中mockjs的实战教程：数据模拟与删除](https://wenku.csdn.net/doc/2g2460wv95?spm=1055.2569.3001.10343)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值