express+mockjs启动本地mock服务只需三步:初始化项目、安装express和mockjs、编写含正确路由和res.json()响应的server.js;关键在于mockjs模板语法准确(如@cname非@cword)、数据结构与前端预期一致,且避免404或静默失败。

直接用 Express + MockJS 启动本地 mock 服务
不需要装额外插件,Node 环境就绪后,三步就能跑起来。关键不是“怎么装”,而是“怎么让接口真正响应”。很多同学卡在 require('mockjs') 后没导出数据,或没写路由,导致访问 http://localhost:8888/list 返回 404。
- 确保已安装 Node.js(终端执行
node -v和npm -v验证) - 新建项目目录,运行
npm init -y初始化 - 安装依赖:
npm install express mockjs(不用全局装mockjs,它不是 CLI 工具) - 创建
server.js,核心结构必须包含:app.get('/list', (req, res) => { res.json(mockData); }),漏掉res.json()或没写路由路径,请求就静默失败
MockJS 数据模板里最容易写错的语法
占位符写错一个字符,Mock.mock() 就返回空对象或原始字符串,前端收不到数组。不是 MockJS 不工作,是模板没被识别。
-
'name': '@cword(2,5)'→ 错误:MockJS 里是@cname或@cfirst,@cword不存在(官方文档只支持@cName大驼峰写法) -
'id|+1': 1000→ 正确:自增从 1000 开始;但写成'id|+1': '1000'(字符串)就失效 -
'list|5': [{ ... }]→ 必须是数组长度控制语法,写成'list|5-10'也合法,但若想固定 5 条,别多加中横线 - 中文字段用
@cname,英文名用@name,邮箱用@email—— 这些是内置方法名,大小写和拼写不能错
vscode 插件 Mock-Myself 能省哪些事?
它不替代 MockJS,而是帮你绕过手动写 server.js、管理端口、重启服务这些重复劳动。适合频繁改接口结构、需要多人共享 mock 规则的场景。
- 安装插件后,执行命令
mock-myself,自动创建mock/目录并启动服务(默认端口8989) - 所有 mock 文件放
mock/下,如mock/user.js,内容直接导出对象:module.exports = { 'GET /api/user': { code: 200, data: [...] } } - 支持
query(req, fn)动态响应:比如req.query.id === '123'时返回详情,否则返回列表 —— 这比硬编码 JSON 灵活得多 - 注意:插件生成的 mock 文件必须是 CommonJS 格式(
module.exports),ESM 的export default会报错
为什么 nodemon 有时候不自动重启?
不是插件坏了,是文件监听范围没覆盖到。默认只监听 .js 和 .json,但你把 mock 数据写在 .ts 或 .mjs 里,修改后服务就不会热更新。
- 启动命令改成:
nodemon --ext js,json,ts,mjs server.js - 如果用了
mock/目录,加监听:nodemon --watch mock --ext js,json server.js - VSCode 终端里按
Ctrl+C停止后,再运行前确认没有残留进程(lsof -i :8888或任务管理器查 node.exe) - Mac/Linux 下偶尔因权限问题卡住,可加
--legacy-watch参数降级监听模式
res.data.list[0].id 是数字,但 @integer(1,100) 没写,结果 mock 出来是字符串,后续逻辑就崩了。与其后期 debug,不如在 Mock.mock() 里显式声明类型,比如 'id|+1': 1 而不是 'id': '@integer(1,100)'。











