Node.js中EJS无法展示MySQL最新插入表单数据的解决方法

核心是数据库操作的异步时序错误：

• 你在POST路由中调用db.query执行插入操作时，没有等待插入动作执行完成，就直接在回调外部写了res.redirect跳转逻辑。Node.js不会阻塞等待数据库返回结果，会直接执行跳转，此时GET路由去查询数据库时，最新提交的记录还没完成写入，自然只能查到插入前的最新记录（也就是你看到的倒数第二条数据）。
• 额外存在字段不匹配问题：GET路由的查询语句选取的字段是tableone, mksa，但EJS模板中渲染的是FirstName、LastName字段，即使查询时序正确，也会出现渲染值为undefined的问题。

1. 调整路由逻辑，保证时序正确 #

将重定向逻辑移动到数据库插入操作的回调函数内部，确认数据写入成功后再触发跳转，同时修正SELECT语句的查询字段和表结构对齐：

router.get('/forming',showForm);
function showForm(req, res, next) { 
  console.log("test1");
  // 修正查询字段，和实际存储的FirstName、LastName对应
  const getQuery = "SELECT FirstName, LastName FROM myDataBase ORDER BY id DESC LIMIT 1";
  db.query(getQuery, (err,result) => {
    if(err){
      console.log(err);
      return res.status(500).send("数据查询失败");
    }
    res.render('myejs_form_file',{ articleData: result });
  });
};

router.post('/create', function(req, res, next) {
  const userDetails = req.body;
  const sql = 'INSERT INTO myDataBase SET ?';
  db.query(sql, userDetails,function (err, data) { 
      if (err) {
        console.log(err);
        return res.status(500).send("数据插入失败");
      }
      console.log("数据插入成功"); 
      // 插入完成后再执行跳转
      res.redirect('/article/forming');
  });
  // 移除回调外部原来的res.redirect代码
}); 

2. （可选优化）简化EJS模板渲染逻辑 #

由于查询时加了LIMIT 1，返回的结果数组只有1条最新记录，不需要遍历循环，直接取首元素渲染即可：

<div class="user-detail">
          <h2>Input Content & MKSA</h2>
          <form action="/article/create" method="POST">
                <label>First Name</label>
                <input type="text" placeholder="Enter First Name" name="FirstName" required>
                <label>Last Name</label>
                <input type="text" placeholder="Enter Last Name" name="LastName" required>
                <button type="submit">Submit</button>
          </form>
          
      </div>
      <div>
        <table>
          <% if (articleData.length) { %>
              <p><%= articleData[0].FirstName %> this</p> 
              <p><%= articleData[0].LastName %> this</p>
          <% } %>
      </table>
      </div> 

1. 用户提交表单触发POST请求
2. 后端执行数据库插入操作，等待数据库返回插入成功响应
3. 插入完成后自动重定向到GET路由
4. GET路由查询数据库时，最新提交的记录已经完成写入，查询返回的就是最新数据，页面可正常展示刚提交的内容。

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