json服务器脚本怎么设置

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方法）。

正文