vue中使用mock模拟数据

最新推荐文章于 2025-04-22 10:44:47 发布

云深不知处@

最新推荐文章于 2025-04-22 10:44:47 发布

阅读量379

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_46382167/article/details/114537288

版权

本文详细介绍了如何在Vue项目中使用Mock.js来模拟数据。首先，通过安装mock.js开始，接着在src目录下创建mock文件夹并编写mock.js。然后，将mock数据引入到main.js中。最后，全局配置axios并调用接口，实现数据的模拟获取。通过这些步骤，开发者可以在没有真实后端的情况下进行前端开发和测试。

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

vue中使用mock模拟数据

1、安装mock.js

npm i mockjs -S

2、在src文件夹下创建一个mock文件夹（新建mock.js文件）

//引入mock
import mock from 'mockjs'
//创建mock数据 例：
const data = {
   
  'id|+1': 1,
  'city':

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

云深不知处@

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

在Vue中安装和使用 Mock 进行数据模拟 (图文教程）

大剑师兰特的GIS世界

06-09

6167

在做前后分离的项目时候，比如制作VUE项目，很多时候后端没有提供接口，前端人员可以自己通过mock来造一个接口，返回数据。

vue3 使用 mock 模拟服务器接口

bigcrab的博客

03-08

1316

在前端开发中，需要模拟请求或者数据来做一些简单的调试，这里可以使用mock来模拟服务器接口；在src目录下创建mock文件夹，然后在mock文件夹中放置两个文件，一个。这里需要安装两个包，一个是。返回的是一个数组就好了。

参与评论您还未登录，请先登录后发表或查看评论

Vue中使用mock模拟后端数据

2301_76662406的博客

05-05

2727

在开发的时候，由于页面中的数据来自后端，后端接口又处于开发中，阻碍了前端开发，为了解决这个问题，需求下来后，前后端先约定好数据结构后，在按照约定好的数据结构进行开发，这样前端只需一个本地服务，模拟返回约定好的数据结构。这个数据模板语法的含义是：以初始值 10 作为基准，在每次被调用时递增 15。换句话说，每次调用该模板语法生成的数据，sellingPrice 属性的值会比上一次增加 15。

在vue中如何使用mock

最新发布

weixin_48513692的博客

04-22

252

tip: 如果想要多个字符串拼接例如小源，小张，小林，则可以写一个公共函数或是箭头函数。在mock中创建json来作为模拟数据（具体配置可以参考文档）在index.js中操作。第一个是固定的api接口。第二个是动态的api接口。

Vue 项目中使用 Mock 数据进行开发

前端开发探索之旅

04-01

1795

在 Vue 项目中使用 Mock 数据可以让前端开发人员更加高效地进行页面开发和测试，减少对后端的依赖。本文介绍了两种常见的 Mock 数据的使用方式：Mock.js 和 JSON Server，并分享了 Mock 数据的管理和维护的一些经验。希望本文能够帮助你在 Vue 项目中更好地使用 Mock 数据。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。

vue使用mock模拟数据

zhu_hangfeng的博客

05-13

567

vue使用mock模拟数据

【Vue+Mock】使用Mock模拟数据

╭じò ぴé╮。Qi

08-14

4702

在前端采用Mock服务来模拟请求后台接口，按照接口文档的约定写入api、入参及出参等假数据，来模拟整个前后端联调的过程。前端发送请求后，在devServe.before中运行mock/index.js暴露的函数，捕捉到url一致的请求，直接返回mock设定的数据，有返回值就不会继续真实的请求，拦截成功之后，请求没有往后台去，而是在前端完成了虚拟请求。

【Vue】使用mock模拟数据

小绵杨

05-02

7527

目录一、mock.js二、vue项目使用mock.js三、mock.js文档一、mock.js 对于前后端分离的项目，前端不得不等待后端接口写好后再请求数据。或者自己需要手写一些’死’数据来模拟，这是比较浪费时间的，也是十分无聊的。引入mock.js，这样就可以在后端没有提供接口的时候，自己模拟一个mock接口去请求，并且mock.js甚至可以返回你希望得到的随机数据！官方网站地址：http://mockjs.com 二、vue项目使用mock.js 下面我们尝试在vue中引入mock和axios来

vue 使用mock模拟数据

weixin_46328739的博客

01-15

898

vue 使用mock模拟数据在根目录下，新建一个mock文件，且创建如下文件utils.jsindex.js${${${在 Vue 中使用 mock 进行接口模拟数据时，接口路径中的 .* 是一个正则表达式的匹配规则，表示该路径可以匹配任意字符（包括字母、数字、特殊字符等）。通常情况下，.* 用于模拟具有动态参数的接口路径。例如，假设你的接口路径为 /api/user/:id，其中的 :id 表示一个动态参数，可以是任意字符。

《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》mock文件

06-02

对应《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》博客

vue+vuecli+webpack中使用mockjs模拟后端数据的示例

11-30

使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。其主要功能是：基于数据模板生成模拟数据。基于HTML模板生成模拟数据。 ...

vue-cli3中使用mock（实际项目中快速搭建）

10-27

模块化配置mock,结合mock-api,axios,可应用于实际项目中；前后端分离开发之后，有了mock就可以不用等后端的接口完成后调用接口，前端可以自行模拟接口数据，快速开发。

在vue项目中使用Mock来模拟数据

weixin_51382988的博客

12-13

809

在vue项目中使用Mock来模拟数据。

Vue笔记：使用 mock.js 模拟数据

朝雨忆轻尘

08-23

189

在我们的项目实际开发过程中，后端的接口往往是较晚才会提供出来，并且还要写接口文档，如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了，mock.js 的出现使前后端分离并行开发成为可能。使用 mock.js，前端调试可以模拟后台接口调用，返回我们定义的数据，解放了前后端开发的屏障。使用 mock.js 的过程如下： 1. 安装 mock.js 到项目。 npm intsa...

vue项目 mock数据

Feb_ruary的博客

07-22

1902

vue项目如何mock后端接口数据

在vue项目中使用mock

weixin_44181180的博客

06-19

709

文章目录前言一、开始1.安装总结前言作为一个成熟的前端大可爱，我们可要栗志摆脱对哦后端的依赖，我们受够了后端带来的乱七八糟的过鬼东西啦，我们要自立，那么mock.js是我们的第一步了。想写出一个漂漂亮亮的页面或练习，却苦与没有后端俩对接没有数据。只些都不用烦恼啦。用mock.js我们就能模拟出接口给我们的数据。下面我们来学习一下吧！一、开始 1.安装 //生成随机的数据 npm install mockjs --save-dev //解决json无法写注释的问题 npm install json

学习笔记之vue中mock模拟数据

m0_65382120的博客

03-22

412

首先引入 npm install mockjs 创建mock文件夹来存储（图片跟json格式是不需要暴露的） json一定要格式化一下，有空格是出不来效果的先vue中使用步骤如下使用步骤： 1.在项目当中src文件夹中创建mock文件夹 2.第二步准备js数据（在mock文件夹当中准备数据）--json格式数据一定要格式化一下，别留有空格 3.把mock数据需要的图片，放在public文件夹中【public文件夹在打包的时候，会把相应的资源原封不动的打包到dist文件夹中】 4.第

vue项目mock模拟数据

流云浮沙

06-09

196

vue项目mock模拟数据

vue mock模拟数据

qq_38502227的博客

06-03

292

//首先创建一个mack.vue {{text.title.trim()}} //css

vue3 用mock模拟数据

12-27

### Vue3 中使用 Mock 模拟数据在 Vue3 项目中集成 `mockjs` 来模拟后端 API 请求是一个常见的开发实践。这不仅有助于前端开发者独立于后端服务进行快速迭代，还能提高测试效率。 #### 安装依赖库为了能够在 Vue3 项目中使用 mock 功能，首先需要安装 `mockjs` 和其他必要的工具包： ```bash npm install mockjs --save-dev ``` #### 创建 Mock 文件夹与配置文件通常会在项目的根目录下创建一个名为 `mock` 的新文件夹，在其中放置所有的 mock 脚本文件。对于登录功能来说，可以按照如下方式设置 `login.js` 文件的内容[^3]： ```javascript // src/mock/login.js import Mock from 'mockjs'; let loginData = { code: 200, message: 'success', data: { // 使用内置模板生成随机中文名字 username: '@cname', // 获取全局唯一的 ID 字符串 token: '@guid', // 从给定列表里随机选取一项职业名称 "job|1": ["前端工程师", "后端工程师", "UI 工程师", "需求分析师"] } }; export default { // 设置 POST /api/user/login 接口并返回上述定义好的 JSON 结构体 'post|/api/user/login': loginData }; ``` #### 注册 Mock Service 为了让这些 mock 规则生效，还需要修改 Webpack 或 Vite 构建配置让其加载相应的模块。如果是基于 Vite 的 Vue3 应用，则可以在 `main.js/main.ts` 中引入所有位于 `/src/mock/*.js` 下的脚本文件[^2]: ```typescript // main.ts or main.js if (process.env.NODE_ENV === 'development') { const { setupMock } = require('./mock/index'); setupMock(); } ``` 同时确保存在对应的入口文件用于批量导入各个单独编写的 mock 文件: ```javascript // src/mock/index.js const mocks = import.meta.globEager('./**/*.js'); Object.keys(mocks).forEach((key) => { if (key.startsWith('./index')) return; mocks[key].default && mocks[key].default(Mock); }); ``` 以上操作完成后重启开发服务器即可使新的 mock 数据源在线上环境中有效工作。当发起针对 `/api/user/login` 这样的 URL 地址的 HTTP 请求时，将会收到由上面所描述的对象组成的响应消息体[^1]。