Node.js与HTML表单数据收发及本地存储问题咨询

一、解决"cannot post"错误 #

你出现这个错误的直接原因是路由路径设置无效，把app.post('what do i put in here', ...)里的占位符改成实际的接口路径，比如/submit，这样表单提交时才能匹配到对应的路由。

修正后的基础代码（已加入文件写入依赖）：

const express = require('express');
const cors = require('cors');
const fs = require('fs'); // 用于操作本地文件的核心模块
const app = express();

app.use(cors()); 
app.use(express.urlencoded({
   extended: false,
   limit: 10000,
   parameterLimit: 2,
}));

// 自定义路由路径，比如/submit，你也可以改成/form-submit这类自己易记的名称
app.post('/submit', function(req, res) {
   // 直接打印req.body就能查看表单提交的所有数据
   console.log('收到的表单数据：', req.body);
   // 调用自定义函数将数据写入本地TXT
   saveDataToTxt(req.body);
   // 给前端返回提交成功的响应
   res.send('数据提交成功！');
});

app.listen(3000, () => {
   console.log('服务器运行在http://localhost:3000');
});

二、HTML表单如何发送数据 #

HTML表单的action属性必须和Express里的路由路径完全一致，method设为POST，enctype用默认的application/x-www-form-urlencoded（和你配置的express.urlencoded解析格式匹配）。

示例表单代码：

<!DOCTYPE html>
<html>
<head>
   <title>表单提交测试</title>
</head>
<body>
   <form action="http://localhost:3000/submit" method="POST">
      <label>名字：</label>
      <input type="text" name="firstName" required><br>
      <label>姓氏：</label>
      <input type="text" name="lastName" required><br>
      <button type="submit">提交</button>
   </form>
</body>
</html>

• 注意：表单输入框必须设置name属性，name的值会对应req.body里的键名，比如name="firstName"对应req.body.firstName，没有name的输入框数据不会被提交。

三、将表单数据保存到本地TXT文件 #

添加一个自定义函数saveDataToTxt，用fs.appendFile实现追加写入（保留所有提交记录），如果只需要最新数据，可以换成fs.writeFile（覆盖旧数据）。

把以下函数加到你的Express代码中：

function saveDataToTxt(data) {
   // 将对象格式的数据转为字符串，加上时间戳方便区分每条记录
   const record = `提交时间：${new Date().toLocaleString()}，数据：${JSON.stringify(data)}\n`;
   // 写入到项目根目录的form-records.txt文件，路径可自行修改（比如'./data/records.txt'）
   fs.appendFile('./form-records.txt', record, (err) => {
      if (err) {
         console.error('写入文件失败：', err);
         return;
      }
      console.log('数据已成功保存到本地文件');
   });
}

四、验证流程 #

1. 在终端运行node 你的文件名.js启动Express服务器；
2. 打开HTML页面，填写表单并点击提交；
3. 查看终端，会打印出req.body的内容，这就是表单提交的数据；
4. 前往项目根目录，找到form-records.txt文件，里面就是保存的所有提交记录。

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