vue中用mock制造模拟接口(本文主要解决坑),一定要看完哦

最新推荐文章于 2024-05-29 00:05:59 发布
最新推荐文章于 2024-05-29 00:05:59 发布
阅读量1.8k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianzhandaren/article/details/87889469
版权
本文介绍了在Vue项目中使用MockJS创建模拟接口的方法，以应对后端开发速度慢的情况。通过下载并引入MockJS，在main.js中配置，并在mock.js文件中定义规则。遇到的问题包括：POST请求不生效、GET请求无法获取参数等，解决方案涉及axios的请求拦截和参数传递方式。文章提供了详细的步骤和代码示例，帮助开发者更好地理解和应用MockJS。
摘要由CSDN通过智能技术生成

最近新入职一家公司,后端造接口速度很慢,想来想去还是搞一套模拟接口,来满足开发需求,有人会问,我造一个死数据不就可以了吗?或者说,后端数据结构都没出来,字段我怎么定?

问这个问题的人不奇怪,我之前也有这种疑问,mock造出来的数据是动态的.前端完全可以自己造数据结构,后端根据这个做一个模型就可以了,谁叫他们慢,字段嘛,实在要修改,他们确实不好改,前端改改就完事了;下面我将跟大家说说最近玩vue+mockjs的心得,

vue的项目搭建我就不多说了,有自己用vue-cli创建的,也有直接用webpack自己搭建,这都没关系;关键是跑的起来,以下拿大众化的来说(vue-cli创建的项目)

腾讯云最新服务器活动--云服务器免费送。

试用领取有人能领到180天。

腾讯云领取优惠券地址

阿里云领取优惠券地址

1,下载mockjs:    npm i  mockjs --save

2,直接在main.js里面引用,如图:(此处有坑,因为只在开发环境使用.if里面不能用import方式导入,只能用require方式引入)

最低0.47元/天 解锁文章
建站达人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
10-17
要在Vue-CLI项目中使用simple-mock，首先需要安装它为项目的依赖。这可以通过npm或yarn命令来实现。使用npm安装时，可以在命令行中输入以下命令： ```bash npm install --save-dev @lzwme/simple-mock ``` 或者使用...
Vue+Mock.js模拟登录和表格的增删改查功能
10-18
在本文中，我们将深入探讨如何使用Vue.js框架和Mock.js库来模拟登录功能以及实现表格的增删改查。Vue.js是一个轻量级的前端JavaScript框架，它提供了强大的数据绑定和组件化特性，使得开发更加高效。Mock.js则是一个...
vue模拟接口数据
baiwang1108的博客
10-14 201
在build/dev-server.js文件下 const app = express() var appData = require('../goods.json') var goods = appData.goods var apiRoutes = express.Router() apiRoutes.get('/goods', function(req, res)...
Vue3+vite项目中使用mock模拟接口
最新发布
weixin_52941842的博客
05-29 754
注意此处如果配置出错可能是vite-plugin-mock依赖的版本有问题，重新安装一下依赖指定版本即可，这里推荐使用2.9.6版本的。根路径（src平级的目录）新建文件夹mock，新建文件user.ts添加以下代码。分别安装vite-plugin-mock跟mockjs两个插件。vite.config.ts中添加配置，主要是红色标记的配置。测试结果，响应结果为200，模拟请求成功。安装axios进行测试。
【vue】生成接口模拟数据
jggnice的博客
10-17 362
目录 方案一：自定义模拟数据 Step1 创建json文件 Step2 在 vue.config.js 中配置 Step3 在组件中使用 (方式一) Step3 封装api (方式二) Step4 在组件中使用 (方式二) 方案二：自动生成模拟数据 Step1 引入mock.js Step2 编写模拟数据 Step3 在组件中使用 在前端vue中使用虚拟数据模拟后端接口返回的数据，从而使得前端开发独立化。这里使用了两种方案模拟接口返回的数据。 第...
vue.js使用express模拟接口数据
weixin_45455582的博客
09-04 348
第一步：找到 build - webpack.dev.conf.js 在const PORT = process.env.PORT && Number(process.env.PORT)后面加入以下配置： /** * 使用express框架启动一个服务器 */ const express = require('express') const app = express() ...
在vue中如何模拟接口
qq_46030141的博客
07-11 415
后面就可以直接调接口使用了。
浅谈vue项目用到的mock数据接口的两种方式
10-16
本文将详细讲解在Vue项目中实现mock数据接口的两种常见方式：使用`devServer.before`和使用`Mock.js`。 1. 使用`devServer.before`进行数据mock 在Vue CLI的配置文件`vue.config.js`中，我们可以利用`devServer....
在vue-cli搭建的项目中增加后台mock接口的方法
08-27
摘要：本文主要介绍了在 Vue-cli 搭建的项目中增加后台 Mock 接口的方法，旨在帮助开发者快速实现 Mock 数据接口，提高开发效率。 知识点： 1. 使用 Vue-cli 搭建项目：使用 Vue-cli 搭建项目可以快速创建一个前端...
vue+mock.js实现前后端分离
10-16
Vue.js 是一个轻量级的前端框架，而Mock.js 是一个用于模拟数据的工具，它们结合使用可以在开发过程中模拟后端API，使前端开发得以独立进行。 **安装Mock.js** 在Vue项目中使用Mock.js，首先需要通过npm 安装： ``...
【Vue】自定义mock数据，模拟后台接口
lswlovejrd的博客
02-26 542
官方网站地址：http://mockjs.com在官网中详细介绍了mock的语法规范等内容，这里就不做过多解释了。
在Vue中安装和使用 Mock 进行数据模拟 (图文教程）
大剑师兰特的GIS世界
06-09 5709
在做前后分离的项目时候，比如制作VUE项目，很多时候后端没有提供接口，前端人员可以自己通过mock来造一个接口，返回数据。
mock创建数据接口
qq_39598092的博客
10-26 1022
1、在mock文件夹中创建一个js文件，在文件中创建数据并mock接口 import Mock from 'mockjs' // 设置全局延时，没有延时的话，有时候会检测不到数据变化 Mock.setup({ timeout: '300-600' }) Mock.mock(/\/testlist/, 'get', Mock.mock({ id: '@id', // 随机生成id name: '@cname', 'phone|1': /^1[0-9]{10}$/, // 生成数字1＋10位数字...
如何在vue中使用mockjs模拟接口的各种数据
热门推荐
Freedom的blog
05-21 1万+
mockjs的作用 生成模拟数据 模拟 Ajax 请求，返回模拟数据 基于 HTML 模板生成模拟数据（后续更新） 帮助编写单元测试（后续更新） Vue 中使用 mock 有两种使用方式，一种是仅编写数据来调用，第二种是编写 服务+数据模拟真实接口（可在network查看） 第一种方式 使用mock的方式模拟数据接口 可以写完整action url：http://localhost/logi...
mock模拟数据并设计接口
林雨的博客
08-19 1324
mock模拟数据设计接口 模拟数据 import Mock from 'mockjs' //引入mock const Random = Mock.Random // 设置全局延时，没有延时的话，有时候会检测不到数据变化 Mock.setup({ timeout: '300-600' }) // 创建一个数组用来接收模拟的数据 const mocklist = [] const count = 7; //模拟生成7条数据 for (let i = 0; i < count; i++) {
vue项目中使用mock.js模拟数据
meteorites的博客
08-15 678
   注：mock.js基础教程可参见  https://blog.csdn.net/qq_42205731/article/details/81705350 安装      命令行输入 cnpm install mockjs  在main.js同级新建mockjs文件     内容如下： const Mock=require('mockjs'); //引入mockjs文件 var ...
如何在Vue项目中使用Mock模拟数据？
SH744的博客
12-07 2414
在项目开发流程中，在开发工作开始之前，一般会有一个接口文档产出的过程：也就是依据设计文档给出响应的接口细节，方便前端mock数据；那如何更好的使用Mock来模拟数据，是一个优秀的前端必须要掌握的技能（PS：避免成为背锅侠）！
mock数据在vue里如何模拟登录接口
05-12
在Vue中模拟登录接口需要使用mock数据来模拟后端API返回的数据。可以使用mockjs来生成随机数据，并使用axios-mock-adapter拦截axios的请求，返回mock数据。 下面是一个简单的示例，假设登录接口的URL是`/login`，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值