如何将MongoDB数据填充至HTML表单？附Express项目代码求助

嘿，我仔细看了你的代码，发现几个关键问题导致表单没法加载初始值，咱们一步步来修正：

核心问题拆解 #

1. 缺少模板引擎配置：你用了res.render但没设置模板引擎，而当前的index.html是静态文件，根本没法解析feedbacks.name这种动态变量。
2. 路由不匹配：表单的action="/"，但你的app.js里没有处理根路径的GET请求，没法把数据库数据传到页面上。
3. 表单元素错误：Name输入框的name属性是空的，value的写法也不对——静态HTML识别不了feedbacks.name这种后端变量。
4. 数据库查询代码有误：/retrieve路由里的post.find是未定义的，得从MongoDB集合里正确查询数据。
5. 前端引用后端代码错误：index.html里引用..app.js完全没必要，后端代码不能直接在前端加载。

具体解决方案 #

第一步：安装并配置模板引擎 #

咱们用EJS（简单易上手），先安装依赖：

npm install ejs

然后在app.js里添加模板引擎配置：

// 在app = express()之后添加这两行
app.set('view engine', 'ejs');
app.set('views', path.resolve(__dirname, 'views')); // 把模板文件放在新建的views文件夹里

第二步：修改app.js的路由与数据库查询 #

新增根路径的GET路由，用来查询数据并渲染页面，同时修正提交后的跳转逻辑：

// 替换原来的/retrieve路由，新增根路径GET请求处理
app.get('/', function(req, res) {
  dbConn.then(function(client) {
    const db = client.db("test1");
    // 这里假设你要加载Name为shubham的初始数据，可根据需求修改查询条件
    db.collection('feedbacks').findOne({"Name":"shubham"}).then(function(feedback) {
      // 没找到数据时传空对象，避免页面报错
      res.render('index', { feedback: feedback || {} });
    }).catch(function(err) {
      console.error(err);
      res.render('index', { feedback: {} });
    });
  }).catch(function(err) {
    console.error(err);
    res.render('index', { feedback: {} });
  });
});

// 修正提交反馈的路由，提交后重定向回首页
app.post('/post-feedback', function (req, res) {
  dbConn.then(function(client) {
    delete req.body._id;
    const db = client.db("test1");
    db.collection('feedbacks').insertOne(req.body);
  }).catch(function(err) {
    console.error(err);
  });
  res.redirect('/'); // 提交完成后回到首页，能看到最新状态
});

第三步：把HTML改成EJS模板 #

把原来的index.html移到新建的views文件夹里，改名为index.ejs，修正表单的动态渲染逻辑：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>mongodb</title>
</head>
<body>
 <h1>Please fill data in the form below:</h1>
 <!-- 表单action对应后端的POST路由 -->
 <form method="POST" action="/post-feedback">
 <label>Name:<input type="text" name="Name" value="<%= feedback.Name || '' %>" required></label>
 <br>
 <label>Email:<input type="text" name="Email" value="<%= feedback.Email || '' %>" required></label>
 <br>
 <label>Comment:<br><textarea name="comment"><%= feedback.comment || '' %></textarea></label>
 <br>
 <input type="submit" value="Submit">
 </form>
 <a href="/view-feedbacks">View Records</a>
 <a href="/view-sahil">insert dummy record </a>
</body>
</html>

这里用EJS的<%= %>语法渲染动态变量，|| ''是为了防止数据不存在时页面显示undefined。

第四步：清理无效代码 #

删掉index.ejs里的<script src="..app.js"></script>，后端代码不需要在前端加载。

测试运行 #

重启你的Express服务，访问http://localhost:3000，就能看到表单自动加载MongoDB里的初始值啦！

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