Node/Express中如何让前端JS读取并修改后端JSON数据？

我来帮你搞定这个需求——让budget.js从incomedata.json读取数据，还能修改保存。核心思路是通过后端Express路由作为中间层，因为前端JS不能直接操作服务器上的文件，得借助API来完成读写操作。下面分步骤来实现：

第一步：配置后端Express路由与中间件 #

首先确保你的Express项目已经配置了express.json()中间件（用来解析前端发送的JSON请求体），然后新增两个路由：一个用来获取收入数据，一个用来保存修改后的数据。

1. 在你的主路由文件（比如routes/index.js）里添加以下代码：

const express = require('express');
const router = express.Router();
const fs = require('fs');
const path = require('path');

// 定义incomedata.json的路径
const incomeDataPath = path.join(__dirname, '../incomedata.json');

// 路由1：获取收入数据
router.get('/api/income-data', (req, res) => {
  fs.readFile(incomeDataPath, 'utf8', (err, data) => {
    if (err) {
      console.error('读取收入数据失败:', err);
      return res.status(500).json({ error: 'Failed to read income data' });
    }
    res.json(JSON.parse(data));
  });
});

// 路由2：保存修改后的收入数据
router.put('/api/income-data', (req, res) => {
  const updatedData = req.body;
  fs.writeFile(incomeDataPath, JSON.stringify(updatedData, null, 2), 'utf8', (err) => {
    if (err) {
      console.error('保存收入数据失败:', err);
      return res.status(500).json({ error: 'Failed to save income data' });
    }
    res.json({ success: true, data: updatedData });
  });
});

module.exports = router;

2. 在app.js里确保已经注册了express.json()中间件，并且挂载了上面的路由：

const express = require('express');
const app = express();

// 解析JSON请求体
app.use(express.json());
// 挂载路由
app.use('/', require('./routes/index'));

// ...其他现有代码

第二步：修改前端budget.js，替换硬编码的incomeData #

把原来硬编码的incomeData替换成通过fetch请求后端API获取的数据，同时添加保存数据的函数。

修改./public/javascripts/budget.js的相关代码：

1. 先定义全局变量存储收入数据，然后在页面加载时获取数据：

let incomeData = {};

// 页面加载时获取收入数据
document.addEventListener('DOMContentLoaded', async () => {
  try {
    const response = await fetch('/api/income-data');
    if (!response.ok) throw new Error('Failed to fetch income data');
    incomeData = await response.json();
    // 这里调用你原来用来渲染数据的函数，比如初始化图表、渲染列表等
    initIncomeDisplay(); // 假设你有这个函数，根据实际情况调整
  } catch (err) {
    console.error('获取数据出错:', err);
  }
});

2. 添加保存数据的函数，当你修改了incomeData后调用这个函数：

async function saveIncomeData() {
  try {
    const response = await fetch('/api/income-data', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(incomeData),
    });
    if (!response.ok) throw new Error('Failed to save data');
    const result = await response.json();
    console.log('数据保存成功:', result);
    // 可以在这里添加成功提示，比如弹窗或者页面反馈
  } catch (err) {
    console.error('保存数据出错:', err);
  }
}

3. 替换原来使用硬编码incomeData的地方，比如当用户修改数据后，更新incomeData变量，然后调用saveIncomeData()。举个例子（根据你的实际业务逻辑调整）：

// 假设用户修改了某一项收入
function updateIncomeItem(id, newAmount) {
  // 找到对应项并更新
  const item = incomeData.items.find(item => item.id === id);
  if (item) {
    item.amount = newAmount;
    // 保存到服务器
    saveIncomeData();
    // 更新页面显示
    updateIncomeDisplay();
  }
}

第三步：测试功能 #

1. 确保incomedata.json的格式是正确的JSON，比如：

{
  "items": [
    { "id": 1, "source": "工资", "amount": 8000 },
    { "id": 2, "source": "副业", "amount": 2000 }
  ]
}

2. 启动Express服务器，访问页面，检查是否能正确加载数据。
3. 修改数据后调用saveIncomeData()，查看服务器上的incomedata.json是否被更新，同时前端页面是否能同步显示修改后的内容。

这样就能实现你要的效果：前端budget.js从服务器的JSON文件读取数据，并且可以修改保存回文件里。

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