Node.js+Handlebars前端传值至后端失败问题求助

问题根源 #

你使用的{{cedula}}是Handlebars模板渲染阶段的服务器端变量，页面加载时用户还未输入内容，这个变量为空，因此生成的<a>标签href是/donaciones/buscar/，没有携带输入的cedula值，导致后端路由因缺少路径参数匹配失败。

解决方案 #

方案一：JavaScript动态处理跳转 #

通过JS实时获取输入框值，手动构造正确的跳转URL：

1. 更新Handlebars模板：

<label for="cedula">Cedula donante:</label>
<input type="number" name="cedula" id="cedula" value="" placeholder="Cedula donante" autofocus>
<a href="#" id="search-btn" class="btn btn-primary">Buscar</a>

2. 添加JavaScript代码（放在页面底部或独立JS文件中）：

document.getElementById('search-btn').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认空链接跳转
  const cedula = document.getElementById('cedula').value.trim();
  
  if (cedula) {
    window.location.href = `/donaciones/buscar/${cedula}`;
  } else {
    alert('Por favor ingresa la cedula del donante');
  }
});

方案二：表单提交适配现有路由 #

用表单包裹元素，通过JS动态修改表单提交目标，匹配你的路径参数路由：

1. 表单化前端代码：

<form id="search-form" method="GET">
  <label for="cedula">Cedula donante:</label>
  <input type="number" name="cedula" id="cedula" value="" placeholder="Cedula donante" autofocus>
  <button type="submit" class="btn btn-primary">Buscar</button>
</form>

2. 添加表单提交处理JS：

document.getElementById('search-form').addEventListener('submit', function(e) {
  const cedula = document.getElementById('cedula').value.trim();
  
  if (cedula) {
    this.action = `/donaciones/buscar/${cedula}`;
  } else {
    e.preventDefault();
    alert('Por favor ingresa la cedula del donante');
  }
});

方案三：修改后端路由接受查询参数（可选） #

如果不想改动前端逻辑，可将后端路由改为接受查询参数，适配普通表单GET提交：

1. 后端路由修改：

router.get('/buscar', isLoggedIn ,async(req, res) =>{
    const cedula = req.query.cedula;
    if (!cedula) {
        req.flash('message', 'Por favor ingresa una cedula');
        return res.redirect('/donantes/ingreso_donantes');
    }
    
    const donante = await pool.query('SELECT * FROM donantes WHERE cedula = ?', [cedula]);
    
    if (donante.length < 1) {
        req.flash('message', 'Donante no registrado!');
        res.redirect('/donantes/ingreso_donantes');
    }else {
        res.render('donaciones/donaciones_ingreso', { donante : donante[0] });
    }
})

2. 前端使用普通表单：

<form action="/donaciones/buscar" method="GET">
  <label for="cedula">Cedula donante:</label>
  <input type="number" name="cedula" id="cedula" value="" placeholder="Cedula donante" autofocus>
  <button type="submit" class="btn btn-primary">Buscar</button>
</form>

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