如何将下拉框选中值传递到NodeJS中用于数据库查询

问题原因 #

HTTP 请求是无状态的，不同请求之间相互独立：

• 你在/getmodel POST接口回调内部定义的model是局部变量，作用域仅在该回调函数内，外部无法直接访问
• GET 请求按照规范不会携带请求体，你在/model接口中尝试读取req.body.model本来就无法获取到值

解决方案 #

方案1：合并接口（最推荐）

无需拆分POST和GET两个接口，直接在接收下拉框值的POST接口内完成数据库查询，返回结果即可：

app.post('/getmodel', (req, res) => {
  const model = req.body.model;
  console.log(model);
  // 直接在当前接口执行查询
  const sql = "select * from new_schema.model_list,new_schema.images where model_name = ?";
  // 用?占位符传参，mysql会自动处理转义，避免SQL注入
  db.query(sql, [model], (err, results) => {
    if (err) {
      return res.status(500).send({ error: err.message });
    }
    console.log(results);
    res.send(results);
  });
});

前端直接调用该POST接口即可同时完成参数上传和查询结果获取。

方案2：GET接口通过查询参数传值

如果必须保留两个独立接口，可以让前端请求/model接口时把选中的model值放在URL查询参数中，请求地址格式为/model?model=选中的model值，后端修改如下：

app.get('/model', (req,res)=>{
  // 从URL查询参数获取model
  const model = req.query.model;
  if (!model) {
    return res.status(400).send({ error: '缺少model参数' });
  }
  const sql = "select * from new_schema.model_list,new_schema.images where model_name = ?";
  db.query(sql, [model], (err,results) =>{
    if(err){
      return res.status(500).send({ error: err.message });
    }
    console.log(results);
    res.send(results);
  })
})

方案3：全局变量存储（仅适合单用户测试）

如果是本地单用户测试，可以把model定义为全局变量临时存储，注意多用户场景下会出现值互相覆盖的问题，不建议生产环境使用：

// 顶部定义全局变量
let globalModel = '';

app.post('/getmodel', (req, res) => {
  globalModel = req.body.model;
  console.log(globalModel);
  res.send({ status: 'success' });    
});

app.get('/model', (req,res)=>{
  const sql ="select * from new_schema.model_list,new_schema.images where model_name = ?"
  db.query(sql, [globalModel], (err,results) =>{
    if(err){
      return res.status(500).send({ error: err.message });
    }
    console.log(results)
    res.send(results);
  })
})

原有代码优化点 #

• 不要在接口回调中直接throw err，会导致Node进程崩溃，建议捕获错误后返回对应错误响应给前端
• 数据库查询优先使用?占位符传参，比手动拼接SQL+escape更安全，可有效避免SQL注入问题

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