json-server 快速搭建本地 Mock 数据服务

一、安装

在你的前端项目中，使用 npm 或 yarn 安装：

javascript 复制代码

npm install -g json-server
# 或者项目局部安装
npm install json-server --save-dev

二、创建数据文件

创建一个 db.json 文件，作为模拟数据库。示例内容如下：

javascript 复制代码

{
  "users": [
    { "id": 1, "name": "小明", "age": 18, "hobby": "唱歌" },
    { "id": 2, "name": "小红", "age": 20, "hobby":"跳舞" }
  ],
  "articles": [
    { "id": 1, "title": "前端工程化", "author": "小明" },
    { "id": 2, "title": "Vue3实战", "author": "小红" }
  ]
}

三、启动服务

在package.json文件配置scripts执行脚本

在这里db.json是创建在根目录下的，可以根据自己创建db.json的位置自定义执行脚本

javascript 复制代码

  "scripts": {
    "mock:server": "json-server --watch db.json"
  },

假设现在我将db.json创建在src/mock/db.json，同时修改端口号，那么执行脚本为：

javascript 复制代码

"mock:server": "json-server --watch ./src/mock/db.json --port 3001"

运行以下命令：

javascript 复制代码

npm run mock:server

默认会监听 http://localhost:3000，你将获得一个完整的 REST API 服务。

四、使用

在另一个终端中启动你的项目，然后进行调用即可

javascript 复制代码

const { data } = axios.get('http://localhost:4000/api/user-list');
// 返回
[
    {
        "id": 1,
        "name": "小明",
        "age": 18,
        "hobby": "唱歌"
    },
    {
        "id": 2,
        "name": "小红",
        "age": 20,
        "hobby": "跳舞"
    }
]

五、通过接口获取数据

你可以直接使用以下方式访问数据：

获取所有用户：GET /users

获取指定用户：GET /users/1

添加用户：POST /users

修改用户：PUT /users/1

删除用户：DELETE /users/1

获取users列表数据

http://localhost:4000/api/user-list

javascript 复制代码

const { data } = axios.get('http://localhost:4000/api/user-list');
// 返回
[
	{
    	"id": 1,
        "name": "小明",
	    "age": 18,
    	"hobby": "唱歌"
    },
	{
    	"id": 2,
    	"name": "小红",
        "age": 20,
	    "hobby": "跳舞"
	}
]

根据id获取用户数据

http://localhost:4000/api/get-user-info/1

javascript 复制代码

const { data } = axios.get(`http://localhost:4000/api/get-user-info/1`);
// 返回
{
    "id": 1,
    "name": "小明",
    "age": 18,
    "hobby": "唱歌"
}

添加用户数据

http://localhost:4000/api/add-user

javascript 复制代码

const form =  {
  name: "小刘",
  age: 16,
  hobby: "羽毛球"
}
const { data } = axios.post(`http://localhost:4000/api/add-user`,form);
 // 返回新增成功的数据
{
  "id": 3
  "name": "小刘",
  "age": 16,
  "hobby": "羽毛球",
}

修改用户数据

http://localhost:4000/api/update-user-info/3

javascript 复制代码

const form = {
   id:3,
   name:'小刘',
   age:18,
   hobby: '踢足球'
}
const { data } = axios.put(`http://localhost:4000/api/update-user-info/3`,form);
// 返回修改成功后的数据
{
   "id": 3,
   "name": "小刘",
   "age": 18,
   "hobby": "踢足球"
}

根据用户id删除用户数据

http://localhost:4000/api/delete-user/3

javascript 复制代码

// 删除id为3的用户数据
const { data } = axios.delete(`http://localhost:4000/api/delete-user/3`);

六、路径配置

在和db.json同一层中配置routes.json文件夹可以自定义路由

javascript 复制代码

{
  "/api/*": "/$1",
  "/:resource/:id/show": "/:resource/:id",
  "/posts/:category": "/posts?category=:category",
  "/articles?id=:id": "/posts/:id"
}

配置好后修改一下执行命令

javascript 复制代码

"mock:server": "json-server --watch ./src/mock/db.json --routes ./src/mock/json-server-routes.json --port 3001"

json-server不同版本对应不同的配置，在1.0.0-beta.3中不支持--routes命令

功能	1.0.0-beta.3	最新稳定版本（V0.17.0+）
路由参数	仅支持配置文件	支持 -r/--routes
端口设置	需在配置文件指定	支持 -p/--port
静态文件服务	需单独配置	支持 -s/--static

七、如何将多个接口数据分不同文件存储

假设现在在src/mock下有a.json和b.json，我们想要同时读取其中的数据作为模拟数据放在db.json中

javascript 复制代码

// a.json
{
  "banners": [
    {
      "targetId": 2729787374,
      "bigImageUrl": "https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/61496463192/3c63/227c/6f6b/c816a8f2cead68f90770cfc86af2e818.jpg",
      "imageUrl": "https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/61496460935/97c6/453e/22ff/e4291dc636f8eb3e6b04d1547c716d78.jpg",
      "targetType": 1,
      "typeTitle": "新歌首发",
      "s_ctrp": "linkPlatform$cc$pc_banner_op_channel$bpo$$rt$song$pc$BANNER_PC_V2$fgid$1487019$pgid$0$pid$2284105$rid$2729787374$cid$2244311$traceid$000001985b613f8b17fd0a30857c223e$bcc$pc_banner_op_channel$spc$BANNER_PC_V2-1$fromId$88011$fromType$promotion$bpc$BANNER_PC_V2",
      "url": "orpheus://song/2729787374"
    }
  ]
}

javascript 复制代码

// b.json
{
    "goodsList":[
        {
            "id":"n652",
            "goodsTitle":"测试商品1"
        },
        {
            "id":"c1985",
            "goodsTitle":"测试商品2"
        }
    ]
}

我们需要做一个处理工具，读取需要的数据文件，最后将数据存入db.json中，可以在src/uitls下建立工具multifileMerging.js

javascript 复制代码

const fs = require('fs').promises;
const path = require('path');

// 要合并多少个json文件，在这里列出它们的路径，并将顶层的路由字段进行keys添加
const jsonFiles = [
  { source: './../mock/discover/recommend.json', keys: ['banners'] }
];

// 初始化合并后的对象
const mergedData = {};

// 异步函数，用于读取和合并JSON文件内容
const mergeJsonFiles = async () => {
  try {
    // 遍历所有JSON文件
    for (const { source, keys } of jsonFiles) {
      // 读取文件内容
      const fileContent = await fs.readFile(source, 'utf8');
      // 解析JSON内容
      const data = JSON.parse(fileContent);

      // 将解析后的数据添加到合并后的对象中
      keys.forEach((key) => {
        if (data.hasOwnProperty(key)) {
          mergedData[key] = data[key];
        } else {
          console.warn(`文件 ${source} 中不存在键 ${key}。跳过...`);
        }
      });
    }

    // 将合并后的对象转换为JSON字符串
    const mergedJsonString = JSON.stringify(mergedData, null, 2);

    // 将合并后的JSON字符串写入db.json文件，这里我将db.json放在了src/mock中，大家根据自己的情况做修改
    await fs.writeFile(
      path.join(__dirname, '..', 'mock', 'db.json'),
      mergedJsonString
    );

    console.log('所有JSON文件已成功合并到db.json文件中');
  } catch (error) {
    console.error('合并过程中发生错误：', error);
  }
};

// 调用函数，开始合并过程
mergeJsonFiles();

最后在终端里切到multifileMerging.js目录进行node multifileMerging.js即可在对应位置看到生成的db.json文件，里面包含了a,b两个文件的数据

这时在运行npm run mock:server即可

ps： json-server不会默认识别非顶层路径，故不会生成对应接口

其他

json-server官网
 前端开发福音：用 json-server 快速搭建本地 Mock 数据服务
 json-server从入门开始
 json-server 从入门到精通
 React-数据Mock实现------json-server
JSON-SERVER实现多文件合并
 json-server全攻略-前端必备技能
 json-server增删改查