vue3中使用mock.js模拟数据(前端mock数据)

已于 2025-01-06 14:12:59 修改
阅读量4.1k 收藏 27
点赞数 11
文章标签： 前端 javascript 开发语言
于 2025-01-04 17:37:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52006958/article/details/144932066
版权

目录：

mock.js是什么

使用mock的好处

 怎么使用mock模拟数据

1. 确保你在项目中已经安装了axios和mock

2. 在项目的src文件夹下新建一个文件夹用来存放mock模拟的数据

3.模拟完数据后，在入口主文件 main.js 中引入这个模拟数据的文件

4.在需要请求该接口模拟数据页面中，可以直接进行axios请求

5.打开控制台查看我们请求到的模拟数据 

mock.js是什么

前后端同时开发的时候，后端接口数据没有出来，前端可以使用mock模拟假数据，进行页面的开发；

使用mock的好处

  • 使用mockjs模拟后端接口，可随机生成所需数据，模拟对数据的增删改查。
  • 数据类型丰富，支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
  • 拦截Ajax请求不需要修改既有代码就可以拦截，返回模拟的响应数据。

怎么使用mock模拟数据

（首先你需要有一个模拟的接口地址url）

1. 确保你在项目中已经安装了axios和mock
npm install -S axios
npm install -D mockjs
2. 在项目的src文件夹下新建一个文件夹用来存放mock模拟的数据

一般我们放在将mock模拟的数据（ /src/mock/index.js）这个文件中，这里以此为例。

//这里是我使用本地的服务器商品接口地址模拟的数据
//在 src/mock/index.js 这个文件中

import { mock } from 'mockjs'
let data = mock({
    "data|6": [ //生成6条数据 数组
        {
            "shopId|+1": 1,//生成商品id，自增1
            "shopMsg": "@ctitle(10)", //生成商品信息，长度为10个汉字
            "shopName": "@cname",//生成商品名 ， 都是中国人的名字
            "shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号
            "shopAddress": "@county(true)", //随机生成地址
            "shopStar|1-5": "★", //随机生成1-5个星星
            "salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间
            "shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')", //生成随机图片，大小/背景色/字体颜色/文字信息
            "food|2": [ //每个商品中再随机生成2个food
                {
                    "foodName": "@cname", //food的名字
                    "foodPic": "@Image('100x40','#c33', '#ffffff','小可爱')",//生成随机图片，大小/背景色/字体颜色/文字信息
                    "foodPrice|1-100": 20,//生成1-100的随机数
                    "aname|2": [
                        { 
                            "aname": "@cname", 
                            "aprice|30-60": 20 
                        }
                    ]
                }
            ]
        }
    ]
})
mock(/goods\/list/, 'get', () => { //三个参数。第一个：请求路径，第二个：请求方式post/get，第三个：回调，返回值
    return data
})
3.模拟完数据后，在入口主文件 main.js 中引入这个模拟数据的文件
//main.js
import "./mock/index.js"
4.在需要请求该接口模拟数据页面中，可以直接进行axios请求

（这里为了使大家可以看懂，就不封装axios了，直接使用axios对接口进行数据请求了）

<script setup>
import { onMounted } from "vue";
import axios from "axios"

function myrequest() {
  axios.get("http://localhost:8080/goods/list").then((res) => {
    console.log("这是我发送的请求");
    console.log(res)
  })
}

onMounted(() => {
  myrequest();
})
</script>

<template></template>

<style scoped></style>
5.打开控制台查看我们请求到的模拟数据 

  •  注意事项：

        记得修改为你的接口地址；
        注意 你写的请求方式 与 你的接口文档要求的请求方式 是否保持一致；
        注意你模拟数据的请求接口是否打开，服务器是否启动；

我在本文中所使用的接口文档示例： 

引申：

常用的mock占位符 解释：

@cname 中文人名

@id 身份证id

@title 中文title

@city 中文城市

@ip ip 地址

@email email

@url url地址

@csentence(1,5) 生成1到5个字的中文句子

@cparagraph 生成中文段落

@string(11) 输出11 个字符长度的字符串

@float(0,10) 0 到 10 的浮点数

@integer(60,70) 60 到 70 之间的整数

@boolean boolean 类型 true,false

附：本文参考文档

冲！！
关注
vue3中如何使用mock--看完必会
蜗牛~~
06-29 1455
当项目前后端同时开发，后端来不及提供接口时，前端可通过mock来模拟后端返回数据，非强制性使用 ，详情参考。随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。// 这种默认调用mockJS.Random的image的第一种方法。Mock.Random 是一个工具类，用于生成各种随机数据。只是在属性值字符串中占个位置，并不出现在最终的属性值中。，取其返回值作为最终的属性值，函数的上下文为属性。占位符引用的是 Mock.Random 中的方法。
前端数据模拟Mock.js
m0_46266496的博客
06-12 632
新建mock-demo的项目，安装npm install mockjs。注意安装axios包 npm install axios。修改App.vue代码。修改App.vue代码。修改index.js。新建index.js。修改 main.js。
vue-cli3中使用mock（实际项目中快速搭建）
10-27
模块化配置mock,结合mock-api,axios,可应用于实际项目中；前后端分离开发之后，有了mock就可以不用等后端的接口完成后调用接口，前端可以自行模拟接口数据，快速开发。
vue3 vite mock实践
最新发布
qq_41725131的博客
03-27 787
本文基于vite引入mock技术，对于部分页面提供调用mock和本地接口`开关`，实现单纯前端也能进行初步调试，主要说明vue3 + vite + ts 环境下mock搭建、使用、以及遇到的问题
在 Vue3 开发中模拟数据
繁若华尘的博客
02-23 266
在 Vue3 开发中，模拟数据是常见的需求（尤其在前后端分离开发时）。
vue3 使用mockjs
weixin_45044818的博客
04-04 3634
背景 在如今的项目开发中，基本上使用的都是前后端分离的开发模式，前后端在开发前会约定一份开发文档，规定接口的结构。如果后端接口没有写好或者没有环境可以让你去调用这个接口，如果这时，什么都不做，也会影响开发的一个效率，所以前端可以使用mock来模拟接口请求。本文章在vue-cli3项目中配置mock。 安装mock npm install mockjs --save 配置mock 在项目的src下创建一个mock文件夹，mock文件夹里面的文件如图所示 _createMock.ts文件查找到当前目录下的所有
Vue3项目使用mockjs模拟数据
m0_64378190的博客
03-11 1737
Vue3项目使用mockjs模拟数据
vue3中使用mock.js
qq_42369064的博客
08-18 2570
Mock.js 是一个用于生成随机数据的模拟数据生成库。它可以帮助开发人员在前端开发中创建模拟接口，以便进行测试和开发。生成随机数据：Mock.js 提供了丰富的数据模板语法，可以根据指定的规则生成各种类型的随机数据，包括数字、字符串、布尔值、日期等。拦截 Ajax 请求：使用 Mock.js，你可以拦截前端的 Ajax 请求，并根据模板定义生成模拟数据返回给前端，以模拟后端接口的行为。
vue3项目中mockjs的使用
FOR_HOU的博客
11-28 621
vue3项目中mockjs的使用。
Vue3中简单使用Mock.js
weixin_45616480的博客
07-20 7771
前端开发人员用来模拟虚拟数据，拦截ajax请求，方便模拟后端接口。
Vue+Mock.js模拟登录和表格的增删改查功能
10-18
在本文中，我们将深入探讨如何使用Vue.js框架和Mock.js库来模拟登录功能以及实现表格的增删改查。Vue.js是一个轻量级的前端JavaScript框架，它提供了强大的数据绑定和组件化特性，使得开发更加高效。Mock.js则是一个...
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
11-30
前言 使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端...数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值： // 属性名
vue+mock.js实现前后端分离
10-16
在这个例子中，`created` 生命周期钩子中使用Mock.js 模拟了 &#39;/GetAll&#39; URL 的数据，当Vue组件初始化并发起GET请求时，Mock.js 会自动拦截并返回预定义的模拟数据。 **规范化Mock.js 使用** 为了提高代码的可维护...
Vue项目中的mock.js的使用以及基本用法和ES6的新增方法
m0_62019369的博客
10-29 5555
Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截Ajax请求不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。官网注：easy-mock，一个在线模拟后台的数据平台。
mockjs的基本使用和登录跳转到主页加折叠事件
qq_62881798的博客
09-29 1214
Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截Ajax请求不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。官网注：easy-mock，一个在线模拟后台的数据平台。
Vue3中使用Mock.JS，生成随机数据
A123474JJ的博客
08-01 893
在日常开发工作中，常见的现象就是我们前端写好页面之后没有数据，舔着脸找后端要数据的时候被告知老子很忙，数据库要我整，接口要我整，文档要我整，没时间等等各种理由，各种看后端脸色，有了Mock之后，再也不用看后端脸色行事了(手动狗头)。
vue3使用mockjs
weixin_44707050的博客
10-15 545
axios的二次封装中 baseURL 写成mock的路径 '/mock'创建index.js , list.json。在入口文件中添加mock/index文件。在src文件夹中创建 mock文件夹。封装api的api.js中。
vue2使用mock
03-16
<think>好的，我现在要处理用户的问题：“请使用中文回答我或者给我介绍一下: vue2使用mock”。用户之前已经询问过前端开发的概述，现在具体到Vue2中使用Mock数据。首先，我需要确定用户的需求是什么。可能的情况是，用户正在学习Vue2，并且想要在开发过程中模拟后端API接口，以便在前端独立开发和测试，而不需要依赖后端服务。 首先，我需要回忆Vue2中常用的Mock数据方法。通常有两种主要方式：本地静态数据模拟和使用Mock.js库。本地静态数据比较简单，直接创建JSON文件或者JS文件导出数据，然后在组件中引入。而Mock.js功能更强大，可以生成随机数据，拦截Ajax请求，更适合复杂的场景。 接下来，用户可能需要具体的步骤和示例代码。我需要分步骤讲解，确保结构清晰。可能包括安装Mock.js、创建Mock文件、配置拦截请求、在Vue组件中使用等步骤。同时，需要注意Vue2的项目结构，比如将Mock文件放在哪个目录下，如何与axios结合使用。 另外，用户可能关心Mock.js的高级用法，比如生成随机数据、定义不同HTTP方法的路由、延迟响应模拟网络延迟等。这些内容能帮助用户更灵活地使用Mock数据。还需要提到如何根据环境切换Mock和真实接口，例如在生产环境中禁用Mock，仅用于开发环境。 还要考虑到用户可能的疑问，比如如何组织Mock文件的结构，如何处理多个接口，以及如何维护Mock数据与真实接口的一致性。可能需要给出最佳实践建议，比如按模块拆分Mock文件，使用Webpack的devServer.before在开发服务器中集成Mock，避免直接修改代码中的环境变量。 需要验证自己的记忆是否正确，比如Mock.js的语法是否支持RESTful风格的拦截，是否支持正则表达式匹配URL。同时，确保示例代码的正确性，比如使用Vue2的语法，正确引入Mock.js和axios，处理GET和POST请求的示例是否准确。 还要考虑用户可能遇到的问题，比如Mock数据没有生效，可能是由于Mock.js没有正确拦截请求，或者请求的URL与Mock中定义的不匹配。这时候需要提醒用户检查Mock的配置，或者使用浏览器开发者工具查看网络请求。 最后，总结使用Mock的优势，比如提高开发效率，前后端并行开发，减少依赖，方便测试等。同时，指出可能的局限性，比如需要维护Mock数据，与真实接口同步的问题，以及在复杂业务逻辑下Mock可能不够灵活。 总之，需要提供一个结构清晰、步骤详细、包含示例和注意事项的指南，帮助用户顺利在Vue2项目中集成Mock数据，满足开发和测试需求。</think>### Vue2 使用 Mock 数据指南 在 Vue2 项目中，**Mock 数据**常用于模拟后端接口，帮助前端在无真实 API 的情况下独立开发与测试。以下是具体实现方法及最佳实践： --- #### 一、核心场景 1. **开发阶段**：后端接口未完成时，前端自行模拟数据。 2. **测试阶段**：验证页面逻辑对不同接口响应的处理。 3. **演示场景**：脱离服务器依赖展示功能。 --- #### 二、实现步骤 ##### 1. 安装 Mock.js ```bash npm install mockjs --save-dev # 或 yarn add mockjs -D ``` ##### 2. 创建 Mock 文件 在 `src/mock` 目录下新建文件（如 `index.js`）： ```javascript import Mock from &#39;mockjs&#39; // 模拟 GET 请求 Mock.mock(&#39;/api/user&#39;, &#39;get&#39;, { &#39;data|5-10&#39;: [{ &#39;id|+1&#39;: 1, &#39;name&#39;: &#39;@cname&#39;, &#39;age|18-60&#39;: 1, &#39;email&#39;: &#39;@email&#39; }] }) // 模拟 POST 请求 Mock.mock(&#39;/api/login&#39;, &#39;post&#39;, (options) => { const { username, password } = JSON.parse(options.body) return { code: username === &#39;admin&#39; && password === &#39;123456&#39; ? 200 : 401, message: username === &#39;admin&#39; ? &#39;登录成功&#39; : &#39;账号或密码错误&#39; } }) ``` ##### 3. 在入口文件启用 Mock 修改 `main.js`： ```javascript import Vue from &#39;vue&#39; import App from &#39;./App.vue&#39; import &#39;./mock&#39; // 引入 Mock 配置 new Vue({ render: h => h(App) }).$mount(&#39;#app&#39;) ``` ##### 4. 在组件中调用接口 使用 `axios` 发起请求（示例组件）： ```vue <template> <div> <button @click="fetchUser">获取用户</button> <ul> <li v-for="user in users" :key="user.id">{{ user.name }} - {{ user.age }}</li> </ul> </div> </template> <script> import axios from &#39;axios&#39; export default { data() { return { users: [] } }, methods: { async fetchUser() { const res = await axios.get(&#39;/api/user&#39;) this.users = res.data.data } } } </script> ``` --- #### 三、高级用法 ##### 1. 动态响应数据 ```javascript Mock.mock(&#39;/api/dynamic&#39;, (options) => { const { type } = JSON.parse(options.body) return { data: type === &#39;simple&#39; ? Mock.mock(&#39;@title&#39;) : Mock.mock(&#39;@cparagraph&#39;) } }) ``` ##### 2. 延迟响应 ```javascript Mock.setup({ timeout: &#39;200-600&#39; // 随机延迟 200~600ms }) ``` ##### 3. 按环境开关 Mock 修改 `mock/index.js`： ```javascript if (process.env.NODE_ENV === &#39;development&#39;) { require(&#39;./mock-data&#39;) // 仅在开发环境启用 } ``` --- #### 四、最佳实践 1. **目录结构建议**： ``` src/ mock/ modules/ # 按功能模块拆分 user.js order.js index.js # 统一入口 ``` 2. **与 Webpack 集成**（替代全局引入）： 在 `vue.config.js` 中配置： ```javascript module.exports = { devServer: { before: require(&#39;./src/mock&#39;) } } ``` 3. **数据规范管理**： - 使用 JSON Schema 定义数据结构 - 保持 Mock 数据与接口文档同步 --- #### 五、注意事项 1. **生产环境禁用**：确保构建时移除 Mock 代码 2. **接口路径匹配**：Mock 的 URL 需与真实接口一致 3. **数据随机性**：利用 `@cname`, `@image` 等占位符生成逼真数据 --- ### 总结 通过 Mock.js 在 Vue2 中模拟接口，开发者可以： - 实现**前后端并行开发** - 快速验证**极端数据场景**（如空列表、超长文本） - 减少对网络环境的依赖 **适用场景**：中小型项目快速验证、敏捷开发迭代。 **局限性**：复杂业务逻辑仍需联调真实接口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值