JSON服务器脚本轻松设置指南:从零开始搭建本地JSON API服务
在前后端分离开发中,后端接口往往需要提前提供给前端进行联调,在没有真实后端环境时,JSON服务器(JSON Server) 成为了开发者的“救星”——它只需几行代码就能快速搭建一个功能完整的RESTful API,支持增删改查、分页、排序等操作,且数据以JSON文件存储,修改即生效,本文将手把手教你如何设置JSON服务器脚本,从安装到高级配置,让你轻松搞定本地模拟数据服务。
JSON服务器是什么?为什么用它?
JSON服务器是一个基于Node.js的轻量级工具,它通过读取本地的JSON文件自动生成RESTful API接口,比如你有一个db.json文件,运行JSON服务器后,就能直接通过HTTP请求操作数据:
GET /posts:获取所有文章GET /posts/1:获取ID为1的文章POST /posts:新增一篇文章PUT /posts/1:更新ID为1的文章DELETE /posts/1:删除ID为1的文章
核心优势:
✅ 零代码:无需编写后端逻辑,JSON文件即数据库
✅ 即时生效:修改JSON文件后,接口数据自动更新
✅ 丰富功能:支持关联数据、路由配置、中间件、CORS跨域等
✅ 开箱即用:几行命令就能启动服务,适合快速原型开发
环境准备:安装Node.js和npm
JSON服务器基于Node.js运行,因此需要先安装Node.js(自带npm包管理器)。
安装Node.js
访问 Node.js官网,下载并安装LTS(长期支持)版本,安装完成后,打开终端(Windows用cmd/PowerShell,Mac/Linux用Terminal),输入以下命令验证是否安装成功:
node -v # 显示Node.js版本,如v18.17.0 npm -v # 显示npm版本,如9.6.7
全局安装JSON服务器
npm install -g json-server
-g表示全局安装,后续可在任意目录使用json-server命令。
基础设置:用JSON文件快速启动API
创建JSON数据文件
在项目根目录下新建一个db.json文件,定义模拟数据(支持嵌套和关联):
{
"posts": [
{ "id": 1, "title": "JSON服务器入门教程", "author": "张三" },
{ "id": 2, "title": "前端开发工具推荐", "author": "李四" }
],
"comments": [
{ "id": 1, "postId": 1, "content": "写得真详细!" },
{ "id": 2, "postId": 2, "content": "收藏了,谢谢分享" }
],
"profile": {
"name": "技术博客",
"description": "分享前端开发经验"
}
}
注意:JSON文件必须符合JSON语法(键值对用双引号,不能有注释),且id字段会自动作为主键(若未提供,JSON服务器会自动生成)。
启动JSON服务器
在终端进入db.json所在目录,执行以下命令:
json-server --watch db.json
-
--watch:监听JSON文件变化,修改数据后自动重启服务(开发时建议加上)
启动成功后,终端会显示类似信息:\{^_^}/ hi! Loading db.json Resources http://localhost:3000/posts http://localhost:3000/comments http://localhost:3000/profile Home http://localhost:3000你可以通过浏览器或API工具(如Postman)访问
http://localhost:3000/posts,获取db.json中的数据了!
进阶配置:让JSON服务器更贴合项目需求
自定义端口(默认3000)
如果3000端口被占用,可通过--port指定端口:
json-server --watch db.json --port 8080
配置路由文件
如果需要自定义接口路径(如将/posts改为/articles),可创建routes.json文件:
{
"/api/posts": "/posts",
"/api/comments": "/comments"
}
启动时添加--routes参数:
json-server --watch db.json --routes routes.json
此时接口路径变为:http://localhost:3000/api/posts。
添加中间件(如CORS跨域)
前端开发时可能涉及跨域请求,可通过--middlewares添加中间件,先安装cors包:
npm install cors
创建middlewares.js文件:
const cors = require('cors');
module.exports = function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*'); // 允许所有来源跨域
res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
next();
};
启动时添加--middlewares参数:
json-server --watch db.json --middlewares middlewares.js
静态文件服务(支持前端页面)
JSON服务器也能托管前端静态文件(如HTML、CSS、JS),假设项目结构如下:
project/
├── public/ # 存放前端文件
│ ├── index.html
│ └── style.css
└── db.json
启动时添加--static参数:
json-server --watch db.json --static public
访问http://localhost:3000即可加载public/index.html,同时API接口仍可正常使用。
使用脚本命令(推荐开发场景)
每次手动输入命令很麻烦,可在package.json中添加脚本,通过npm run启动:
{
"scripts": {
"json-server": "json-server --watch db.json --port 8080 --routes routes.json"
}
}
之后只需在终端执行:
npm run json-server
常见问题与解决方案
Q:启动时报错“Error: EADDRINUSE: address already in use :::3000”
A:端口被占用,通过--port换一个端口(如--port 8080),或找到占用端口的进程(Windows用netstat -ano,Mac/Linux用lsof -i :3000)并关闭。
Q:修改JSON文件后接口数据未更新
A:启动时未加--watch参数,重新执行json-server --watch db.json即可。
Q:如何实现分页、排序、搜索?
JSON服务器支持RESTful查询参数,
- 分页:
GET /posts?_page=1&_limit=10(第1页,每页10条) - 排序:
GET /posts?_sort=author&_order=asc(按作者名升序) - 搜索:
GET /posts?q=教程含“教程”的文章)
更多参数可参考JSON Server文档。
Q:如何持久化数据?
JSON服务器默认将修改写回db.json,无需额外配置,若需修改存储位置,可通过--output指定文件路径:
json-server --watch db.json --output data.json
实战案例:结合Vue/React前端开发
假设用React开发一个文章列表页面,步骤如下:
-
启动JSON服务器(端口3000):
json-server --watch db.json
-
React组件中通过
fetch获取数据:import React, { useState, useEffect } from 'react'; function PostList() { const [posts, setPosts] = useState([]); useEffect(() => { fetch('http://localhost:3000/posts') .then(res => res.json()) .then(data => setPosts(data)); }, []); return ( <div> <h1>文章列表</h1> <ul> {posts.map(post => ( <li key={post.id}>{post.title} - {post.author}</li> ))} </ul> </div> ); } -
运行React项目,即可看到从JSON服务器获取的文章数据,支持增删改查(需调用对应HTTP方法)。



还没有评论,来说两句吧...