如何在本地json-server中删除JSON文件的所有expenses条目？

本地通过命令npx json-server extras/db.json运行json-server服务，端口为localhost:3000，对应的db.json内容如下。目前能通过ID删除单个expenses条目（代码如下），但尝试向http://localhost:3000/expenses发送DELETE请求删除所有条目时，出现404错误，无法完成操作，请问该如何实现删除所有条目？

删除单个条目的代码：

export async function deleteExp(id) {
  const settings = {
    method: 'DELETE',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    }
  }
  try {
    const url = `http://localhost:3000/expenses/${id}`
    const response = await fetch(url, settings)
    const data = await response.json()
    return data
  } catch (e) {
    console.log('Error', e)
    return e
  }
}

db.json文件内容：

{
  "expenses": [
    {
      "id": 22,
      "name": "car payment",
      "amount": 300
    },
    {
      "id": 23,
      "name": "student loan",
      "amount": 400
    },
    {
      "id": 24,
      "name": "credit card",
      "amount": 800
    }
  ]
}

json-server默认不支持直接对集合（比如/expenses）发送DELETE请求来删除所有条目，这就是你遇到404的原因。可以用以下几种方式实现需求：

方法一：批量删除所有条目 #

先获取所有expenses的ID，再逐个调用单个删除接口：

export async function deleteAllExpenses() {
  try {
    // 先获取所有expenses
    const fetchResponse = await fetch('http://localhost:3000/expenses');
    const expenses = await fetchResponse.json();
    
    // 逐个删除
    const deletePromises = expenses.map(exp => deleteExp(exp.id));
    await Promise.all(deletePromises);
    
    return '所有条目已删除';
  } catch (e) {
    console.log('Error deleting all expenses', e);
    return e;
  }
}

方法二：用PUT请求覆盖为空数组 #

直接发送PUT请求到/expenses，将整个数组替换为空数组，效果等同于删除所有条目：

export async function deleteAllExpenses() {
  const settings = {
    method: 'PUT',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify([])
  };
  
  try {
    const response = await fetch('http://localhost:3000/expenses', settings);
    const data = await response.json();
    return data;
  } catch (e) {
    console.log('Error', e);
    return e;
  }
}

方法三：自定义json-server路由支持DELETE /expenses #

如果想让DELETE /expenses直接生效，可以创建自定义服务器文件来扩展json-server的功能：

1. 创建server.js文件：

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('extras/db.json');
const middlewares = jsonServer.defaults();

server.use(middlewares);
server.use(jsonServer.bodyParser);

// 添加自定义DELETE路由
server.delete('/expenses', (req, res) => {
  const db = router.db; // 获取数据库实例
  db.set('expenses', []).write(); // 将expenses设为空数组
  res.json({ message: '所有expenses已删除' });
});

server.use(router);
server.listen(3000, () => {
  console.log('JSON Server is running on http://localhost:3000');
});

2. 安装依赖（如果没装过）：

npm install json-server

3. 启动服务：

node server.js

之后你就可以直接向http://localhost:3000/expenses发送DELETE请求来删除所有条目了。

内容的提问来源于stack exchange，提问作者Pick Avana