1. ultra-miragejs

基于 MirageJS 实现了众多便于模拟REST风格API的特性。支持：

• 按模块加载多个模拟API的配置，便于组织管理
• 支持白名单
• 辅助工具:
  • 处理Spring Data JPA风格的分页响应
  • 解决无法返回Int类型的ID主键

1.1. MirageJS 介绍

MirageJS可以在前端应用中创建一个完整的 Mock API。支持 REST 和 GraphQL，可以与前端应用无缝集成。

优点:

• 可以创建复杂的 Mock API，支持多种响应模式（延迟、错误等）
• 提供强大的数据库模拟功能，支持动态数据和关系！！！
• 适合在开发过程中测试Service甚至UI，能与 Vue 和 React 等框架良好集成。

适用场景:

• 需要全面模拟 API 行为的复杂应用，尤其是前后端分离的项目。

1.2. 快速开始

安装依赖

npm install @zhoujianhui/ultra-miragejs

在项目根目录中新建 mock 文件夹存放所有配置。

新建测试用的模拟API配置 foo.js 。

import {Response} from "miragejs"

const foo = {
    routes() {
        this.post("/foo/201", () => {
            return new Response(201, {
                location: "/foo/bar"
            })
        })

        this.get("/foo/200", () => {
            return new Response(200, {}, {
                foo: "bar"
            })
        })

        this.get("/foo/404", () => {
            return new Response(404, {}, {message: "404"})
        })

        this.put("/foo/204", () => {
            return new Response(204)
        })

        this.delete("/foo/204", () => {
            return new Response(204)
        })

        //////

        this.get("/foo/pass", () => {
            return new Response(200)
        })
    }
}

export default foo

foo 模拟了简单的CRUD操作，具体语法参考：MirageJS官方文档 。

新建配置文件 config.js 。

import foo from "./foo"

const config = {
    enabled: true,
    urlPrefix: "http://localhost:8080", // API的Base URL
    // 被mock的API列表
    apis: [foo],
    // 在白名单中的API地址将会被pass through到后端真实API
    whiteList: [
        "/foo/pass"
    ]
}

export default config

在 main.js 中启动模拟服务器

import createServer from "@zhoujianhui/ultra-miragejs"
import mockConfig from "../mock/config"

if (process.env.NODE_ENV === "development") {
    createServer(mockConfig)
}

此时项目中所有访问 “http://localhost:8080/foo” 的请求，都会访问模拟出来的API，而不是访问后端真实的API。

注意：因为配置了白名单，所以 “http://localhost:8080/foo/pass” 的请求会被放行到后端真实的API。