首页 > 其他分享 >vue2 配置 mock.js 模拟后端数据

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

时间：2024-12-14 20:59:29浏览次数：4  
标签：mock js api user vue2 拦截 Mock

安装 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, // 自增 ID
        name: "@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 拦截请求的方式是通过 拦截 XMLHttpRequest 或 Fetch 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 的路径调整为非代理路径。
  • 确保代理只在需要时生效。

标签：mock,js,api,user,vue2,拦截,Mock
From： https://www.cnblogs.com/niuben/p/18607199

相关文章

  • Jackson @JsonIgnore 注解
    1.概述Jackson是一个广泛使用的Java库，它允许轻松地将Java对象序列化为JSON以及从JSON反序列化回Java对象。Jackson库提供的其中一个注解是@JsonIgnore。这个注解用于在序列化和反序列化过程中忽略特定的属性。这在转换JSON与Java对象之间时隐藏或省略敏感或不必要的数据......
  • Jackson @JsonProperty 注解
    1.概述Jackson是一个流行的Java库，用于将Java对象转换为JSON格式以及从JSON反序列化回Java对象。一种常见的需求是在序列化为JSON或从JSON反序列化时自定义字段的命名。Jackson的@JsonProperty注解正好满足了这一需求。@JsonProperty注解概览@JsonProperty注解用于......
  • Vue2 - 最新详细实现在线预览Excel文件(xls/xlsx)多种方案，解析打开excel电子表格支持
    前言如果您需要Vue3版本，请访问。在vue2|nuxt2项目开发中，详解实现预览excel表格功能，在浏览器中直接打开xls/xlsx文件并渲染效果，文件来源可以是在线url地址、前端调用api接口获取文件流(先下载)等，预览方式可以新开浏览器页签或者自定义弹框等方式，兼容任意高低版本浏......
  • NestJS导出API文档
    在NestJS中，你可以使用@nestjs/swagger包来定义你的API文档，并且可以很容易地将这些文档转换为API调用。以下是一个简单的例子，展示如何使用NestJS和Swagger来创建一个API文档，并且如何生成API调用。首先，安装@nestjs/swagger和swagger-ui-express：npminstall@nestjs/swaggerswagg......
  • Threejs教程，2024全新系统threejs入门教程
    Threejs教程，2024全新系统threejs入门教程https://www.bilibili.com/video/BV1Zm421g7oi/?spm_id_from=333.999.0.02401-theejs三要素WebGL顶点数据顶点索引矩阵三要素场景Scene容器相机Camera观察渲染器Renderer组合透视相机（PerspectiveCamera）http://www.we......
  • 11.19[JAVA-WEB]打通JAVA前后端-JSP
    JAVA网页开发（涉及服务器）结构是什么？代码逻辑是怎样的？JAVA网页开发（涉及服务器）结构是什么？代码逻辑是怎样的？(不使用spring框架)HTML、CSS和JavaScript运行在浏览器中，称为前端脚本服务器端脚本是运行在服务器上，动态生成网页（HTML、CSS和JavaScript）的程序。常见服务器端脚本......
  • node.js毕设邯郸市流浪猫狗救助领养系统 论文+程序
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容一、选题背景关于流浪猫狗救助领养的研究，现有研究主要以大城市为主，专门针对邯郸市的研究较少。在国内外，一些发达地区对流浪动物救助领养有相对完善的体系，例如在部分......
  • node.js毕设基于Java的大学生电子产品维修系统的设计与实现 论文+程序
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容一、选题背景关于大学生电子产品维修系统的研究，现有研究主要以商业电子产品维修服务为主，专门针对大学生群体电子产品维修系统的研究较少。在当今数字化时代，大学生拥......
  • node.js毕设基于的在线农产品交易系统设计与实现 论文+程序
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容一、选题背景关于在线农产品交易系统的研究，现有研究主要集中在电商平台的一般性运营与交易流程方面，专门针对农产品在线交易系统的设计与实现的研究较少。在农产品领......
  • vue+node.js即时通讯聊天室APP开发
    vue+node.js即时通讯聊天室APP开发前端篇（阶段完结）https://www.bilibili.com/video/BV1hT4y1P75N源码https://gitee.com/liu-hanzhuang/a-fleeting-momenthttps://github.com/xsfbigstep/webSocket-node-vueP1yike开篇P2前端准备P3首页页面搭建1P4首页页面搭建2P5......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99