vue2 配置 mock.js 模拟后端数据

安装 mockj

首先确保你有一个 vue 2 项目,如果没有,可以用 Vue CLI 创建一个:

vue create vue-mock-demo

开始安装 Mock.js

npm install mockjs --save-dev

创建 Mock 配置文件

在项目的 src 目录下新建一个文件夹 mock,并在其中创建 index.js 文件,用于编写模拟接口。

例如(src/mock/index.js):

import Mock from "mockjs";// 设置延迟响应时间(可选)
Mock.setup({timeout: "200-600", // 模拟请求延迟 200ms 至 600ms
});// 模拟接口返回数据
Mock.mock("/api/user", "get", {code: 200,message: "success",data: {"id|1-100": 1, // 生成一个 1 到 100 的随机数name: "@cname", // 生成一个中文姓名age: "@integer(20, 50)", // 生成 20 至 50 的随机整数email: "@email", // 生成随机邮箱},
});Mock.mock("/api/products", "post", {code: 200,message: "success",data: {"list|5-10": [{"id|+1": 1, // 自增 IDname: "@ctitle(5, 10)", // 生成 5-10 字的中文标题price: "@float(100, 500, 2, 2)", // 生成价格,保留两位小数},],},
});// 你可以在这里添加更多 Mock 接口
console.log("Mock server is running...");// 捕获所有请求 post、get指定
Mock.mock(/.*/, "get", (options) => {console.log("Mock intercepted:", options);return { code: 200, message: "Mock fallback response" };
});

在项目中引入 Mock 配置

为了让 Mock.js 生效,需要在项目的入口文件中引入 mock/index.js 文件。

修改 main.js , 在 src/main.js 中引入:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";// 引入 Mock 配置(仅在开发环境中引入)
if (process.env.NODE_ENV === "development") {require("./mock");
}Vue.config.productionTip = false;new Vue({router,store,render: (h) => h(App),
}).$mount("#app");

这样,Mock 功能只会在开发环境中生效,避免在生产环境中引入模拟数据。

调用接口

`app.vue` 配置如下代码:
<template><div><h1>User Info</h1><div v-if="user"><p>ID: {{ user.id }}</p><p>Name: {{ user.name }}</p><p>Age: {{ user.age }}</p><p>Email: {{ user.email }}</p></div><button @click="fetchUser">Fetch User</button></div>
</template><script>
import axios from "axios";export default {data() {return {user: null,};},methods: {async fetchUser() {try {const response = await axios.get("/api/user");this.user = response.data.data;} catch (error) {console.error("Error fetching user:", error);}},},
};
</script>

启动项目 npm run dev

打开浏览器,在页面中点击按钮可以看到从 /api/user 获取的模拟数据。

完成安装!!

Mock 配置

如果需要根据环境动态加载不同的 Mock 数据,可以将不同的 Mock 配置文件拆分为多个模块。例如:

  • mock/user.js:用户相关数据
  • mock/product.js:产品相关数据

然后在 mock/index.js 中统一引入。

import "./user";
import "./product";

development 关闭 mock

根据环境变量判断是否引入 Mock.js。使用 VUE_APP_USE_MOCK 环境变量来控制:

if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_USE_MOCK === 'true') {require('./mock'); // 引入 Mock 配置
}

在项目根目录下的 .env.development 文件中,添加以下行以开启 Mock.js

VUE_APP_USE_MOCK=true

如果需要关闭 Mock.js,只需将其设置为 false

mock错误排查和解决步骤

1. 确认 Mock 是否生效

在开发模式下,Mock.js 会拦截请求。首先确保 Mock.js 已正确加载并运行:

检查浏览器控制台是否打印了 Mock server is running...(或其他你在 mock/index.js 中定义的日志)。
确保入口文件 main.js 中的 require('./mock') 已被执行。
如果没有看到日志,说明 Mock.js 并未生效,请检查以下内容:

是否正确引入 mock/index.js,路径是否正确。
确保 mock/index.js 在开发环境下加载了。

2. 检查 Axios 的请求路径

Mock.js 默认拦截的是 相对路径 或完全匹配的请求路径。如果你的请求使用了完整的 URL 或者请求未被 Mock 拦截,那么请求会直接发送到实际后端。

Mock.js 的拦截规则:
例如,你在 mock/index.js 中定义了如下 Mock:

Mock.mock("/api/user", "get", { code: 200, message: "success" });

Mock.js 只会拦截 GET 请求到 /api/user 的路径。

排查 Axios 请求路径:
查看你的 axios 请求代码,是否包含了完整的 URL,例如:

axios.get("http://localhost:3000/api/user"); // 这种不会被 Mock.js 拦截

解决方案:将请求改为相对路径:

axios.get("/api/user"); // 这种会被 Mock.js 拦截

如果后端接口域名是必须的,可以使用环境变量区分开发和生产环境。例如,在开发环境中,移除基础 URL:

const instance = axios.create({baseURL: process.env.NODE_ENV === "production" ? "http://your-api.com" : "", // 开发环境不加 baseURL
});

3. 确保 Mock.js 拦截功能未被覆盖

Mock.js 拦截请求的方式是通过 拦截 XMLHttpRequestFetch API 实现的。如果你的项目中有其他代码(例如 axios 配置了自定义的适配器)覆盖了 Mock.js 的拦截功能,Mock 就无法生效。

排查方式:
确认是否在 axios 中配置了自定义适配器:

axios.defaults.adapter = customAdapter; // 如果有这种代码,Mock.js 会失效

检查是否引入了其他拦截器(例如 msw 或其他数据模拟工具),可能会和 Mock.js 冲突。

解决方案:

  • 去掉自定义适配器或其他拦截工具。
  • 如果必须使用其他工具,考虑将 Mock.js 替换为更灵活的解决方案,例如 msw。

4. 确保请求路径和 Mock.js 拦截的路径匹配

Mock.js 的路径匹配是严格的,以下几点需要注意:

  • 请求方法是否匹配:
    如果你定义的是 Mock.mock("/api/user", "get", {...}),但你发送的是 POST 请求,Mock.js 不会拦截。

  • 请求路径是否完全一致:
    比如你定义了 /api/user,但实际请求是 /api/user//api/v1/user,Mock.js 不会拦截。

检查方法:

Mock.js 中定义一个通用拦截规则来捕获所有请求,并查看是否有未匹配的请求:

Mock.mock(/.*/, "get", (options) => {console.log("Mock intercepted:", options);return { code: 200, message: "Mock fallback response" };
});

通过这种方式,你可以查看 Mock.js 是否拦截了请求。如果请求没有被拦截,可能是路径或方法不匹配的问题。

5. 确保 Mock.js 只在开发环境中运行

Mock.js 的引入通常只在开发模式下生效。如果你通过 process.env.NODE_ENV 控制 Mock.js 是否加载,确保 NODE_ENV 的值在开发环境中是 "development"

if (process.env.NODE_ENV === "development") {require("./mock");
}

排查方法:

打印环境变量,确保开发环境的值是 development

console.log("Current NODE_ENV:", process.env.NODE_ENV);

6. 使用 Mock.js 的 xhr 调试功能

Mock.js 提供了一个调试功能,可以帮助排查问题。在浏览器控制台中输入以下代码:

console.log(Mock.XHR.prototype.open.toString());

Mock.js 会打印自己的拦截逻辑。如果你看到的是原生的 XMLHttpRequest.open 方法,说明 Mock.js 的拦截功能没有生效。

7. 检查是否使用了现代 Fetch

Mock.js 默认是拦截 XMLHttpRequest 的请求。如果你使用的是 Fetch API,则需要额外引入 mockjs-fetch 插件来支持拦截 Fetch 请求。

安装 mockjs-fetch

npm install mockjs-fetch --save-dev

mock/index.js 中引入:

require("mockjs-fetch");Mock.mock("/api/user", "get", { code: 200, message: "success" });

8. 检查是否使用了代理服务器

在开发环境中,有些项目会配置代理转发(例如 vue.config.js 中的 devServer.proxy),导致请求被代理转发到实际后端,而不是被 Mock.js 拦截。

排查方式:

检查 vue.config.js 中是否有类似的配置:

module.exports = {devServer: {proxy: {"/api": {target: "http://localhost:3000",changeOrigin: true,},},},
};

解决方案:

  • 在开发阶段禁用代理,或者将 Mock.js 的路径调整为非代理路径。
  • 确保代理只在需要时生效。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64244.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python:用 sklearn SVM 构建分类模型,并评价

编写 test_sklearn_5.py 如下 # -*- coding: utf-8 -*- """ 使用 sklearn 估计器构建分类模型&#xff0c;并评价 """ import numpy as np import matplotlib.pyplot as plt from sklearn import datasets from sklearn.svm import SVC from sk…

Java多线程与线程池技术详解(十)

拥有梦想&#xff0c;即拥有了生命的火种。 梦想是一座高山&#xff0c;攀爬起来虽然艰辛&#xff0c;但一旦到达顶峰&#xff0c;你的努力就将被铭记于人心。 梦想是一个拼图&#xff0c;每一次努力都是一块拼图&#xff0c;最终汇成一个完整的梦想。 梦想是你的信念&#xff…

后端-redis在springboot项目中的使用步骤

redis在springboot项目中的使用场景 如果再创建一张包含状态的表&#xff0c;里面就有两个字段一个id&#xff0c;一个状态&#xff0c;太浪费&#xff0c;那就使用redis存储&#xff0c; 设置营业状态打烊还是营业中

Elasticsearch之mapping属性设置讲解与实战

Elasticsearch之Mapping属性设置讲解与实战 1. 引言 1.1 博客目的与读者定位 本篇技术博客旨在为Elasticsearch的中级用户及开发者提供一个深入浅出的Mapping属性设置指南。无论您是正在构建新的搜索应用,还是希望优化现有Elasticsearch集群的性能,本文都将为您提供详尽的…

解读Modbus TCP指令

解读Modbus TCP指令&#xff1a;[0x01, 0x00, 0x00, 0x00, 0x04, 0x06, 0x01, 0x10, 0x00, 0xC8, 0x00, 0x02, 0x04, 0x00, 0x01, 0x00, 0x01] 在Modbus TCP通信中&#xff0c;数据以字节流的形式传输。理解和解析这些字节对于调试和开发至关重要。本文将详细解析给定的Modbus…

【鸿蒙实战开发】数据的下拉刷新与上拉加载

本章介绍 本章主要介绍 ArkUI 开发中最常用的场景下拉刷新, 上拉加载&#xff0c;在本章中介绍的内容在实际开发过程当中会高频的使用,所以同学们要牢记本章的内容。下面就让我们开始今天的讲解吧&#xff01; List 组件 在 ArkUI 中List容器组件也可以实现数据滚动的效果&a…

ElasticSearch 常见故障解析与修复秘籍

文章目录 一、ElasticSearch启动服务提示无法使用root用户二、ElasticSearch启动提示进程可拥有的虚拟内存少三、ElasticSearch提示用户拥有的可创建文件描述符太少四、ElasticSearch集群yellow状态分析五、ElasticSearch节点磁盘使用率过高&#xff0c;read_only状态问题解决六…

Motionface RTASR 离线实时语音识别直播字幕使用教程

软件使用场景&#xff1a; 直播、视频会议、课堂教学等需要实时字幕的场景。 1&#xff1a;系统要求 软件运行支持32位/64位windows 10/11系统&#xff0c;其他硬件要求无&#xff0c;无显卡也能实时识别字幕。 2&#xff1a;下载安装 链接:百度网盘 请输入提取码 提取码&#…

Https身份鉴权(小迪网络安全笔记~

附&#xff1a;完整笔记目录~ ps&#xff1a;本人小白&#xff0c;笔记均在个人理解基础上整理&#xff0c;若有错误欢迎指正&#xff01; 5.2 Https&身份鉴权 引子&#xff1a;上一篇主要对Http数据包结构、内容做了介绍&#xff0c;本篇则聊聊Https、身份鉴权等技术。 …

Linux 中的 mkdir 命令:深入解析

在 Linux 系统中&#xff0c;mkdir 命令用于创建目录。它是文件系统管理中最基础的命令之一&#xff0c;广泛应用于日常操作和系统管理中。本文将深入探讨 mkdir 命令的功能、使用场景、高级技巧&#xff0c;并结合 GNU Coreutils 的源码进行详细分析。 1. mkdir 命令的基本用法…

【实验】【H3CNE邓方鸣】交换机端口安全实验+2024.12.11

实验来源&#xff1a;邓方鸣交换机端口安全实验 软件下载&#xff1a; 华三虚拟实验室: 华三虚拟实验室下载 wireshark&#xff1a;wireshark SecureCRT v8.7 版本: CRT下载分享与破解 文章目录 dot1x 开启802.1X身份验证 开启802.1X身份验证&#xff0c;需要在系统视图和接口视…

OpenCV实验篇:识别图片颜色并绘制轮廓

第三篇&#xff1a;识别图片颜色并绘制轮廓 1. 实验原理 颜色识别的原理&#xff1a; 颜色在图像处理中通常使用 HSV 空间来表示。 HSV 空间是基于人类视觉系统的一种颜色模型&#xff0c;其中&#xff1a; H&#xff08;Hue&#xff09;&#xff1a;色调&#xff0c;表示颜色…

vue2-请求代理,动态target

当你在 Vue 2 项目中将 axios 的 baseURL 配置为 http://192.168.11.111:8762 时&#xff0c;所有请求都被认为是绝对路径请求&#xff0c;这种请求会直接发送到目标服务器&#xff0c; 跳过开发服务器的代理。 baseURL具体值 这就是为什么代理配置无法拦截 /exportPdf 的原因…

算法-字符串-76.最小覆盖子串

一、题目 二、思路解析 1.思路&#xff1a; 滑动窗口&#xff01;&#xff01;&#xff01; 2.常用方法&#xff1a; 无 3.核心逻辑&#xff1a; 1.特殊情况&#xff1a;s或t是否为空字符串 if(snull||tnull)return ""; 2.声明一个字符数组——用于记录对应字符出现…

【Unity技巧】如何设置屏幕最小宽度

在 Unity 中&#xff0c;设置屏幕最小宽度可以通过调整 Canvas 的 CanvasScaler 组件来控制 UI 元素的缩放&#xff0c;并确保 UI 在不同屏幕宽度下始终能保持适当的布局。 不过&#xff0c;如果你想要限制游戏的实际窗口宽度&#xff0c;通常是通过代码来实现的。例如&#x…

基于softmax回归的多分类

基于softmax回归的多分类任务是机器学习领域中的一种常见应用。softmax回归,又称多项逻辑回归或多类逻辑回归,是逻辑回归在多分类问题上的推广。以下是对基于softmax回归的多分类任务的详细解释: 一、softmax回归的原理 softmax回归的核心思想是通过softmax函数将输入数据…

BatchNorm 与 LayerNorm

文章目录 1. BatchNorm批量归一化2. LayerNorm层归一化3. BatchNorm 和 LayerNorm 对比4. BatchNorm 和 LayerNorm 怎么选择References 今天重看Transformer&#xff0c;发现里面提到了BatchNorm和LayerNorm两种归一化方法&#xff0c;在这儿做一下总结和整理。 1. BatchNorm批…

《机器学习》2.4假设检验 t分布 F分布

目录 t发布 注意是这个东西服从t分布 数据服从t分布通常是在以下情况下&#xff1a; 以下是一些具体的例子&#xff0c;说明在何种情况下数据会服从t分布&#xff1a; t检验 交叉验证t检验 样本方差​编辑 F分布&#xff08;fisher Friedman检验是一种非参数统计方法&a…

java aspose word 模板根据数据导出pdf

支持以功能&#xff1a; 1、字符串占位符替换。 2、占位符循环替换。 3、图片替换。 4、基础图标&#xff0c;折现、饼图、柱状图。 本案例运行环境&#xff1a; 1、aspose word21.1版本。 2、jdk 18。 话不多说直接上代码。 <!-- 图表相关 --><dependency><gro…

Go 语言结构

Go 语言结构 Go 语言,也称为 Golang,是一种由 Google 开发和支持的静态类型、编译型编程语言。它于 2009 年首次发布,旨在提高多核处理器、网络资源和大型代码库的性能。Go 语言以其简洁的语法、并发支持和强大的标准库而闻名,特别适合构建高性能的网络服务和分布式系统。…