vue 项目中mockjs的使用

最新推荐文章于 2024-07-06 01:02:54 发布
最新推荐文章于 2024-07-06 01:02:54 发布
阅读量476 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 环境及插件安装 文章标签： mockjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/115697741
本文详细介绍了如何在项目中通过npm安装mockjs，并创建mock.js文件夹进行自定义接口模拟，以便于开发环境中的API调试。通过实例演示，读者可以掌握如何在main.js中导入并在实际请求中使用mockjs，避免真实网络请求。最后，我们了解到mockjs能有效隐藏实际请求，仅在Network中显示模拟数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、在项目中通过下列代码安装

npm install mockjs --save-dev

二、如出现下列问题

在这里插入图片描述
可执行

 npm audit fix

三、在src目录下创建一个mock.js文件夹 并创建index.js

1、 引入Mock.js

import Mock from 'mockjs'

2、自定义数据
3、模拟接口
4、导出

在这里插入图片描述

四、在main.js中引入

在这里插入图片描述

五、在需要发送请求的地方正常使用

在这里插入图片描述

六、结果显示

因为mockjs是拦截ajax所以请求是不会在Network中显示
在这里插入图片描述

Vue+mock进阶版（可在network中查看到请求）
weixin_44813417的博客
11-09 3737
创建文件mockService.js 打开控制台 node mockService.js 在network中可以查看到。 （我写的vue+mock初级入门中不可在network中查看到请求） let express = require("express"); //引入express模块 let Mock = require("mockjs"); //引入mock模块 let app = express(); //实例化 /*post方法*/ var bodyParser = require("bo..
vue中使用mockjs模拟接口数据
qq_39099766的博客
12-05 584
背景 今天需要在项目中新增一个模块, 但是该模块暂时没有提供接口, 所以我们使用mock.js自己模拟接口数据, 这样接口提供完成后, 只需要取消掉模拟数据即可. 安装mockjs npm i mockjs --save 创建mock全局文件 由于我是在项目中新增一个模块, 且项目本身原先并没有使用mockjs, 所以我的想法是局部增加数据模拟功能 在main.js同级创建一个m...
vue2+vant mock模拟数据在页面上渲染出来 （五）
老段的优快云的博客
08-12 1073
把utils/request.js 换成真实开发后端路径。2、在页面中显示子三个组件数据效果。三个组件请求api接口提供的数据。api请求mock模拟出的数据。mock.js进行模拟数据。组件效果和请求接口成功。
使用mock.js模拟网络请求
m0_59638475的博客
05-05 960
6.在src下新建utils文件夹，里面新建axios.js文件来封装一个网络请求。5.再mock文件夹下新建mockServe.js文件。login.json 文件(模拟响应回来的数据)7.封装接口API，src目录下新建文件夹api，3.在全局文件 main.js中引入axios。8.在需要使用的页面调接口即可。1.安装mock.js。
Vue3解决：Mockjs 引入后并访问 404(Not Found) 的页面报错问题
狮子座的男孩
07-27 5958
但在页面 报错为：GET http://localhost:5173/list 404 (Not Found)(即：在页面并没有找到自己引入 Mockjs 时，设置的地址和假数据)功能常用于解决数据模拟问题，有了 Mock 工具模拟数据后，前后端可以同步进入开发，提升团队研发效率；前端开发往往依赖于后端数据接口，在后端接口就绪能够返回数据之前，前端通常很难开工;根据上述的问题剖析和描述，发现：在引入。项目中，引入了 Mockjs。后，设置的数据和地址有问题；
vue-cli项目中使用Mockjs详解
10-18
在介绍Vue-cli项目中使用Mock.js的详细过程之前，我们先来了解下前端技术的发展背景和Mock.js的作用。在早期的jQuery时代，前端与后端通常合为一体，前端工作依赖于后端接口的开发。随着Node.js的出现和前后端分离的...
vue3 使用mockjs
weixin_45044818的博客
04-04 3655
背景 在如今的项目开发中，基本上使用的都是前后端分离的开发模式，前后端在开发前会约定一份开发文档，规定接口的结构。如果后端接口没有写好或者没有环境可以让你去调用这个接口，如果这时，什么都不做，也会影响开发的一个效率，所以前端可以使用mock来模拟接口请求。本文章在vue-cli3项目中配置mock。 安装mock npm install mockjs --save 配置mock 在项目的src下创建一个mock文件夹，mock文件夹里面的文件如图所示 _createMock.ts文件查找到当前目录下的所有
Vue项目使用mockjs模拟后端接口
最新发布
qq_44957574的博客
07-06 821
vite-plugin-mock 是 vite 提供的mock插件，配合mockjs 一起使用，比较方便。在 vite.config.js 中配置 viteMockConfig。通过axios发送请求，请求到mock的模拟接口。mockPath 就是mock文件夹的路径。文件夹，作为后续编写mock接口的路径。，用来请求之前创建的mock接口地址。如果控制台打印出结果，则说明配置成功。文件夹下新建一个 js 文件，如。该文件创建了一个模拟接口，地址为。该文件创建了一个请求接口。
Mock.js在Vue项目中的使用
m0_67403073的博客
08-02 569
这里是小飞侠Pan??，立志成为一名优秀的前端程序媛！！！本篇博客收录于我的github前端笔记仓库中，持续更新中，欢迎star~??httpsvalue属性值是字符串Stringstring通过重复string生成一个字符串，重复次数大于等于min，小于等于max。string通过重复string生成一个字符串，重复次数等于count。属性值是数字Numberstring通过重复string生成一个字符串，重复次数大于等于min，小于等于max。//...
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
前端 Mock 工具
王乐平 技术博客
01-02 1082
名称 地址 安装 Mock.js https://github.com/nuysoft/Mock npm install mockjs mockm https://github.com/wll8/mockm npm install mockm JSON Server https://github.com/typicode/json-server npm install json-server MSW(Mock Service Worker) https://github.com/...
vue-cli+mock.js+axios模拟前后台数据交互
aiqy91387的博客
07-19 301
最近工作不是很忙，自己做了一个vue的移动端的小项目，涉及到后台数据的时候，网上查阅了一些资料，因为是自己写的项目没有后台只能自己模拟数据，刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些，刚好也了解一下axios因为之前用的是vue-resource，就此开始挖坑填坑之路------- 首先说一下mock.jshttp://mockjs.com/这是它的官网，讲的还是很...
mock的基本使用-------axios篇
m0_60899441的博客
07-29 1296
mock
浏览器网络请求在Network面板显示有返回值，但实际响应为空白
来自上海的这位朋友
08-23 976
最新的BUG记录引发关注：浏览器网络请求在Network面板显示有返回值，但实际响应为空白。问题根源或许源自网络连接不稳定、服务器异常，甚至数据处理错误。解决步骤建议团队首先排除网络干扰，随后深入检查服务器端和前后端代码，找出异常。密切合作与沟通是关键，团队应整合开发、测试人员的经验，借助调试工具迅速定位。这一记录提醒软件开发者，网络问题是潜在的异常因素，通过团队努力找到问题源并解决，将提升应用稳定性与性能。
Ajax第一篇 掌握 axios 相关参数，从服务器获取并解析展示数据 掌握接口文档的查看和使用 掌握在浏览器的 network 面板中查看请求和响应的内容 了解请求和响应报文的组成部分
一只小老虎
04-15 970
掌握 axios 相关参数，从服务器获取并解析展示数据 掌握接口文档的查看和使用 掌握在浏览器的 network 面板中查看请求和响应的内容 了解请求和响应报文的组成部分
axios+mockjs在vue中的使用
weixin_34102807的博客
06-06 307
一.安装和使用mockjs(参考教程https://blog.youkuaiyun.com/HZKang/article/details/78104739)注意这个教程的第四步的代码最后缺少一个结束的 } 号,而且安装他的第四步跑不起项目,我作了改写才行,我的代码是能运行起来的1.npm安装mockjs打开cmd进入项目下载mockjs至项目中：npm intsall mockjs --save复制代码2.在...
前端mock数据初学
guanhy594230的博客
09-16 1167
前端mock数据的使用 一. 使用easy-mock 此方法最为简便,下图为easy mock的截图 例如在@vue/cli项目中,可以在vue.config.js中配置 open: false, host: '0.0.0.0', // 允许外部ip访问 port: 8022, // 端口 https: false, // 启用https overla...
中文版chrome开发者工具的network栏不显示请求信息
qq_52867389的博客
08-19 3520
吐槽一下谷歌的翻译~“被屏蔽的请求”改为-->“屏蔽请求行”或许更好理解，也不至于看不到这个显眼包~
在vue中使用mockjs
08-31
在Vue中使用Mock.js可以帮助我们在开发过程中模拟接口返回的数据，方便前端进行接口调试和开发。下面是使用Mock.js的步骤： 1. 安装Mock.js：在项目的根目录下执行以下命令安装Mock.js： ``` npm install mockjs -...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值