使用json-server模拟后台数据

最新推荐文章于 2025-06-17 20:46:50 发布

原创最新推荐文章于 2025-06-17 20:46:50 发布 · 3.3k 阅读

4 ·

CC 4.0 BY-SA版权

杂类专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过安装Node.js及全局安装json-server来快速搭建一个本地JSON数据服务器。包含详细的安装步骤、命令行参数说明及示例，帮助开发者轻松创建用于前端应用测试的数据接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在电脑中需要安装nodejs，然后全局安装json server.

npm install json-server -g

使用linux和macos的电脑需要加上sudo

sudo npm install json-server -g

安装完成后可以用json-server -h命令检查是否安装成功，成功后会出现

json-server [options] <source>

选项：
  --config, -c               Path to config file    [默认值: "json-server.json"]
  --port, -p                 Set port                             [默认值: 3000]
  --host, -H                 Set host                        [默认值: "0.0.0.0"]
  --watch, -w                Watch file(s)                                [布尔]
  --routes, -r               Path to routes file
  --middlewares, -m          Paths to middleware files                    [数组]
  --static, -s               Set static files directory
  --read-only, --ro          Allow only GET requests                      [布尔]
  --no-cors, --nc            Disable Cross-Origin Resource Sharing        [布尔]
  --no-gzip, --ng            Disable GZIP Content-Encoding                [布尔]
  --snapshots, -S            Set snapshots directory               [默认值: "."]
  --delay, -d                Add delay to responses (ms)
  --id, -i                   Set database id property (e.g. _id)  [默认值: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix (e.g. _id as in post_id)
                                                                  [默认值: "Id"]
  --quiet, -q                Suppress log messages from output            [布尔]
  --help, -h                 显示帮助信息                                 [布尔]
  --version, -v              显示版本号                                   [布尔]

示例：
  json-server db.json
  json-server file.js
  json-server http://example.com/db.json

https://github.com/typicode/json-server

安装完成后，在自己的项目目录下建立一个xxx.json文件，例如mock-data.json，并写入数据

{
    "users": [
        {
            "id" : 1,
            "username": "aaa",
            "password": "aaa"
        },
        {
            "id" : 2,
            "username": "bbb",
            "password": "bbb"
        },
        {
            "id": 3,
            "username": "ccc",
            "password": "ccc"
        }
    ]   
}

然后使用命令行工具进入该json文件所在目录，执行json-server --watch xxx.json 【json-server --watch xxx.json --port 3000(端口可随意指定)】

执行成功返回：

\{^_^}/ hi!

  Loading mock-data.json
  Done

  Resources
  http://localhost:3000/users

  Home
  http://localhost:3000

页面信息：