每次页面重载后销毁并重新填充Heroku托管的json-server假数据库的函数如何实现

1. 后端（Heroku部署的json-server侧）新增重置接口 #

首先修改你的json-server启动文件（通常命名为server.js），启动时先读取原始db.json内容作为基准数据，新增专属重置接口覆盖当前数据库状态：

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

// 服务启动时只读一次初始db.json，作为基准数据存入内存
const initialDb = JSON.parse(fs.readFileSync(path.join(__dirname, 'db.json'), 'utf-8'));

server.use(middlewares);

// 新增全局重置接口
server.post('/reset', (req, res) => {
  // 直接覆盖当前运行时的数据库状态
  router.db.setState(initialDb);
  // 可选：持久化到Heroku临时文件系统，dyno重启前改动都会保留
  fs.writeFileSync(path.join(__dirname, 'db.json'), JSON.stringify(initialDb, null, 2));
  res.status(200).json({ message: '数据库已重置为初始状态' });
});

server.use(router);

const port = process.env.PORT || 3000;
server.listen(port, () => {
  console.log(`JSON Server 运行在端口 ${port}`);
});

2. 前端侧触发重置逻辑 #

对应你的两种需求场景分别实现触发逻辑：

2.1 页面重载时触发 #

监听页面beforeunload事件，页面重载/关闭前调用重置接口，优先用navigator.sendBeacon避免请求被浏览器中断：

window.addEventListener('beforeunload', () => {
  navigator.sendBeacon('https://你的Heroku应用域名/reset');
});

2.2 会话结束时触发 #

在你的会话销毁逻辑（如登出、超时回调）中直接调用重置接口即可：

// 示例：会话超时回调中插入重置逻辑
function handleSessionExpire() {
  fetch('https://你的Heroku应用域名/reset', { method: 'POST' })
    .then(res => res.json())
    .catch(err => console.error('重置请求失败', err));
}

注意事项 #

• 如果有多用户同时访问，重置操作会影响所有用户的使用，因为是全局修改数据库。如果你需要每个用户独立的临时数据库，需要在后端增加用户标识区分数据，不能直接全局重置
• Heroku免费dyno半小时无访问就会自动休眠，休眠后重新启动会自动回到部署时的db.json状态，如果你不需要实时重置，靠这个特性也能自动定期恢复初始状态
• 测试效果时，可先调用几次增删改接口修改数据，再调用/reset接口，再次查询数据就能确认是否回到初始状态

内容的提问来源于stack exchange，提问作者Toan Lam