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

最新推荐文章于 2025-06-01 16:51:59 发布
最新推荐文章于 2025-06-01 16:51:59 发布
阅读量4.8k 收藏 50
点赞数 6
CC 4.0 BY-SA版权
分类专栏： # Web前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qi8023for/article/details/127618742

前言

业务需求： 在前后端分离的开发模式中，需要前后端同时进入开发，但是在后端接口完成前，暂时没有可用的接口给前端使用的，如果先写静态页面后期再改的话，就会有重复工作。所以我们需要一种简单快速模拟数据的方式来协助开发。
实现思路： 接口文档的api及数据格式确认好之后，在前端采用Mock服务来模拟请求后台接口，按照接口文档的约定写入api、入参及出参等假数据，来模拟整个前后端联调的过程。

一、Mock简介

Mock.js官网提供的Mock示例及Wiki文档，对Mock的使用描述的非常详细，并且可以在控制台快速试验这些方法。
在这里插入图片描述

二、Vue 项目中使用 mock.js 拦截数据

注：使用vue init project-name 创建的Vue项目

1、安装相关依赖

npm install axios –save
npm install mockjs --save-dev

2、模拟Mock数据

  1. 通过配置devServer.before选项，设置url访问路径及response响应数据，进行mock数据。
  2. 使用Mock.mock()，根据数据模板生成模拟数据。

2.1 Mock数据模拟方式一：devServer.before

  1. 在src文件夹下新建mock文件夹及index.js，在index.js中统一处理所有的mock数据
    在这里插入图片描述

  2. 在index.js文件中引入mock、声明随机数据、暴露拦截方法

const Mock = require('mockjs') // 引入mockjs

module.exports = function (app) { // 暴露一个函数，用于拦截请求时触发
  //监听http请求： app是一个请求实例，.get方法第一个参数传需要拦截的url，第二个参数传一个函数，该函数有两个参数（也可用app.post）
  app.get('/user/userInfo', (rep, res) => {
    // 设置要返回的数据（用mock随机生成的数据）
    let json = {
      id: '@id()', // 得到随机的id
      username: '@cname()', // 随机生成中文名字
      email: '@email()', // email
      ip: '@ip()', // ip地址
      description: '@paragraph()', // 描述
      date: '@date()' // 随机生成日期
    }
    // 通过res.json将上面声明的随机数据转为json并作为请求的返回值返回
    res.json(Mock.mock(json))
  })
}
  1. 配置config进行拦截

在config.js（build->webpack.dev.conf.js或vue.config.js）中配置拦截，使用devServe.before钩子函数，用来监听来自web的http请求（在所有请求前先执行该函数）。引入刚刚编辑好的mock->index.js，该js文件暴露的函数将在这里调用。
（我这里是在build->webpack.dev.conf.js中配置的）

module.exports = {
    devServer: {
        before: require('./mock/index.js') // 引入 mock/index.js
    }
}

2.2 Mock数据模拟方法二：Mock.js

  1. 在src文件夹下新建mock文件夹及index.js，在index.js中统一处理所有的mock数据
  2. 在index.js文件中引入mock、声明随机数据、暴露拦截方法
import Mock from 'mockjs'

//表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。
//表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
//表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
Mock.mock('/user/userInfo', 'get', {
  id: '@id()', // 得到随机的id
  username: '@cname()', // 随机生成中文名字
  email: '@email()', // email
  ip: '@ip()', // ip地址
  description: '@paragraph()', // 描述
  date: '@date()' // 随机生成日期
})
  1. 在main.js中引入require("./mock/index.js")

3、在vue使用

发送http请求的URL与mock中定义的URL需一致

import axios from "axios";
export default {
  mounted() {
    axios.get('/user/userInfo').then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  }
}

4、效果

在这里插入图片描述

PS：如果发送http请求的URL与mock中定义的URL不匹配或不存在的话，就会报404错误！ 请确认URL没问题。

三、Mock使用优化

1、mock数据使用单独的js文件

1.1 场景描述

所有接口的mock数据都在index.js里处理，在接口太多的情况下查找及修改很不方便，因此将模拟的mock数据单独放入对应的js文件（可按接口或业务需求进行处理）。

1.2 解决方案

  1. 在mock文件夹下新建userInfo.js，在userInfo.js写入该接口模拟的mock数据。
/**
 * 写法一
 */
// module.exports = {
//   id: '@id()', // 得到随机的id
//   username: '@cname()', // 随机生成中文名字
//   email: '@email()', // email
//   ip: '@ip()', // ip地址
//   description: '@cparagraph()', // 描述
//   date: '@date()' // 随机生成日期
// }

/**
 * 写法二
 */
// const json = {
//   id: '@id()', // 得到随机的id
//   username: '@cname()', // 随机生成中文名字
//   email: '@email()', // email
//   ip: '@ip()', // ip地址
//   description: '@cparagraph()', // 描述
//   date: '@date()' // 随机生成日期
// }
// module.exports = json

/**
 * 写法三
 */
const userInfo = () => {
  const json = {
    id: '@id()', // 得到随机的id
    username: '@cname()', // 随机生成中文名字
    email: '@email()', // email
    ip: '@ip()', // ip地址
    description: '@cparagraph()', // 描述
    date: '@date()' // 随机生成日期
  }
  return { data: { result: json, code: 200, message: 'success' } }
}
module.exports = {
  getUserInfo: userInfo
}
  1. 修改mock->index.js文件，使用require('./userInfo.js')来获取模拟的json数据
const Mock = require('mockjs') // 引入mockjs

module.exports = function (app) { // 暴露一个函数，用于拦截请求时触发
  //监听http请求： app是一个请求实例，.get方法第一个参数传需要拦截的url，第二个参数传一个函数，该函数有两个参数（也可用app.post）
  app.get('/user/userInfo', (rep, res) => {
    // 设置要返回的数据（用mock随机生成的数据）
    // let json = {
    //   id: '@id()', // 得到随机的id
    //   username: '@cname()', // 随机生成中文名字
    //   email: '@email()', // email
    //   ip: '@ip()', // ip地址
    //   description: '@cparagraph()', // 描述
    //   date: '@date()' // 随机生成日期
    // }
    // const json = require('./userInfo.js')  // userInfo.js直接返回json数据（对应写法一、二）
    const json = require('./userInfo.js').getUserInfo() // userInfo.js返回函数（对应写法三）
    // 通过res.json将上面声明的随机数据转为json并作为请求的返回值返回
    res.json(Mock.mock(json))
  })
}

2、mock获取get、post请求参数

2.1 场景描述

在前后端分离的开发模式下，想要尽可能的模拟真实情况，如不同的请求方式get/post，接口超时响应等。

2.2 解决方案

2.2.1 设置延时请求到数据

1.不设置延时很有可能遇到坑【敲黑板】，因为真实的请求是需要时间的，mock不设置延时是拿到数据马上返回。
2.要模拟Loading加载效果时。

//设置延迟响应，模拟向后端请求数据
Mock.setup({
    timeout: 800
})

2.2.2 get请求参数

Mock.mock("/api/order/index", "get", (options) =>{
  let result = {} // 数据或对象
  return { data: { result: result, code: 200, message: 'success' } }
});

注意：get 请求如果带参数的话，是在URL后面加上参数，因此和设置的URL没有匹配上，会导致URL没找到请求失败。
举个例子：使用 Mock.mock(“/user/getUserInfo”, “get”, mockData) 时，它只会拦截URL等于/user/getUserInfo的请求，而对于带参数的请求，如/user/getUserInfo?id=123就拦截不到。

建议将URL改写成正则表达式的URL
Mock.mock(RegExp(url + ".*"), "get", mockData);

Mock.mock(RegExp("/api/order/index"+ ".*");, "get", (options) =>{
  let result = {} // 数据或对象
  return { data: { result: result, code: 200, message: 'success' } }
});

2.2.3 post请求参数

post请求可以是 URL 字符串或 URL 正则。

Mock.mock("/api/order/index", "post", (options) =>{
  let result = {} // 数据或对象
  return { data: { result: result, code: 200, message: 'success' } }
});

3、mock返回列表及分页数据

3.1 场景描述

在mock文件夹下新建order.js，以订单列表为例，我们模拟了订单列表数据，但列表数据还需分页才能满足业务需求。

3.2 解决方案

在现有的列表数据基础上进行改造，增加分页功能。

  1. 未分页的orderLIst
const orderList = () => {
  const dataList = []
  for (let i = 0; i < 100; i++) {
    const newObject = {
      orderId: '@id()', // 得到随机的id
      orderType: '@cword("全次极加延", 1)', // 得到随机的文本
      createTime: '@datetime()' // 随机生成日期
    }
    dataList.push(newObject)
  }
  return { data: { result: dataList, code: 200, message: 'success' }}
}
module.exports = {
  getOrderList: orderList
}
  1. 分页的orderLIst
const orderList = (params) => {
  const dataList = []
  for (let i = 0; i < 100; i++) {
    const newObject = {
      orderId: '@id()', // 得到随机的id
      orderType: '@cword("全次极加延", 1)', // 得到随机的文本
      createTime: '@datetime()' // 随机生成日期
    }
    dataList.push(newObject)
  }
  const { page, pageSize } = params
  const total = dataList.length
  const len = total / pageSize
  const totalPage = Number.isInteger(len) ? len + 1 : len
  const list = dataList.slice((page - 1) * pageSize, page * pageSize)
  return {
    data: {
      result: {
        page,
        pageSize,
        total,
        totalPage,
        list
      }, code: 200, message: 'success'
    }
  }
}
module.exports = {
  getOrderList: orderList
}

4、控制mock在开发环境使用，在生产环境禁用

4.1 场景描述

mock拦截所有的axios请求，根据请求做出相应的响应。在前后端分离开发时我们使用mock获得相应的数据，但当和后端联调时不禁用mock的话，就无法获得后端接口数据，因此我们来配置一个mock模拟数据的开关。

4.2 解决方案

  1. 在vue中通过设置main.js中的Vue.config.productionTip来决定模式。默认为false是生产环境。
  2. 我们在config/dev.env.js和config/prod.env.js中设置变量。
// dev.env.js下的配置。
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: true //开发环境使用mock
})

// prod.env.js下的配置
module.exports = {
  NODE_ENV: '"production"',
  MOCK: false // 生产环境禁用mock
}
  1. 在main.js中设置process.env.MOCK && require("./mock/index.js")。

process.env.MOCK这句就是判断刚才设置的值，如果是true，才会执行语句引入mock，如果是false，则后面的语句不执行，即不引入mock。

总结

Mock原理：前端发送请求后，在devServe.before中运行mock/index.js暴露的函数，捕捉到url一致的请求，直接返回mock设定的数据，有返回值就不会继续真实的请求，拦截成功之后，请求没有往后台去，而是在前端完成了虚拟请求。

vue3+vite+axios+mock从接口获取模拟数据实战
学而思(xiejava的blog)
08-24 2988
在用Vue.js开发前端应用时通常要与后端服务进行交互，例如通过API接口获取数据，在后端服务接口还没有具备之前，可以通过mock(模拟)数据来进行开发。使用mock数据可以让前端开发人员独立于后端开发人员工作，加快开发速度。在没有真实数据的情况下，mock数据可以帮助开发者更快地看到UI的呈现效果和交互逻辑。 本文通过vue3+vite+axios+mock来介绍如何实现Vue.js的前端应用从接口获取模拟数据。
在Vue中安装和使用 Mock 进行数据模拟 (图文教程）
大剑师兰特的GIS世界
06-09 6241
在做前后分离的项目时候，比如制作VUE项目，很多时候后端没有提供接口，前端人员可以自己通过mock来造一个接口，返回数据。
Vue.js中假数据传递与HTTP请求处理实战
最新发布
weixin_42587866的博客
06-01 815
Vue.js是一种渐进式JavaScript框架，用于构建用户界面。它轻量级、模块化，并且易于集成。Vue的核心库只关注视图层，同时提供了一套丰富的可选扩展，如路由、状态管理等，便于开发单页应用。与React和Angular不同，Vue可以自底向上逐层应用，允许开发者在项目中灵活地选择需要使用的功能。Vue.js通过简单的API提供数据驱动的双向数据绑定和组件化的开发方式，使得开发者能够轻松构建复杂且具有交互性的前端应用。-- 示例：Vue.js基本结构 --></div><script>
Mock模拟数据
m0_45306991的博客
08-22 448
用于生成js随机数，拦截Ajax请求。作用：减少开发成本；剥离前后端开发时的耦合性；减少前后端对接的时间。mock数据只会在前端，不会发送给后端。
使用mock模拟数据
ljlhah的博客
06-06 930
3.在src里面创建一个mock目录 index.js文件。6.在AboutView.vue页面使用。（上面的创建以及下载等，就在重复了）5.在main.js 引入。2.在main.js 引入。4.在index.js文件。1.创建一个vue3项目。二，随机生产表格数据。
使用Mock技术模拟数据
毕业才是起点
08-08 1549
使用mock技术模拟假数据
Vue中使用mock模拟后端数据
2301_76662406的博客
05-05 2858
在开发的时候，由于页面中的数据来自后端，后端接口又处于开发中，阻碍了前端开发，为了解决这个问题，需求下来后，前后端先约定好数据结构后，在按照约定好的数据结构进行开发，这样前端只需一个本地服务，模拟返回约定好的数据结构。这个数据模板语法的含义是：以初始值 10 作为基准，在每次被调用时递增 15。换句话说，每次调用该模板语法生成的数据，sellingPrice 属性的值会比上一次增加 15。
Vue+Mock.js模拟登录和表格的增删改查功能
10-18
在本文中，我们将深入探讨如何使用Vue.js框架和Mock.js库来模拟登录功能以及实现表格的增删改查。Vue.js是一个轻量级的前端JavaScript框架，它提供了强大的数据绑定和组件化特性，使得开发更加高效。Mock.js则是一个...
vue+mock.js实现前后端分离
10-16
在这个例子中，`created` 生命周期钩子中使用Mock.js 模拟了 '/GetAll' URL 的数据，当Vue组件初始化并发起GET请求时，Mock.js 会自动拦截并返回预定义的模拟数据。 **规范化Mock.js 使用** 为了提高代码的可维护...
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
11-30
使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。 其主要功能是： 基于数据模板生成模拟数据。 基于HTML模板生成模拟数据。 ...
Mock 使用方式 + 在 Vue 项目中使用 Mock
热门推荐
一个努力学习的程序猿
08-09 1万+
在前后端开发过程中，后端进行接口开发，前端使用对应接口从数据库获取前端想要展现的数据。对于后端来讲，它们需要根据需求文档，确定要写的接口的功能。有时，虽然接口还没有写出来，但是相关接口文档已经写出来了。这时前端如果想要调用接口，但是接口还没有完成，前端开发人员也就只能含泪上班摸摸鱼了。 那在开发过程中，为了避免这样的情况发生，现在前端已经能够独立于后端进行开发，也就是前端开发人员可以自己根据接口文档去模拟假数据。这个问题的解决方案就是使用第三方库 mock.js。
mockjs数据模拟
11-30
里面包含mockjs的介绍，以及在初级使用的过程中出现的例子代码等
Mock数据：模拟数据
断肠人在刷牙〃的博客
09-07 378
MOCK具体使用方法 mockjs官网：http://mockjs.com/ mockjs官方文档：https://github.com/nuysoft/Mock/wiki/Getting-Started 第一步 安装mockjs npm install mockjs 第二步 创建一个mock目录生成mock数据 第三步：将模拟的数据注入到main.js // 注入mock import ‘./mock’ 第四步：在要请求的组件中请求数据 axios.get(‘http:/
mock 单元测试模拟数据
展翅的雄鹰
09-01 2637
前言 作为一个程序员，我们工作不可缺少的就是单元测试，当我们依赖第三方时，而三方还没有接口数据给我们时，这时候需要我们mock数据了 正文 what 作为一个单元测试，独立且完整是核心，完整性如何保证，这时候就需要mock了， Mock 框架可以很好的将被测功能与其他功能隔离开，市面上有很多的 Mock 框架，比如 Mockito、Jmock、easyMock 等。借助这些工具我们可以很轻松的 Mock 出我们想要的依赖。 Mockito 是一个针对 Java 的单元测试模拟框架，它与 EasyMock 和
mock(模拟)-虚拟数据
m0_69502730的博客
08-31 2341
mock(模拟)-虚拟数据
vue 使用mock模拟数据
weixin_46328739的博客
01-15 904
vue 使用mock模拟数据在根目录下，新建一个mock文件，且创建如下文件utils.jsindex.js${${${在 Vue 中使用 mock 进行接口模拟数据时，接口路径中的 .* 是一个正则表达式的匹配规则，表示该路径可以匹配任意字符（包括字母、数字、特殊字符等）。通常情况下，.* 用于模拟具有动态参数的接口路径。例如，假设你的接口路径为 /api/user/:id，其中的 :id 表示一个动态参数，可以是任意字符。
mock 数据模拟
Luzhangfeng的博客
05-15 335
mock 数据模拟 这里介绍一款非常好用的 json-server 数据模拟服务器 全局安装 json-server $ npm install -g json-server 创建一个 json 文件，假设文件名为 data.json { "user": [ {"id": 1, "username": "张三", "password": "abc123"}, {"id": 2, "username": "李四", "password": "abc456"
mock模拟数据
qq_41716608的博客
03-09 597
在前端开发过程中，有后台配合是很必要的。但是如果自己测试开发，或者后台很忙，没时间，那么我们需要自己提供或修改接口。 1.下载mockjs: npm install --save mockjs 2.在src下创建相关文件与文件夹（在src下面创建mock文件夹，并在mock文件夹下创建json文件夹和index.js文件，json文件夹中写相关json文件） 3.设置请求文件inde...
vue2使用mock.js模拟数据
01-01
### 如何在Vue2项目中使用Mock.js模拟数据 #### 安装依赖包 为了能够在Vue2项目中使用`mock.js`进行数据模拟，需要先安装相应的依赖包。这可以通过命令行工具npm完成。 ```bash npm install mockjs --save-dev npm install axios --save ``` 上述命令会将`mock.js`作为开发依赖项加入到项目之中，并且也引入了用于发起HTTP请求的`axios`库[^4]。 #### 创建并配置Mock服务 接下来，在项目的源码根目录下创建一个新的文件夹命名为`mock`，并在其中建立一个名为`index.js`的JavaScript文件用来编写具体的模拟逻辑： // src/mock/index.js ```javascript import Mock from 'mockjs' const data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1, 'name': '@cname' }] }) Mock.mock('/api/list', 'get', () => { return data.list; }) ``` 这段代码利用`Mock.mock()`函数定义了一组模拟返回的数据结构以及对应的API路径和请求方式。这里设置的是当接收到针对`/api/list`地址发出GET类型的网络请求时，则按照预设模式生成相应数量的对象列表作为回应内容[^1]。 #### 导入Mock模块至Vue实例 为了让整个应用程序能够识别这些自定义好的假数据接口，在入口文件main.js里添加如下几行语句即可实现自动加载功能： ```javascript // main.js import '@/mock' // 加载mock数据 ``` 通过这种方式便可以在不改变原有业务逻辑的前提下轻松切换真实环境下的服务器端交互行为与本地调试期间所使用的伪造版本之间的转换操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值