vue 项目中mockjs的使用

最新推荐文章于 2024-07-06 01:02:54 发布
原创 最新推荐文章于 2024-07-06 01:02:54 发布 · 507 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#mockjs

本文详细介绍了如何在项目中通过npm安装mockjs，并创建mock.js文件夹进行自定义接口模拟，以便于开发环境中的API调试。通过实例演示，读者可以掌握如何在main.js中导入并在实际请求中使用mockjs，避免真实网络请求。最后，我们了解到mockjs能有效隐藏实际请求，仅在Network中显示模拟数据。

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

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 3787
创建文件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 603
背景 今天需要在项目中新增一个模块, 但是该模块暂时没有提供接口, 所以我们使用mock.js自己模拟接口数据, 这样接口提供完成后, 只需要取消掉模拟数据即可. 安装mockjs npm i mockjs --save 创建mock全局文件 由于我是在项目中新增一个模块, 且项目本身原先并没有使用mockjs, 所以我的想法是局部增加数据模拟功能 在main.js同级创建一个m...
使用mock.js模拟网络请求
m0_59638475的博客
05-05 1043
6.在src下新建utils文件夹，里面新建axios.js文件来封装一个网络请求。5.再mock文件夹下新建mockServe.js文件。login.json 文件(模拟响应回来的数据)7.封装接口API，src目录下新建文件夹api，3.在全局文件 main.js中引入axios。8.在需要使用的页面调接口即可。1.安装mock.js。
vue如何使用mockjs摸拟接口数据
龙旗飘扬的舰队
02-11 1754
Vue 中使用 mock 有两种使用方式，一种是仅编写数据来调用，第二种是编写 服务+数据模拟真实接口（可在network查看） Mock对象API用例查看（推荐只看这个就可以） 官方mock定义api查询 第一种方式，编写mock 可以写完整action url：http://localhost/login 同一域下，也可以只写api形式：/login 使用 Mock.mock 可以编...
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vue-cli项目中使用Mockjs详解
10-18
在介绍Vue-cli项目中使用Mock.js的详细过程之前，我们先来了解下前端技术的发展背景和Mock.js的作用。在早期的jQuery时代，前端与后端通常合为一体，前端工作依赖于后端接口的开发。随着Node.js的出现和前后端分离的...
Vue项目使用mockjs模拟后端接口
最新发布
qq_44957574的博客
07-06 951
vite-plugin-mock 是 vite 提供的mock插件，配合mockjs 一起使用，比较方便。在 vite.config.js 中配置 viteMockConfig。通过axios发送请求，请求到mock的模拟接口。mockPath 就是mock文件夹的路径。文件夹，作为后续编写mock接口的路径。，用来请求之前创建的mock接口地址。如果控制台打印出结果，则说明配置成功。文件夹下新建一个 js 文件，如。该文件创建了一个模拟接口，地址为。该文件创建了一个请求接口。
vue3中mockjs模拟获取数据
m0_68716504的博客
02-19 1282
开发项目的时候，如果后端接口没有出来，前端工程师也不必非得等接口出来才进行下步开发。可以使用mock.js来模拟接口数据，以下就是使用vue3设置hook函数来封装axios请求，配合mock.js来实现的代码，mock的官网。
Mock.js在Vue项目中的使用
m0_67403073的博客
08-02 598
这里是小飞侠Pan??，立志成为一名优秀的前端程序媛！！！本篇博客收录于我的github前端笔记仓库中，持续更新中，欢迎star~??httpsvalue属性值是字符串Stringstring通过重复string生成一个字符串，重复次数大于等于min，小于等于max。string通过重复string生成一个字符串，重复次数等于count。属性值是数字Numberstring通过重复string生成一个字符串，重复次数大于等于min，小于等于max。//...
mockjs的学习
izwell的博客
08-27 519
mcokjs学习 以前制造假数据的时候，都是使用的json文件来模拟的，这样就需要自己需要编写大量的假数据，以及进行接口的更改。后来通过使用mock.js这个脚本库来制造假数据，将代码与数据进行了分离，且假数据可以根据一定规则随机生成，大大提高了开发的效率。 mockjs的使用十分简单，其github首页的描述已经十分详细了。具体的语法可以查看官网https://github.com/...
vue2+vant mock模拟数据在页面上渲染出来 （五）
老段的优快云的博客
08-12 1106
把utils/request.js 换成真实开发后端路径。2、在页面中显示子三个组件数据效果。三个组件请求api接口提供的数据。api请求mock模拟出的数据。mock.js进行模拟数据。组件效果和请求接口成功。
Vue 使用mockjs模拟后台接口数据
树上骑个猴的博客
12-29 615
前后端分离开发，有时候前端页面很快就写出来了，需要接口数据来测试页面交互功能是否正常，但是后端接口还迟迟未出来，此时就可以使用mock模拟数据了。又或者有时候自己写个前端demo缺乏接口，这时也可以使用Mock来模拟接口数据。 1.npm安装mock插件 cd项目目录，执行： npm install mockjs --save-dev 2.在项目的src目录下新建mock.js文件，并引入mockjs import Mock from 'mockjs' function getData(){ l.
Vue3解决：Mockjs 引入后并访问 404(Not Found) 的页面报错问题
狮子座的男孩
07-27 6234
但在页面 报错为：GET http://localhost:5173/list 404 (Not Found)(即：在页面并没有找到自己引入 Mockjs 时，设置的地址和假数据)功能常用于解决数据模拟问题，有了 Mock 工具模拟数据后，前后端可以同步进入开发，提升团队研发效率；前端开发往往依赖于后端数据接口，在后端接口就绪能够返回数据之前，前端通常很难开工;根据上述的问题剖析和描述，发现：在引入。项目中，引入了 Mockjs。后，设置的数据和地址有问题；
前端 Mock 工具
王乐平 技术博客
01-02 1201
名称 地址 安装 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/...
mock的基本使用-------axios篇
m0_60899441的博客
07-29 1337
mock
vue-cli+mock.js+axios模拟前后台数据交互
aiqy91387的博客
07-19 315
最近工作不是很忙，自己做了一个vue的移动端的小项目，涉及到后台数据的时候，网上查阅了一些资料，因为是自己写的项目没有后台只能自己模拟数据，刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些，刚好也了解一下axios因为之前用的是vue-resource，就此开始挖坑填坑之路------- 首先说一下mock.jshttp://mockjs.com/这是它的官网，讲的还是很...
Ajax第一篇 掌握 axios 相关参数，从服务器获取并解析展示数据 掌握接口文档的查看和使用 掌握在浏览器的 network 面板中查看请求和响应的内容 了解请求和响应报文的组成部分
一只小老虎
04-15 1000
掌握 axios 相关参数，从服务器获取并解析展示数据 掌握接口文档的查看和使用 掌握在浏览器的 network 面板中查看请求和响应的内容 了解请求和响应报文的组成部分
浏览器网络请求在Network面板显示有返回值，但实际响应为空白
来自上海的这位朋友
08-23 1079
最新的BUG记录引发关注：浏览器网络请求在Network面板显示有返回值，但实际响应为空白。问题根源或许源自网络连接不稳定、服务器异常，甚至数据处理错误。解决步骤建议团队首先排除网络干扰，随后深入检查服务器端和前后端代码，找出异常。密切合作与沟通是关键，团队应整合开发、测试人员的经验，借助调试工具迅速定位。这一记录提醒软件开发者，网络问题是潜在的异常因素，通过团队努力找到问题源并解决，将提升应用稳定性与性能。
在vue中使用mockjs
08-31
在Vue中使用Mock.js可以帮助我们在开发过程中模拟接口返回的数据，方便前端进行接口调试和开发。下面是使用Mock.js的步骤： 1. 安装Mock.js：在项目的根目录下执行以下命令安装Mock.js： ``` npm install mockjs --save-dev ``` 2. 创建一个Mock数据文件：在项目的`src`目录下创建一个`mock`文件夹，并在该文件夹内新建一个`data.js`文件（或者其他命名）作为Mock数据的存放文件。 3. 编写Mock数据：在`data.js`文件中编写自定义的Mock数据。例如，你可以定义一个返回用户数据的接口： ```javascript import Mock from 'mockjs'; // 模拟一个返回用户数据的接口 Mock.mock('/api/users', 'get', { 'list|5': [{ 'id|+1': 1, 'name': '@cname', 'age|18-60': 1, 'address': '@city', }], }); ``` 4. 在项目中引入Mock数据：在项目的入口文件（一般是`main.js`）中引入Mock数据： ```javascript import './mock/data'; ``` 5. 使用Mock数据：在需要使用模拟数据的地方，直接发送请求即可。例如，在Vue组件中使用Axios发送请求： ```javascript import axios from 'axios'; export default { created() { axios.get('/api/users') .then(response => { console.log(response.data.list); }) .catch(error => { console.error(error); }); }, }; ``` 这样，在开发环境中，当发送到`/api/users`的请求时，Mock.js会拦截该请求，并返回预先定义好的Mock数据。 另外，需要注意的是，在项目的生产环境中应该移除Mock.js的相关代码，避免影响真实接口的调用。 希望能帮到你！如有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值