页面重载时Node.js自建后端无法保留并获取购物车数据的技术咨询

看起来你的核心问题出在Node.js后端没有正确存储和返回购物车数据，而Firebase本身做了数据持久化存储，所以能正常工作。我们来拆解问题并修复：

问题点1：后端没有持久化（甚至临时存储）数据 #

你的PUT接口只是接收了前端发来的数据并打印，但没有把数据保存到任何地方——既没写入数据库，也没存在内存变量里。每次请求结束后，这些数据就丢失了，下次GET请求自然拿不到。

问题点2：GET接口错误地从req.body获取数据 #

GET请求默认不会携带请求体，所以req.body是空的。你的GET接口试图从这里拿数据，返回的自然是items: undefined和totalQuantity: undefined，前端收到后就会显示空购物车。

修复后的后端代码 #

我们先通过内存变量临时存储数据（适合测试，生产环境建议换成数据库比如MongoDB、SQLite等），同时修正GET接口的逻辑：

const express=require("express"); 
const bodyParser=require('body-parser'); 
const cors=require('cors'); 
const app=express(); 
app.use(cors()); 
app.use(bodyParser.json()); 

// 初始化购物车数据，服务器运行期间会保留在内存中
let cartData = {
  items: [],
  totalQuantity: 0
};

app.put("/",function (req,res) { 
  // 更新存储的购物车数据
  cartData = {
    items: req.body.items,
    totalQuantity: req.body.totalQuantity
  };
  console.log("Updated cart data:", cartData); 
  res.send({ data: cartData }); 
}); 

app.get("/",function (req,res) { 
  // 返回存储的购物车数据，而不是从req.body读取
  res.send({ data: cartData }); 
}); 

app.listen(5000,function () { 
  console.log("Running on 5000"); 
});

额外说明 #

1. 内存存储的局限性：如果重启Node服务器，内存里的cartData会被清空。如果要长期保存数据，需要把数据写入数据库或者文件中。
2. 前端代码无需修改：你的前端fetchCartData逻辑是对的，只要确保页面加载时调用这个action来获取数据即可。

现在测试一下：先通过PUT接口提交购物车数据，然后刷新页面调用GET接口，就能拿到之前保存的数据了。

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