如何为Express渲染的HTML添加功能 实现表单提交数据写入服务端本地文件

• Node.js 服务端代码和浏览器端前端代码是完全隔离的运行环境：require 是 Node.js 专属的模块化语法，浏览器原生不支持，放在 public 静态目录的 JS 是返回给浏览器运行的，写 require 必然报错。
• views 目录默认是服务端渲染模板的存储目录，没有配置静态资源映射，所以前端无法直接访问该目录下的任意文件。表单提交的逻辑要拆分到前端（触发提交请求）和后端（接收数据写本地文件）两部分实现，不能把服务端逻辑写在前端JS里。

1. 补全服务端 server.js 配置 #

需要新增表单数据解析中间件、处理表单提交的POST路由，以及服务端文件写入逻辑：

const path = require('path')
const fs = require('fs')
const app = express()

// 配置解析表单POST数据的中间件
app.use(express.urlencoded({ extended: true }))
// 静态资源映射，只有public目录下的资源可被前端直接访问
app.use(express.static(path.join(__dirname, 'public')));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.get("/", (req, res) => {
    console.log("here")
    res.render("index")
})

// 新增处理表单提交的POST接口
app.post('/submit-form', (req, res) => {
  // 获取表单提交的所有字段数据
  const formData = req.body
  // 将数据转为字符串写入本地文件，示例写入当前目录的data.txt，追加写入避免覆盖历史数据
  const dataStr = JSON.stringify(formData) + '\n'
  fs.appendFile(path.join(__dirname, 'data.txt'), dataStr, (err) => {
    if (err) {
      return res.send('提交失败：' + err.message)
    }
    res.send('提交成功，数据已写入服务端文件')
  })
})

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

2. 编写前端表单及提交逻辑 #

在 views 目录下的 index.html 模板中，直接给表单配置提交地址为上面新增的POST接口即可，示例代码：

<form action="/submit-form" method="POST">
  <!-- 替换为你自己的表单字段，name属性为服务端获取数据的key -->
  <div>
    <label>用户名：</label>
    <input type="text" name="username" required>
  </div>
  <div>
    <label>留言内容：</label>
    <textarea name="content" required></textarea>
  </div>
  <button type="submit">提交</button>
</form>

如果需要无刷新提交，可以在 public 目录下新建前端JS文件（比如public/js/form.js），用fetch/axios发送POST请求即可，注意该JS属于前端运行代码，不要写任何Node.js服务端语法，所有和服务端的交互都通过HTTP请求实现。

3. 运行验证 #

启动服务后访问http://localhost:3000，填写表单提交后，即可在服务端根目录看到生成的data.txt文件，里面存储了所有提交的表单数据。

• 所有需要给浏览器访问的静态资源（前端JS、CSS、图片等）都必须放在public目录下，不要放到views目录
• 服务端逻辑（文件读写、数据库操作、敏感配置等）全部写在服务端路由/脚本中，绝对不要写到前端JS中，避免泄露服务端敏感信息

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