尧图网页设计 
1. 项目概述为什么我们需要一个轻量级本地 Mock Model在前后端分离的开发模式下或者当你正在开发一个依赖外部API的独立应用时最头疼的瞬间莫过于“后端接口还没好”。你精心设计的UI组件、流畅的业务逻辑都因为一个404或者一个空响应而卡住开发体验和效率直线下降。这时候一个可靠的Mock模拟数据服务就成了救星。市面上的Mock方案很多有在线的Mock平台也有功能强大的Node.js中间件。但很多时候我们需要的只是一个极其简单、纯粹、不依赖网络、不引入复杂依赖的本地模拟工具。这就是“轻量级本地Mock Model”的价值所在。它不是一个庞大的服务而是一个嵌入在你项目中的、几行代码就能驱动的数据模拟核心。你可以把它理解为一个“数据演员”在你需要的时候它能立刻扮演起后端API的角色返回你预设好的、结构化的数据让你前端的开发工作可以完全不受阻碍地推进。我经历过太多因为等待接口而浪费的“上下文切换”时间也受够了某些Mock工具繁琐的配置和启动流程。所以自己动手写一个轻量级的Mock Model不仅是为了解决眼前的问题更是为了掌握一种“将不确定性转化为确定性”的开发能力。它让你在任何环境下都能快速搭建起一个可预测的、可控的开发沙箱。2. 核心设计思路如何构建一个“轻量级”的Mock核心“轻量级”是贯穿这个项目的核心原则。它意味着零外部依赖或最少依赖、开箱即用、学习成本低、对项目侵入性小。我们的目标不是做一个功能大而全的Mock服务器而是做一个高度可定制、易于集成的数据模拟模块。2.1 核心功能定义一个合格的轻量级Mock Model至少需要具备以下能力路由映射能够根据请求的URL路径和HTTP方法GET, POST等匹配到预先定义好的数据处理器。动态响应不仅能返回静态的JSON数据最好还能支持根据请求参数、请求体动态生成响应内容模拟真实接口的交互。延迟模拟可以人为设置响应延迟模拟网络请求的耗时方便测试前端加载状态。状态码控制能够模拟接口成功200、失败404、500等等不同HTTP状态用于测试前端错误处理逻辑。易于集成可以无缝接入现有的前端开发服务器如Vite、Webpack DevServer或者作为一个独立的Node脚本运行。2.2 技术选型与权衡在Node.js环境下我们有几种实现路径使用Express/Koa等Web框架这是最强大、最灵活的方式但会引入额外的依赖与“轻量级”的初衷略有违背。适合需要复杂路由和中间件功能的场景。基于Node.js原生http/https模块这是最纯粹、零依赖的方式。我们需要手动处理HTTP请求、解析URL、处理请求体等底层细节代码量会稍多但能让我们完全掌控整个过程对理解HTTP协议也大有裨益。作为中间件注入开发服务器现代前端构建工具Vite、Webpack都支持配置开发服务器代理或中间件。我们可以编写一个简单的中间件函数直接拦截特定请求并返回Mock数据。这是侵入性最小、集成最方便的方式。为了极致轻量和教学目的我们将选择第二种方案原生http模块作为核心讲解并延伸介绍第三种方案中间件如何包装这个核心。这样你既能掌握底层原理也能获得即插即用的实践方案。2.3 架构设计我们的Mock Model将采用“配置驱动”的设计。核心是一个MockServer类或一个createMockMiddleware函数它接受一个“路由-处理器”映射配置。其工作流程如下启动服务创建一个HTTP服务器监听指定端口如3000。接收请求服务器接收到任何HTTP请求。路由匹配解析请求的url和method在配置表中查找匹配的规则。执行处理器如果找到匹配项则调用对应的处理函数。这个函数可以接收请求对象包含query、body等并返回一个响应对象包含status、data、delay等。发送响应根据处理器返回的结果设置HTTP状态码、响应头如Content-Type: application/json并在可选延迟后发送响应数据。默认处理如果未找到匹配的路由可以选择返回404或者将请求代理到真实的后端地址这需要额外的代理功能属于进阶能力。3. 分步实现从零搭建你的Mock Server下面我们将用Node.js原生模块一步步实现这个Mock Model。请确保你已安装Node.js环境。3.1 项目初始化与基础结构首先创建一个新的项目目录并初始化。mkdir lightweight-mock-model cd lightweight-mock-model npm init -y我们不需要安装任何第三方包。创建入口文件mockServer.js。// mockServer.js const http require(http); const url require(url); class MockServer { constructor(config {}) { this.routes new Map(); // 使用Map存储路由规则键为method:path值为处理函数 this.port config.port || 3000; this.server null; } // 添加路由规则的方法 addRoute(method, path, handler) { const key ${method.toUpperCase()}:${path}; this.routes.set(key, handler); console.log([Mock] 注册路由: ${key}); } // 批量添加路由从配置对象 setupRoutes(routeConfig) { for (const [path, methods] of Object.entries(routeConfig)) { for (const [method, handler] of Object.entries(methods)) { this.addRoute(method, path, handler); } } } // 启动服务器 start() { this.server http.createServer(this.requestHandler.bind(this)); this.server.listen(this.port, () { console.log(✅ Mock服务器已启动监听 http://localhost:${this.port}); }); } // 停止服务器 stop() { if (this.server) { this.server.close(() { console.log( Mock服务器已停止); }); } } // 核心请求处理逻辑 async requestHandler(req, res) { const parsedUrl url.parse(req.url, true); // 解析URL获取pathname和query const pathname parsedUrl.pathname; const method req.method.toUpperCase(); const routeKey ${method}:${pathname}; // 设置默认响应头为JSON res.setHeader(Content-Type, application/json;charsetutf-8); // 查找匹配的路由 const handler this.routes.get(routeKey); if (handler) { try { // 1. 收集请求数据Query和Body const requestData { query: parsedUrl.query, body: await this.parseRequestBody(req), // 异步解析请求体 method: method, url: req.url }; // 2. 执行用户定义的处理器函数 const result await handler(requestData); // 3. 处理处理器返回的结果 const statusCode result.status || 200; const data result.data ! undefined ? result.data : result; // 兼容直接返回data的写法 const delay result.delay || 0; // 4. 模拟延迟 if (delay 0) { await this.sleep(delay); } // 5. 发送响应 res.writeHead(statusCode); res.end(JSON.stringify(data)); } catch (error) { // 处理器执行出错返回500 console.error([Mock Error] 路由 ${routeKey} 处理失败:, error); res.writeHead(500); res.end(JSON.stringify({ error: Internal Mock Server Error, detail: error.message })); } } else { // 未找到匹配路由返回404 res.writeHead(404); res.end(JSON.stringify({ error: Not Found, path: pathname, method: method })); } } // 解析请求体支持JSON和表单格式 parseRequestBody(req) { return new Promise((resolve) { if (req.method GET || req.method HEAD) { resolve({}); return; } let body ; req.on(data, chunk { body chunk.toString(); }); req.on(end, () { try { if (req.headers[content-type]?.includes(application/json)) { resolve(body ? JSON.parse(body) : {}); } else { // 简单处理表单数据复杂情况可引入querystring模块 resolve(body); } } catch (e) { console.warn(解析请求体失败:, e); resolve({}); } }); }); } // 工具函数延迟 sleep(ms) { return new Promise(resolve setTimeout(resolve, ms)); } } module.exports MockServer;代码解析与注意事项Map存储路由使用Map比对象更合适因为路由键method:path是字符串Map能保持键的插入顺序虽然这里不重要且键名可以是任何类型。异步请求处理requestHandler被标记为async以便用await等待请求体解析和处理函数执行让代码更清晰。健壮的错误处理用try...catch包裹处理器执行过程避免因为一个Mock接口的错误导致整个Mock服务器崩溃。请求体解析parseRequestBody函数是一个简化的实现。在生产级Mock工具中你需要更完善地处理不同的Content-Type如multipart/form-data。这里我们主要处理常见的application/json。sleep函数用于模拟网络延迟这是模拟真实场景非常重要的一个特性。3.2 定义你的Mock数据与路由接下来我们创建一个配置文件mockData.js来定义具体的接口规则。// mockData.js module.exports { // 用户相关接口 /api/user: { GET: (req) { // 可以根据req.query动态返回数据 const userId req.query.id || 1; return { status: 200, delay: 300, // 模拟300ms网络延迟 data: { id: userId, name: 用户${userId}, email: user${userId}example.com, avatar: https://api.dicebear.com/7.x/avataaars/svg?seed${userId} } }; }, POST: async (req) { // 模拟创建用户使用请求体中的数据 console.log(收到创建用户请求数据, req.body); const newUser { id: Date.now(), ...req.body }; return { status: 201, // 创建成功 data: { message: 用户创建成功, user: newUser } }; } }, // 文章列表接口支持分页 /api/posts: { GET: (req) { const page parseInt(req.query.page) || 1; const size parseInt(req.query.size) || 10; const total 45; const list Array.from({ length: size }, (_, i) ({ id: (page - 1) * size i 1, title: Mock文章标题 ${(page - 1) * size i 1}, content: 这里是文章内容用于模拟分页数据。当前第${page}页每页${size}条。, createTime: new Date().toISOString() })); return { data: { list, pagination: { page, size, total, totalPages: Math.ceil(total / size) } } }; } }, // 模拟一个需要权限的接口 /api/admin/data: { GET: (req) { const token req.headers[authorization]; if (!token || !token.includes(Bearer valid-token)) { return { status: 401, data: { error: 未授权访问 } }; } return { data: { secret: 这是管理员才能看到的数据 } }; } }, // 模拟一个可能失败的接口 /api/random/error: { GET: () { const rand Math.random(); if (rand 0.5) { return { status: 500, data: { error: 服务器内部错误请重试 } }; } else { return { status: 200, data: { message: 请求成功 } }; } } } };配置设计心得处理器即函数每个路由的处理逻辑都是一个函数它接收增强后的req对象可以返回一个包含status、data、delay的对象也可以直接返回data状态码默认为200。这种设计给了开发者最大的灵活性。动态数据生成在处理器函数内部你可以使用JavaScript的全部能力。例如用Math.random()模拟不确定性用Date()生成时间戳用Array.from生成列表数据。这比静态JSON文件强大得多。模拟真实场景配置中包含了延迟、分页、权限验证、随机错误等场景这些是前端开发中经常需要测试的。3.3 启动与使用最后创建一个启动文件index.js。// index.js const MockServer require(./mockServer); const mockDataConfig require(./mockData); const mockServer new MockServer({ port: 9999 }); // 指定一个不常用的端口如9999 // 批量设置路由 mockServer.setupRoutes(mockDataConfig); // 启动服务器 mockServer.start(); // 优雅关闭 process.on(SIGINT, () { mockServer.stop(); process.exit(0); });现在在终端运行node index.js你的Mock服务器就启动了。打开浏览器或使用Postman、curl测试GET http://localhost:9999/api/user获取用户信息。GET http://localhost:9999/api/user?id123获取指定ID用户。GET http://localhost:9999/api/posts?page2size5获取第二页的文章。POST http://localhost:9999/api/user带上JSON请求体{name:张三}创建用户。GET http://localhost:9999/api/admin/data会返回401需要添加请求头Authorization: Bearer valid-token。4. 进阶集成作为开发服务器中间件上面的独立服务器模式适合纯前端项目或测试。但在使用Vite、Webpack等工具的实际项目中我们更希望Mock服务能集成进开发服务器实现请求的无感拦截。下面以Vite为例展示如何将我们的核心逻辑改造成一个Vite插件中间件。4.1 创建Vite插件创建一个vite-plugin-mock.js文件。// vite-plugin-mock.js const url require(url); /** * 创建一个Vite Mock插件 * param {Object} userOptions - 用户配置 * param {Object} userOptions.mockConfig - 路由配置同mockData.js格式 * param {number} userOptions.delay - 全局默认延迟(ms) */ function viteMockPlugin(userOptions {}) { const { mockConfig {}, delay: globalDelay 0 } userOptions; const routes new Map(); // 初始化路由Map for (const [path, methods] of Object.entries(mockConfig)) { for (const [method, handler] of Object.entries(methods)) { routes.set(${method.toUpperCase()}:${path}, handler); } } // 解析请求体的辅助函数同前略作简化 const parseRequestBody (req) { // ... 实现与之前MockServer类中的parseRequestBody类似此处省略详细代码 // 返回一个Promise解析出请求体对象 }; return { name: vite-plugin-mock, configureServer(server) { // 在Vite开发服务器上添加中间件 server.middlewares.use(async (req, res, next) { const parsedUrl url.parse(req.url, true); const pathname parsedUrl.pathname; const method req.method.toUpperCase(); const routeKey ${method}:${pathname}; const handler routes.get(routeKey); if (!handler) { // 没有匹配的Mock规则交给下一个中间件或Vite处理如静态资源 return next(); } console.log([Vite Mock] 拦截请求: ${routeKey}); res.setHeader(Content-Type, application/json); try { const requestData { query: parsedUrl.query, body: await parseRequestBody(req), method, url: req.url, headers: req.headers }; const result await handler(requestData); const statusCode result.status || 200; const data result.data ! undefined ? result.data : result; const delay result.delay ! undefined ? result.delay : globalDelay; if (delay 0) { await new Promise(resolve setTimeout(resolve, delay)); } res.statusCode statusCode; res.end(JSON.stringify(data)); } catch (error) { console.error([Vite Mock Error] ${routeKey}:, error); res.statusCode 500; res.end(JSON.stringify({ error: Mock handler error })); } }); } }; } module.exports viteMockPlugin;4.2 在Vite项目中配置在你的vite.config.js中引入并使用这个插件。// vite.config.js import { defineConfig } from vite; import viteMockPlugin from ./plugins/vite-plugin-mock.js; // 假设插件文件放在这里 import mockDataConfig from ./mockData.js; // 引入之前定义的路由配置 export default defineConfig({ plugins: [ // ... 其他插件 viteMockPlugin({ mockConfig: mockDataConfig, delay: 100, // 全局默认100ms延迟 }) ], server: { port: 5173, // Vite默认端口 // 代理配置可以保留用于转发非Mock的API请求到真实后端 proxy: { /api: { target: http://your-real-backend.com, changeOrigin: true, // 因为Mock中间件会先拦截所以未匹配Mock的/api请求才会走到这里 } } } });集成模式的优势无缝开发体验前端开发服务器通常是localhost:5173同时承载了静态资源服务和Mock API服务。你访问前端页面时其发起的API请求会被同一域下的Mock中间件拦截完全避免了跨域问题。热更新友好修改mockData.js配置后通常需要重启独立Mock服务器。而作为Vite中间件在开发模式下你可以利用Vite的热更新机制通过一些额外配置如监听文件变化后清空路由缓存并重新加载配置实现Mock规则的实时更新。与代理并存你可以同时配置Mock和代理。请求先经过Mock中间件如果匹配到Mock规则就返回模拟数据如果不匹配则next()到后续中间件最终可能被Vite的proxy配置转发到真实后端。这样可以在部分接口已就绪时平滑切换。5. 功能增强与实践建议基础的Mock Model已经能覆盖80%的场景。但要让它在团队和生产级开发中更顺手可以考虑以下增强点。5.1 支持配置文件热重载在独立服务器模式中实现一个文件监听器如fs.watch当mockData.js变化时动态重新加载配置并更新路由Map无需重启服务器。// 在MockServer类中增加watch方法 const fs require(fs); const path require(path); class MockServer { // ... 原有代码 ... watchConfigFile(configPath) { fs.watch(path.resolve(configPath), (eventType) { if (eventType change) { console.log([Mock] 检测到配置文件变化重新加载...); delete require.cache[require.resolve(configPath)]; try { const newConfig require(configPath); this.routes.clear(); this.setupRoutes(newConfig); console.log([Mock] 路由配置热重载完成); } catch (err) { console.error([Mock] 配置重载失败:, err); } } }); } } // 在index.js中调用mockServer.watchConfigFile(./mockData.js);5.2 引入Faker.js生成更逼真的数据对于需要大量、多样、逼真模拟数据的场景可以引入faker库或它的现代替代品faker-js/faker。npm install faker-js/faker --save-dev然后在你的Mock配置中使用它const { faker } require(faker-js/faker); module.exports { /api/users: { GET: (req) { const count parseInt(req.query.count) || 10; const users Array.from({ length: count }, () ({ id: faker.string.uuid(), name: faker.person.fullName(), email: faker.internet.email(), avatar: faker.image.avatar(), address: faker.location.streetAddress(), phone: faker.phone.number() })); return { data: users }; } } };注意引入Faker会增加依赖和构建体积建议仅在开发依赖(--save-dev)中安装并通过环境变量或配置控制其仅在开发模式下启用。5.3 区分环境与条件Mock一个高级技巧是让Mock行为可以根据环境或请求条件动态开关。例如你可以在Mock配置中增加一个enable函数。module.exports { /api/feature: { GET: { enable: (req) { // 只在开发环境且请求头中有特定标记时才Mock return process.env.NODE_ENV development req.headers[x-use-mock] true; }, handler: (req) ({ data: 这是Mock数据 }) } } };然后在你的Mock服务器或中间件逻辑里先判断enable条件再决定是否执行handler。5.4 记录与调试为你的Mock Server添加请求日志功能便于调试。// 在requestHandler或中间件中匹配到路由后记录 console.log([${new Date().toISOString()}] ${method} ${pathname} - Mocked); // 在发送响应后记录 console.log([${new Date().toISOString()}] ${method} ${pathname} - Response: ${statusCode});6. 常见问题与排查技巧在实际使用自建Mock Model的过程中你可能会遇到以下问题6.1 请求被跨域CORS策略拦截问题当独立Mock服务器运行在localhost:3000而前端页面运行在localhost:5173时浏览器会因为同源策略而阻止请求。解决方案在Mock服务器的响应头中添加CORS头。// 在requestHandler函数开头或发送响应前添加 res.setHeader(Access-Control-Allow-Origin, *); // 或指定前端地址如http://localhost:5173 res.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); res.setHeader(Access-Control-Allow-Headers, Content-Type, Authorization); // 处理OPTIONS预检请求 if (method OPTIONS) { res.writeHead(204); res.end(); return; }更优方案如前所述使用开发服务器中间件模式让Mock和前端页面同源从根本上避免CORS问题。6.2 POST/PUT请求收不到请求体Body问题处理器中req.body为空。排查检查前端发送请求时是否正确设置了Content-Type: application/json请求头。检查Mock服务器中的parseRequestBody函数是否正确处理了数据流。确保在end事件触发后才去使用body。对于原生http模块请求体是分块传输的必须通过监听data事件来拼接。技巧在parseRequestBody函数中添加调试日志打印接收到的原始字符串看是否正确。6.3 Mock响应不符合预期状态码、数据结构错误问题前端收到的响应状态码不是200或者数据结构与预期不符。排查检查处理器返回值确保你的处理函数返回了正确的格式。是直接返回数据对象还是返回{status, data, delay}结构我们的实现兼容两者但逻辑是如果返回的对象有data属性则用data的值作为响应体否则用整个对象作为响应体。检查路由匹配确认请求的URL和方法包括大小写与注册的路由键完全一致。GET和get是不同的/api/user和/api/user/也可能被区别对待取决于你的URL解析逻辑。建议在注册和匹配时都统一转为大写。使用日志在requestHandler中详细打印routeKey、解析后的requestData以及处理器返回的result进行对比分析。6.4 与真实后端接口切换麻烦问题开发时用Mock联调时需要切换到真实接口需要修改大量前端代码中的请求地址。最佳实践环境变量控制将API基础地址Base URL配置在环境变量中。例如开发环境指向Mock服务器http://localhost:9999生产环境指向真实后端。结合代理如前文Vite插件示例将Mock作为开发服务器中间件。所有前端请求都发给开发服务器如/api/user。Mock中间件拦截匹配的请求不匹配的则通过proxy配置转发到真实后端。这样前端代码完全无需关心当前是Mock还是真实环境切换由构建配置决定。构建时注入利用构建工具如Webpack的DefinePlugin Vite的import.meta.env在构建时注入一个全局标志变量前端代码根据这个变量决定是否在请求头中添加一个特定的Mock标识如X-Use-Mock: trueMock服务器根据此标识决定是否响应。6.5 如何管理大量的Mock接口配置当接口数量很多时把所有配置写在一个mockData.js文件里会难以维护。解决方案按业务模块拆分文件。/mock ├── index.js (入口聚合所有模块配置) ├── user.js (用户模块接口) ├── product.js (商品模块接口) └── order.js (订单模块接口)在index.js中通过Object.assign或展开运算符合并所有模块配置。编写和维护一个轻量级本地Mock Model的过程本质上是对HTTP协议、服务器编程和前端工程化理解的一次深化。它让你从被动的接口消费者转变为开发流程的主动设计者。这个不到200行代码的核心赋予了你应对开发初期“接口空窗期”的从容也为你日后理解更复杂的网关、BFFBackend for Frontend等概念打下了坚实的基础。最重要的是它完全贴合你的项目需求没有冗余功能真正做到了简洁而强大。 从零构建轻量级本地Mock服务器：基于Node.js原生模块的接口模拟方案
1. 项目概述为什么我们需要一个轻量级本地 Mock Model在前后端分离的开发模式下或者当你正在开发一个依赖外部API的独立应用时最头疼的瞬间莫过于“后端接口还没好”。你精心设计的UI组件、流畅的业务逻辑都因为一个404或者一个空响应而卡住开发体验和效率直线下降。这时候一个可靠的Mock模拟数据服务就成了救星。市面上的Mock方案很多有在线的Mock平台也有功能强大的Node.js中间件。但很多时候我们需要的只是一个极其简单、纯粹、不依赖网络、不引入复杂依赖的本地模拟工具。这就是“轻量级本地Mock Model”的价值所在。它不是一个庞大的服务而是一个嵌入在你项目中的、几行代码就能驱动的数据模拟核心。你可以把它理解为一个“数据演员”在你需要的时候它能立刻扮演起后端API的角色返回你预设好的、结构化的数据让你前端的开发工作可以完全不受阻碍地推进。我经历过太多因为等待接口而浪费的“上下文切换”时间也受够了某些Mock工具繁琐的配置和启动流程。所以自己动手写一个轻量级的Mock Model不仅是为了解决眼前的问题更是为了掌握一种“将不确定性转化为确定性”的开发能力。它让你在任何环境下都能快速搭建起一个可预测的、可控的开发沙箱。2. 核心设计思路如何构建一个“轻量级”的Mock核心“轻量级”是贯穿这个项目的核心原则。它意味着零外部依赖或最少依赖、开箱即用、学习成本低、对项目侵入性小。我们的目标不是做一个功能大而全的Mock服务器而是做一个高度可定制、易于集成的数据模拟模块。2.1 核心功能定义一个合格的轻量级Mock Model至少需要具备以下能力路由映射能够根据请求的URL路径和HTTP方法GET, POST等匹配到预先定义好的数据处理器。动态响应不仅能返回静态的JSON数据最好还能支持根据请求参数、请求体动态生成响应内容模拟真实接口的交互。延迟模拟可以人为设置响应延迟模拟网络请求的耗时方便测试前端加载状态。状态码控制能够模拟接口成功200、失败404、500等等不同HTTP状态用于测试前端错误处理逻辑。易于集成可以无缝接入现有的前端开发服务器如Vite、Webpack DevServer或者作为一个独立的Node脚本运行。2.2 技术选型与权衡在Node.js环境下我们有几种实现路径使用Express/Koa等Web框架这是最强大、最灵活的方式但会引入额外的依赖与“轻量级”的初衷略有违背。适合需要复杂路由和中间件功能的场景。基于Node.js原生http/https模块这是最纯粹、零依赖的方式。我们需要手动处理HTTP请求、解析URL、处理请求体等底层细节代码量会稍多但能让我们完全掌控整个过程对理解HTTP协议也大有裨益。作为中间件注入开发服务器现代前端构建工具Vite、Webpack都支持配置开发服务器代理或中间件。我们可以编写一个简单的中间件函数直接拦截特定请求并返回Mock数据。这是侵入性最小、集成最方便的方式。为了极致轻量和教学目的我们将选择第二种方案原生http模块作为核心讲解并延伸介绍第三种方案中间件如何包装这个核心。这样你既能掌握底层原理也能获得即插即用的实践方案。2.3 架构设计我们的Mock Model将采用“配置驱动”的设计。核心是一个MockServer类或一个createMockMiddleware函数它接受一个“路由-处理器”映射配置。其工作流程如下启动服务创建一个HTTP服务器监听指定端口如3000。接收请求服务器接收到任何HTTP请求。路由匹配解析请求的url和method在配置表中查找匹配的规则。执行处理器如果找到匹配项则调用对应的处理函数。这个函数可以接收请求对象包含query、body等并返回一个响应对象包含status、data、delay等。发送响应根据处理器返回的结果设置HTTP状态码、响应头如Content-Type: application/json并在可选延迟后发送响应数据。默认处理如果未找到匹配的路由可以选择返回404或者将请求代理到真实的后端地址这需要额外的代理功能属于进阶能力。3. 分步实现从零搭建你的Mock Server下面我们将用Node.js原生模块一步步实现这个Mock Model。请确保你已安装Node.js环境。3.1 项目初始化与基础结构首先创建一个新的项目目录并初始化。mkdir lightweight-mock-model cd lightweight-mock-model npm init -y我们不需要安装任何第三方包。创建入口文件mockServer.js。// mockServer.js const http require(http); const url require(url); class MockServer { constructor(config {}) { this.routes new Map(); // 使用Map存储路由规则键为method:path值为处理函数 this.port config.port || 3000; this.server null; } // 添加路由规则的方法 addRoute(method, path, handler) { const key ${method.toUpperCase()}:${path}; this.routes.set(key, handler); console.log([Mock] 注册路由: ${key}); } // 批量添加路由从配置对象 setupRoutes(routeConfig) { for (const [path, methods] of Object.entries(routeConfig)) { for (const [method, handler] of Object.entries(methods)) { this.addRoute(method, path, handler); } } } // 启动服务器 start() { this.server http.createServer(this.requestHandler.bind(this)); this.server.listen(this.port, () { console.log(✅ Mock服务器已启动监听 http://localhost:${this.port}); }); } // 停止服务器 stop() { if (this.server) { this.server.close(() { console.log( Mock服务器已停止); }); } } // 核心请求处理逻辑 async requestHandler(req, res) { const parsedUrl url.parse(req.url, true); // 解析URL获取pathname和query const pathname parsedUrl.pathname; const method req.method.toUpperCase(); const routeKey ${method}:${pathname}; // 设置默认响应头为JSON res.setHeader(Content-Type, application/json;charsetutf-8); // 查找匹配的路由 const handler this.routes.get(routeKey); if (handler) { try { // 1. 收集请求数据Query和Body const requestData { query: parsedUrl.query, body: await this.parseRequestBody(req), // 异步解析请求体 method: method, url: req.url }; // 2. 执行用户定义的处理器函数 const result await handler(requestData); // 3. 处理处理器返回的结果 const statusCode result.status || 200; const data result.data ! undefined ? result.data : result; // 兼容直接返回data的写法 const delay result.delay || 0; // 4. 模拟延迟 if (delay 0) { await this.sleep(delay); } // 5. 发送响应 res.writeHead(statusCode); res.end(JSON.stringify(data)); } catch (error) { // 处理器执行出错返回500 console.error([Mock Error] 路由 ${routeKey} 处理失败:, error); res.writeHead(500); res.end(JSON.stringify({ error: Internal Mock Server Error, detail: error.message })); } } else { // 未找到匹配路由返回404 res.writeHead(404); res.end(JSON.stringify({ error: Not Found, path: pathname, method: method })); } } // 解析请求体支持JSON和表单格式 parseRequestBody(req) { return new Promise((resolve) { if (req.method GET || req.method HEAD) { resolve({}); return; } let body ; req.on(data, chunk { body chunk.toString(); }); req.on(end, () { try { if (req.headers[content-type]?.includes(application/json)) { resolve(body ? JSON.parse(body) : {}); } else { // 简单处理表单数据复杂情况可引入querystring模块 resolve(body); } } catch (e) { console.warn(解析请求体失败:, e); resolve({}); } }); }); } // 工具函数延迟 sleep(ms) { return new Promise(resolve setTimeout(resolve, ms)); } } module.exports MockServer;代码解析与注意事项Map存储路由使用Map比对象更合适因为路由键method:path是字符串Map能保持键的插入顺序虽然这里不重要且键名可以是任何类型。异步请求处理requestHandler被标记为async以便用await等待请求体解析和处理函数执行让代码更清晰。健壮的错误处理用try...catch包裹处理器执行过程避免因为一个Mock接口的错误导致整个Mock服务器崩溃。请求体解析parseRequestBody函数是一个简化的实现。在生产级Mock工具中你需要更完善地处理不同的Content-Type如multipart/form-data。这里我们主要处理常见的application/json。sleep函数用于模拟网络延迟这是模拟真实场景非常重要的一个特性。3.2 定义你的Mock数据与路由接下来我们创建一个配置文件mockData.js来定义具体的接口规则。// mockData.js module.exports { // 用户相关接口 /api/user: { GET: (req) { // 可以根据req.query动态返回数据 const userId req.query.id || 1; return { status: 200, delay: 300, // 模拟300ms网络延迟 data: { id: userId, name: 用户${userId}, email: user${userId}example.com, avatar: https://api.dicebear.com/7.x/avataaars/svg?seed${userId} } }; }, POST: async (req) { // 模拟创建用户使用请求体中的数据 console.log(收到创建用户请求数据, req.body); const newUser { id: Date.now(), ...req.body }; return { status: 201, // 创建成功 data: { message: 用户创建成功, user: newUser } }; } }, // 文章列表接口支持分页 /api/posts: { GET: (req) { const page parseInt(req.query.page) || 1; const size parseInt(req.query.size) || 10; const total 45; const list Array.from({ length: size }, (_, i) ({ id: (page - 1) * size i 1, title: Mock文章标题 ${(page - 1) * size i 1}, content: 这里是文章内容用于模拟分页数据。当前第${page}页每页${size}条。, createTime: new Date().toISOString() })); return { data: { list, pagination: { page, size, total, totalPages: Math.ceil(total / size) } } }; } }, // 模拟一个需要权限的接口 /api/admin/data: { GET: (req) { const token req.headers[authorization]; if (!token || !token.includes(Bearer valid-token)) { return { status: 401, data: { error: 未授权访问 } }; } return { data: { secret: 这是管理员才能看到的数据 } }; } }, // 模拟一个可能失败的接口 /api/random/error: { GET: () { const rand Math.random(); if (rand 0.5) { return { status: 500, data: { error: 服务器内部错误请重试 } }; } else { return { status: 200, data: { message: 请求成功 } }; } } } };配置设计心得处理器即函数每个路由的处理逻辑都是一个函数它接收增强后的req对象可以返回一个包含status、data、delay的对象也可以直接返回data状态码默认为200。这种设计给了开发者最大的灵活性。动态数据生成在处理器函数内部你可以使用JavaScript的全部能力。例如用Math.random()模拟不确定性用Date()生成时间戳用Array.from生成列表数据。这比静态JSON文件强大得多。模拟真实场景配置中包含了延迟、分页、权限验证、随机错误等场景这些是前端开发中经常需要测试的。3.3 启动与使用最后创建一个启动文件index.js。// index.js const MockServer require(./mockServer); const mockDataConfig require(./mockData); const mockServer new MockServer({ port: 9999 }); // 指定一个不常用的端口如9999 // 批量设置路由 mockServer.setupRoutes(mockDataConfig); // 启动服务器 mockServer.start(); // 优雅关闭 process.on(SIGINT, () { mockServer.stop(); process.exit(0); });现在在终端运行node index.js你的Mock服务器就启动了。打开浏览器或使用Postman、curl测试GET http://localhost:9999/api/user获取用户信息。GET http://localhost:9999/api/user?id123获取指定ID用户。GET http://localhost:9999/api/posts?page2size5获取第二页的文章。POST http://localhost:9999/api/user带上JSON请求体{name:张三}创建用户。GET http://localhost:9999/api/admin/data会返回401需要添加请求头Authorization: Bearer valid-token。4. 进阶集成作为开发服务器中间件上面的独立服务器模式适合纯前端项目或测试。但在使用Vite、Webpack等工具的实际项目中我们更希望Mock服务能集成进开发服务器实现请求的无感拦截。下面以Vite为例展示如何将我们的核心逻辑改造成一个Vite插件中间件。4.1 创建Vite插件创建一个vite-plugin-mock.js文件。// vite-plugin-mock.js const url require(url); /** * 创建一个Vite Mock插件 * param {Object} userOptions - 用户配置 * param {Object} userOptions.mockConfig - 路由配置同mockData.js格式 * param {number} userOptions.delay - 全局默认延迟(ms) */ function viteMockPlugin(userOptions {}) { const { mockConfig {}, delay: globalDelay 0 } userOptions; const routes new Map(); // 初始化路由Map for (const [path, methods] of Object.entries(mockConfig)) { for (const [method, handler] of Object.entries(methods)) { routes.set(${method.toUpperCase()}:${path}, handler); } } // 解析请求体的辅助函数同前略作简化 const parseRequestBody (req) { // ... 实现与之前MockServer类中的parseRequestBody类似此处省略详细代码 // 返回一个Promise解析出请求体对象 }; return { name: vite-plugin-mock, configureServer(server) { // 在Vite开发服务器上添加中间件 server.middlewares.use(async (req, res, next) { const parsedUrl url.parse(req.url, true); const pathname parsedUrl.pathname; const method req.method.toUpperCase(); const routeKey ${method}:${pathname}; const handler routes.get(routeKey); if (!handler) { // 没有匹配的Mock规则交给下一个中间件或Vite处理如静态资源 return next(); } console.log([Vite Mock] 拦截请求: ${routeKey}); res.setHeader(Content-Type, application/json); try { const requestData { query: parsedUrl.query, body: await parseRequestBody(req), method, url: req.url, headers: req.headers }; const result await handler(requestData); const statusCode result.status || 200; const data result.data ! undefined ? result.data : result; const delay result.delay ! undefined ? result.delay : globalDelay; if (delay 0) { await new Promise(resolve setTimeout(resolve, delay)); } res.statusCode statusCode; res.end(JSON.stringify(data)); } catch (error) { console.error([Vite Mock Error] ${routeKey}:, error); res.statusCode 500; res.end(JSON.stringify({ error: Mock handler error })); } }); } }; } module.exports viteMockPlugin;4.2 在Vite项目中配置在你的vite.config.js中引入并使用这个插件。// vite.config.js import { defineConfig } from vite; import viteMockPlugin from ./plugins/vite-plugin-mock.js; // 假设插件文件放在这里 import mockDataConfig from ./mockData.js; // 引入之前定义的路由配置 export default defineConfig({ plugins: [ // ... 其他插件 viteMockPlugin({ mockConfig: mockDataConfig, delay: 100, // 全局默认100ms延迟 }) ], server: { port: 5173, // Vite默认端口 // 代理配置可以保留用于转发非Mock的API请求到真实后端 proxy: { /api: { target: http://your-real-backend.com, changeOrigin: true, // 因为Mock中间件会先拦截所以未匹配Mock的/api请求才会走到这里 } } } });集成模式的优势无缝开发体验前端开发服务器通常是localhost:5173同时承载了静态资源服务和Mock API服务。你访问前端页面时其发起的API请求会被同一域下的Mock中间件拦截完全避免了跨域问题。热更新友好修改mockData.js配置后通常需要重启独立Mock服务器。而作为Vite中间件在开发模式下你可以利用Vite的热更新机制通过一些额外配置如监听文件变化后清空路由缓存并重新加载配置实现Mock规则的实时更新。与代理并存你可以同时配置Mock和代理。请求先经过Mock中间件如果匹配到Mock规则就返回模拟数据如果不匹配则next()到后续中间件最终可能被Vite的proxy配置转发到真实后端。这样可以在部分接口已就绪时平滑切换。5. 功能增强与实践建议基础的Mock Model已经能覆盖80%的场景。但要让它在团队和生产级开发中更顺手可以考虑以下增强点。5.1 支持配置文件热重载在独立服务器模式中实现一个文件监听器如fs.watch当mockData.js变化时动态重新加载配置并更新路由Map无需重启服务器。// 在MockServer类中增加watch方法 const fs require(fs); const path require(path); class MockServer { // ... 原有代码 ... watchConfigFile(configPath) { fs.watch(path.resolve(configPath), (eventType) { if (eventType change) { console.log([Mock] 检测到配置文件变化重新加载...); delete require.cache[require.resolve(configPath)]; try { const newConfig require(configPath); this.routes.clear(); this.setupRoutes(newConfig); console.log([Mock] 路由配置热重载完成); } catch (err) { console.error([Mock] 配置重载失败:, err); } } }); } } // 在index.js中调用mockServer.watchConfigFile(./mockData.js);5.2 引入Faker.js生成更逼真的数据对于需要大量、多样、逼真模拟数据的场景可以引入faker库或它的现代替代品faker-js/faker。npm install faker-js/faker --save-dev然后在你的Mock配置中使用它const { faker } require(faker-js/faker); module.exports { /api/users: { GET: (req) { const count parseInt(req.query.count) || 10; const users Array.from({ length: count }, () ({ id: faker.string.uuid(), name: faker.person.fullName(), email: faker.internet.email(), avatar: faker.image.avatar(), address: faker.location.streetAddress(), phone: faker.phone.number() })); return { data: users }; } } };注意引入Faker会增加依赖和构建体积建议仅在开发依赖(--save-dev)中安装并通过环境变量或配置控制其仅在开发模式下启用。5.3 区分环境与条件Mock一个高级技巧是让Mock行为可以根据环境或请求条件动态开关。例如你可以在Mock配置中增加一个enable函数。module.exports { /api/feature: { GET: { enable: (req) { // 只在开发环境且请求头中有特定标记时才Mock return process.env.NODE_ENV development req.headers[x-use-mock] true; }, handler: (req) ({ data: 这是Mock数据 }) } } };然后在你的Mock服务器或中间件逻辑里先判断enable条件再决定是否执行handler。5.4 记录与调试为你的Mock Server添加请求日志功能便于调试。// 在requestHandler或中间件中匹配到路由后记录 console.log([${new Date().toISOString()}] ${method} ${pathname} - Mocked); // 在发送响应后记录 console.log([${new Date().toISOString()}] ${method} ${pathname} - Response: ${statusCode});6. 常见问题与排查技巧在实际使用自建Mock Model的过程中你可能会遇到以下问题6.1 请求被跨域CORS策略拦截问题当独立Mock服务器运行在localhost:3000而前端页面运行在localhost:5173时浏览器会因为同源策略而阻止请求。解决方案在Mock服务器的响应头中添加CORS头。// 在requestHandler函数开头或发送响应前添加 res.setHeader(Access-Control-Allow-Origin, *); // 或指定前端地址如http://localhost:5173 res.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); res.setHeader(Access-Control-Allow-Headers, Content-Type, Authorization); // 处理OPTIONS预检请求 if (method OPTIONS) { res.writeHead(204); res.end(); return; }更优方案如前所述使用开发服务器中间件模式让Mock和前端页面同源从根本上避免CORS问题。6.2 POST/PUT请求收不到请求体Body问题处理器中req.body为空。排查检查前端发送请求时是否正确设置了Content-Type: application/json请求头。检查Mock服务器中的parseRequestBody函数是否正确处理了数据流。确保在end事件触发后才去使用body。对于原生http模块请求体是分块传输的必须通过监听data事件来拼接。技巧在parseRequestBody函数中添加调试日志打印接收到的原始字符串看是否正确。6.3 Mock响应不符合预期状态码、数据结构错误问题前端收到的响应状态码不是200或者数据结构与预期不符。排查检查处理器返回值确保你的处理函数返回了正确的格式。是直接返回数据对象还是返回{status, data, delay}结构我们的实现兼容两者但逻辑是如果返回的对象有data属性则用data的值作为响应体否则用整个对象作为响应体。检查路由匹配确认请求的URL和方法包括大小写与注册的路由键完全一致。GET和get是不同的/api/user和/api/user/也可能被区别对待取决于你的URL解析逻辑。建议在注册和匹配时都统一转为大写。使用日志在requestHandler中详细打印routeKey、解析后的requestData以及处理器返回的result进行对比分析。6.4 与真实后端接口切换麻烦问题开发时用Mock联调时需要切换到真实接口需要修改大量前端代码中的请求地址。最佳实践环境变量控制将API基础地址Base URL配置在环境变量中。例如开发环境指向Mock服务器http://localhost:9999生产环境指向真实后端。结合代理如前文Vite插件示例将Mock作为开发服务器中间件。所有前端请求都发给开发服务器如/api/user。Mock中间件拦截匹配的请求不匹配的则通过proxy配置转发到真实后端。这样前端代码完全无需关心当前是Mock还是真实环境切换由构建配置决定。构建时注入利用构建工具如Webpack的DefinePlugin Vite的import.meta.env在构建时注入一个全局标志变量前端代码根据这个变量决定是否在请求头中添加一个特定的Mock标识如X-Use-Mock: trueMock服务器根据此标识决定是否响应。6.5 如何管理大量的Mock接口配置当接口数量很多时把所有配置写在一个mockData.js文件里会难以维护。解决方案按业务模块拆分文件。/mock ├── index.js (入口聚合所有模块配置) ├── user.js (用户模块接口) ├── product.js (商品模块接口) └── order.js (订单模块接口)在index.js中通过Object.assign或展开运算符合并所有模块配置。编写和维护一个轻量级本地Mock Model的过程本质上是对HTTP协议、服务器编程和前端工程化理解的一次深化。它让你从被动的接口消费者转变为开发流程的主动设计者。这个不到200行代码的核心赋予了你应对开发初期“接口空窗期”的从容也为你日后理解更复杂的网关、BFFBackend for Frontend等概念打下了坚实的基础。最重要的是它完全贴合你的项目需求没有冗余功能真正做到了简洁而强大。