如何在Vue项目中使用Mockjs，模拟接口返回的数据，实现前后端分离独立开发

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.3k累计阅读 1.4k平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄10年

关注

转载最新推荐文章于 2026-04-10 13:43:24 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

手摸手教你在vue项目中使用mockjs模拟数据入门简介话不多说，把手拿来。珍爱生命，远离后台。背景在前后端分离模式项目开发过程中，前端的界面展示、交互逻辑往往需要后台接口数据支撑，然而万恶的后台总跟不上有我们美丽的前端小姐姐进度。于是我们不由得仰天长叹，难道就没有即无需依赖后台又能完美展示界面数据，即能保证前端交互的完整性又不太费事儿的方法吗？答案当然是有的~~~~ 下面就请我们的主角登场 Mockjs 介绍 Mock官网首页是这么定... 阅读详情

https://blog.youkuaiyun.com/dadiyang/article/details/79686637

收录于

前端

当前文章被收录于：

前端

75 篇文章 1 人学习

前端

订阅专栏查看详情

当前文章被以下社区和专栏收录：

MockJS快速入门什么是MockJS 在前后端分离的开发环境中，前端同学需要等待后端同学给出接口及接口文档之后，才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发，前端同学可以根据业务先梳理出接口文档并使用MockJS模拟后端接口。那么MockJS是如何模拟后端接口的呢？MockJS通过拦截特定的AJAX请求，并生成给定的数据类型的随机数，以此来模拟后端同学提供的接口。准备工作写在最前面：有的小伙... 阅读详情

相关推荐

vue-cli项目中使用mockjs模拟数据-配置和使用（超详细！）

在前端的开发中，很多时候都需要用到接口，但是后端的接口往往要比较晚才出来，那么前端有没有办法通过制造假数据来模拟后端端口，加快开发速度呢？答案是肯定的，这里有两种方法介绍下。 1. 使用网上一些提供数据的网站，如聚合数据、极速数据等，但是需要注册，大部分API需要钱????，且不如自己配置的方便； 2. 利用mockjs模拟数据。下面就介绍在vue-cli项目中使用mockjs来模拟数据的步骤。...

weixin_40141473的博客 3649

【mock.js】mock.js在vue-admin-template项目中的使用

记录学习mock.js 一、什么是mock.js 使用mock.js拦截ajax请求，更加方便的构造需要的假数据。二、项目介绍 vue-element-admin项目的所有请求都是通过封装的request.js进行发送的，所有的请求都设置了一个baseURL，而这个baseURL又是通过读取process.env.VUE_APP_BASE_API这个环境变量来动态设置的。在vue-element-admin的模板当中，所有的数据都是模拟实现的，这里可以仿照着它模拟数据的流程进行数据的模拟mock。 .

Enchanted to meet U 909

vue使用mockjs配置和使用

需求：在前后端分离的开发中，需要前后端同时开发，但是在后端完成前，暂时是没有数据返回给前端使用的，如果先写静态后面再改，就有重复工作的内耗存在。所以我们需要一种简单快速的模拟数据的模块，本文选的是mockjs。步骤： 1、安装mockjs npm install mockjs 2、在项目的src文件夹下建mock文件夹，在mock文件夹下建index.js(存放所有的http模拟返回的接口数...

qq_33964336的博客 1784

vue中使用mockjs简单返回数据、包括get,post请求

安装 npm install mockjs 在src文件下 1、创建mock文件夹在mock文件夹下 2、创建json文件并在json文件夹下创建index.json 3、在mock文件下创建mock.js文件在mian.js文件中引用mock.js import "./mock/mock.js"; mock.js文件中的内容 import Mock from 'mockjs' Mock.setup({ timeout: 500 //设置一个延迟时间虚拟服务器响应效果

M_wisdom的博客 3411

vue+mockjs模拟数据实现前后端分离开发的实例代码

本篇文章主要介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，具有一定的参考价值，有兴趣的可以了解一下

DRV8870电机驱动芯片原理与嵌入式多平台驱动开发

H桥电机驱动芯片是直流电机控制的核心硬件模块，其通过双MOSFET拓扑实现方向与速度的精确调控。工作原理基于电荷泵自举驱动、集成电流检测及多重硬件保护机制，技术价值体现在高集成度、宽压适配（4.5V–45V）与强鲁棒性。典型应用场景涵盖智能机器人执行器、工业自动化设备及电池供电移动终端。本文围绕DRV8870这一主流驱动芯片，深入解析其PH/EN与Dual PWM双控制模式、nFAULT故障响应机制，并结合Arduino/ESP32/STM32三大平台，提供可复用的跨MCU驱动库设计范式与FreeRTOS实

weixin_32251525的博客 655

vue使用mock模拟后台接口返回数据

vue 项目中使用 mock 模拟后台接口返回数据，当后台还未提供接口，前端可通过mock实现模拟接口请求，等后台数据接口准备完成，前端只需要修改请求的地址就行了。

前端开发工程师 2847

Western blot (WB) 灰度分析进阶指南：ImageJ 高效定量技巧与实战优化

本文详细介绍了使用ImageJ进行Western blot灰度分析的进阶技巧，包括批量处理、背景校正和疑难条带处理等实战优化方法。通过自动化宏脚本和动态背景校正，显著提升分析效率和准确性，特别适合科研人员处理复杂WB数据。

weixin_42557830的博客 899

mock在vue项目中的使用 —— json写法

mock在vue项目中的使用 —— json写法什么是mock第一步（创建vue项目，安装插件）第二步（创建mock文件夹）第三步（配置vue.config.js文件）第四步（在项目中使用）第五步（添加环境边境变量）补充什么是mock Mock是什么. 可能还有些读者之前并没有接触过Mock，不清楚Mock是个啥。. Mock简单来理解，就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试。. 而这个虚拟的对象就是mock对象。. mock对象就是真实对象在调试期间的代

myisyourbb的博客 1581

Java对接（BSC）币安链 | BNB与BEP20的开发实践（三）水龙头 WEB3

这一节我们讲一个币安测试链如何获取到BNB、USDT等BEP20数字货币（水龙头）来让我们前期测试开发。如图：我们将创建的地址填入相应输入框，来获取到测试BNB以及其他BEP20数字币。发币可能需要交易等待，请耐心等待即可，交易完成后，币会到达您的地址内。上一节我们用代码来实现BNB转账、BEP20转账、链上交易监控。2.MetaMask(小狐狸)浏览器插件 🪜。使用EDGE浏览器可以在浏览器直接打开。使用Chrome浏览器，请使用🪜打开。基本工作就绪后，即可进行开发测试。3. 测试区块链浏览器 🪜。

大猩猩的专栏 2790

CST Studio Suite安装详细教程（附安装包）CST Studio Suite 2024超详细安装教程

CST Studio Suite 2024安装指南摘要：本文详细介绍了CST Studio Suite 2024电磁仿真软件的下载与安装流程，包含23个图文步骤说明，从解压安装包到配置许可证服务器。重点提示了以管理员身份运行、自定义安装路径等关键步骤，并提供了常见问题解决方案和入门技巧。该软件适用于天线设计、PCB分析等高频电磁场仿真，安装后需通过localhost:27000连接许可证服务器完成激活。

pythonqiang9的博客 1万+

在vue中使用mockjs

npm install axios --save npm install mockjs --save-dev package.json中的内容如下新建mock.js文件 main.js中引入axios 在用模拟数据的组件中引入mock.js，这样才不会出现跨域这种乱七八糟的问题，有两种方式，或者直接在main.js中引入mock 下面是mock.js文件的内容 ...

qq_40820382的博客 598

05GATK流程和找变异

05GATK流程和找变异 GATK 集合了一套功能全面的高通量测序数据基因组分析工具包，算是业界的权威，更新的速度非常快。需要注意的是，不同版本的 GATK 在工具应用上会有些许不同。这里我们使用是最新版本 GATK 4.1.4.1（截止2019年12月31日）。数据准备前面我们提到了，走GATK流程需要到官网下载很多数据库文件，比如下面这些： dbsnp_146.hg38.vcf.gz dbsnp_146.hg38.vcf.gz.tbi Mills_and_1000G_gold_standard.

qq_23435961的博客 1660

前后端开发分离时如何进行测试（Mockjs，Postman）

前后端开发分离时如何进行测试文章目录前后端开发分离时如何进行测试一、前后端开发分离的困境二、Mockjs1. Mockjs 是什么2. 为什么用 Mockjs3. 安装 Mockjs4. 使用 Mockjs① 数据模板格式② 发请求1）Get 请求2）Post 请求③ 数据集④ 使用技巧1）自定义响应时间2）校验3）JSON三、Postman1. Postman 是什么四、参考文章一、前后端开发分离的困境首先不得不承认的是，前后端分离开发带来的优势是巨大的，它使得团队协作变得更有效率。双方的工程师都

qq_43256905的博客 8847

代谢组数据分析（三十一）：空间代谢组学分析从数据加载到通路分析的流程解析

空间代谢组学是一种先进的技术，能够在组织切片上以高分辨率检测代谢物分布，为理解生物代谢过程提供新视角。其分析流程包括数据获取、预处理、代谢物注释、差异表达分析、可视化、通路分析、聚类分析及空间相关代谢物分析等关键步骤。这些步骤帮助研究人员从海量数据中提取有价值信息，揭示代谢物的空间分布规律，发现潜在生物标志物，探索代谢通路调控机制。例如，SpaMTP等工具为全流程分析提供了强大支持，助力研究人员高效处理数据，深入理解代谢过程，为生物学研究和临床应用提供重要依据。

专注生信领域 916

2026软考中级-软件设计师笔记（送最新视频教程）

核心口诀：运控存输输（运算器、控制器、存储器、输入、输出）例题（2019年上半年）：核心公式：数字签名流程：数字证书作用：死锁4个必要条件：死锁判断公式：处理策略：程序设计语言的四大核心成分：顺序表操作（时间复杂度）：链表操作（时间复杂度）：核心思想：频率高的字符用短编码，频率低的用长编码 → 最小化总编码长度构造步骤（贪心算法）：前提：有序表（升序/降序）步骤：时间复杂度：O(log₂n) 例：查找中核心思想：用哈希函数将关键字映射到存储位置哈希冲突：不同关键字映射到同一位置 → 用链地址法或开放定址

36万+

如何在vue中使用mockjs模拟接口的各种数据

mockjs的作用生成模拟数据模拟 Ajax 请求，返回模拟数据基于 HTML 模板生成模拟数据（后续更新）帮助编写单元测试（后续更新） Vue 中使用 mock 有两种使用方式，一种是仅编写数据来调用，第二种是编写服务+数据模拟真实接口（可在network查看）第一种方式使用mock的方式模拟数据接口可以写完整action url：http://localhost/logi...

Freedom的blog 1万+

中国土地市场网爬取

实习期间老板需要对土地数据进行爬取，想来想去就Google到了.应该算是种类最齐全的土地数据了。Github地址：https://github.com/AnTi-anti/china_land/tree/master。

猫敷雪 5462

vue中使用mockjs模拟后台数据

概述以前的web开发中，前后端是紧密耦合在一起的，脱离了后端的前端几乎无法测试。两者的过度依赖不仅大大地提高了团队的沟通成本，还严重拖慢了项目的开发进度，非常不利于web项目的开发。于是前后端分离逐渐成为一种广为认可的开发模式。但在实际的web开发中，前后端的进度是很难做到实时同步的，因此经常会出现前端无接口可调的情况，这样前端开发很容易陷入阶段性停滞的泥潭。为了将前后端进一步解耦，前端出现了...

夕山雨的博客 2784

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册，内含HL7和ASTM)

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候提示IE WebControls 不通过，这个工具可以欺骗u8的检查。跳过U8环境检测的IE WebControls。提示导入失败后，重新检测通过。

Mockjs模拟接口实现增删改查、分页、多条件查询

Mockjs实现增删改查、分页、多条件查询，一起来见证Mockjs多么强大~

wanghuichen的博客 1万+

NTscan扫描工具

ntscan是一个扫描器，可以扫描没有密码和弱密码的共享，先到配置文件中填写猜测的用户名和密码，扫描过程中右侧出现的是扫描日志。

前端使用mockjs模拟接口返回数据

这里开始都是通过mockjs模拟请求返回数据，返回方式这里说自己遇到的两种，一是mock模拟产生随机数据返回，二是读取本地json文件返回。一、初始化好vue项目之后，执行命令安装依赖包。 npm install mockjs --save-dev npm install axios --save 二、封装axios，文件为request.js，根据自己的需要去修改里面的代码。 import a...

weixin_43136717的博客 5869

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术，以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索，主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式，计算机控制系统的数学描述与基本分析方法，以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

Vue Mockjs 模拟接口数据 前后端分离

文章目录vue项目引入mockjs创建mock文件夹新建mock.js模拟接口引用mock接口 前后端分离的开发模式下，在设计阶段一般会先设计好接口，这样前后端根据接口来各自进行开发，都开发完成后对接就可以了。如果不使用mock和前后端开发的分离，前端人员往往需要等待后端接口开发完成，才能够对接显示出调用接口之后页面的样子，但是前端人员的开发速度往往是大于后端开发速度的，所以前端开发人员可以使...

woflyoycm的博客 481

vue项目中使用mockjs+axios模拟后台数据返回

先看下项目的目录,这是用vue-cli生成的一个vue项目,主要是需要配置axios和写接口数据mock.js 首先需要安装axios和mockjs npm i axios mockjs --save 在项目中新建一个config目录,与src同级,配置axios ./config/axios.js import axios from 'axios' axios.defau...