讲师中心 微信公众号
AI工具推荐 视频效率加速

WebStorm运行JSON Server快速搭建Mock接口

浅婷酱_8732

浅婷酱_8732

发布时间:2026-06-30 08:50:34

|

499人浏览过

|

来源于php中文网

原创

WebStorm 本身不内置 json-server 运行能力,需通过配置 NPM 运行脚本(如 "mock:server": "json-server --watch db.json --port 3000")并创建对应运行配置来启动服务;须禁用 safe write、确保 UTF-8 编码、添加 Content-Type 请求头及符合 id 规则,才能保障增删改查与热更新正常。

webstorm运行json server快速搭建mock接口

WebStorm 本身不内置 json-server 运行能力,但可以无缝集成——关键不是“WebStorm 跑 json-server”,而是用 WebStorm 管理项目、编辑文件、执行脚本,最终靠 Node.js 启动 json-server。只要配置对,点一下「运行」就能起服务,不用切终端。

在 WebStorm 里直接运行 json-server 的正确姿势

WebStorm 不是终端,不能直接敲 json-server --watch db.json 就跑起来。必须把它包装成可识别的「运行配置」,否则右键菜单里根本不会出现「Run」选项。

  • 打开 Run → Edit Configurations…,点击左上角 +,选 NPM
  • package.json 路径要填绝对路径(WebStorm 有时自动填错,建议手动选)
  • Command 填 run,Scripts 填你定义的脚本名,比如 mock:server
  • 确保 package.json 里有对应 script:"mock:server": "json-server --watch db.json --port 3000"
  • 勾选 Allow parallel run(避免改完数据后重启失败)

保存后,右键 package.json 或直接点工具栏绿色三角,就能启动服务 —— 日志会输出在 WebStorm 底部 Run 窗口,Ctrl+Click 可跳转链接。

db.json 改了没反应?检查 --watch 是否生效

很多人以为加了 --watch 就万事大吉,实际常见失效场景:

dmap-jsapi-skill
dmap-jsapi-skill

DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载
  • WebStorm 默认启用「safe write」:先写临时文件再替换原文件,json-server 监听到的是临时文件删除事件,而非内容变更
  • 解决办法:进入 Settings → Appearance & Behavior → System Settings,取消勾选 Use "safe write"
  • 确认 db.json 编码是 UTF-8 无 BOM,否则 json-server 解析失败但不报错,只静默退出
  • 如果用了 routes.json 或中间件,务必在命令中显式指定路径,例如:json-server --watch db.json --routes routes.json --middlewares middleware.js

POST/PUT/DELETE 请求 404 或 405?别漏掉请求头和 ID 规则

前端发 POST 到 /users 却返回 405 Method Not Allowed,或新增数据后 id 字段为空 —— 这不是 WebStorm 的问题,而是 json-server 的默认约定没满足:

  • POST 必须带 Content-Type: application/json,否则被当成表单处理,直接 405
  • db.json 中数组项必须含 id 字段(默认 key 名),且值为数字;若用 _id,得加参数:--id _id
  • PUT /users/1 要求请求体里也带 id: 1,否则 json-server 认为是创建新资源,会生成新 id
  • 想禁写操作(只读 mock)?加 --read-only 参数,但此时 POST/PUT/DELETE 全部 405,不是 bug 是设计

跨域请求被拦截?WebStorm 不管这事,得靠 json-server 配置

浏览器报 CORS 错误,不是 WebStorm 没配好,而是 json-server 默认不开跨域 —— 它压根不处理请求头,只管路由和数据。

  • 启动时加 --no-cors 参数(注意是 --no-cors,不是 --cors)才能禁用 CORS 检查
  • 更推荐方式:前端开发服务器(如 Vite、Webpack Dev Server)配代理,把 /api/ 代理到 http://localhost:3000,比开 --no-cors 更安全
  • 如果硬要用 --no-cors,记得只在开发环境用,上线前删掉,否则暴露接口风险

真正容易被忽略的,是 WebStorm 的文件监听机制和 json-server 的 watch 行为之间那层薄薄的耦合 —— 它不报错,只沉默,直到你发现改了 db.json 但接口没更新,才回头翻 safe write 设置。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

3148

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

4949

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3789

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

446

2026.01.19

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4396

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1355

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1758

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

9963

2023.08.17

剧云故事大纲与分场规划教程
剧云故事大纲与分场规划教程

本专题讲解剧云梗概与多级大纲功能,覆盖全局、分集、分场结构生成,以及主线冲突、剧情节点和场次顺序调整。

0

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn