NodeJS Express Handlebars联动下拉框实现求助

1. 前端视图（Handlebars）调整 #

先确认客户下拉框已渲染好客户数据，再添加门店下拉框并编写联动逻辑：

<!-- 客户下拉框 -->
<select id="customers_dropdown">
  {{#each customers}}
    <option value="{{this.id}}">{{this.name}}</option>
  {{/each}}
</select>

<!-- 门店下拉框（待填充） -->
<select id="new_dropdown">
  <option value="">请先选择客户</option>
</select>

<script>
// 下拉框联动事件处理
document.getElementById('customers_dropdown').addEventListener('change', async function() {
  const customerId = this.value;
  const storeDropdown = document.getElementById('new_dropdown');

  // 重置下拉框状态
  storeDropdown.innerHTML = '<option value="">加载中...</option>';

  if (!customerId) {
    storeDropdown.innerHTML = '<option value="">请先选择客户</option>';
    return;
  }

  try {
    // 发送请求到后端API
    const res = await fetch(`/api/get-stores?customer_id=${customerId}`);
    const stores = await res.json();

    // 填充门店选项
    storeDropdown.innerHTML = '<option value="">请选择门店</option>';
    stores.forEach(store => {
      const opt = document.createElement('option');
      opt.value = store.id; // 需传递门店ID则保留，否则可省略
      opt.textContent = store.name;
      storeDropdown.appendChild(opt);
    });
  } catch (err) {
    console.error('加载门店失败:', err);
    storeDropdown.innerHTML = '<option value="">加载失败，请重试</option>';
  }
});
</script>

2. 后端API路由实现 #

第一步：安装数据库依赖 #

以mysql2为例执行安装：

npm install mysql2

第二步：编写API路由文件（示例：routes/api.js） #

const express = require('express');
const router = express.Router();
const mysql = require('mysql2/promise');

// 数据库连接配置（建议抽离到单独配置文件）
const dbConfig = {
  host: 'localhost',
  user: '你的数据库用户名',
  password: '你的数据库密码',
  database: '你的数据库名'
};

// 获取指定客户的门店列表
router.get('/get-stores', async (req, res) => {
  try {
    const customerId = req.query.customer_id;
    if (!customerId) {
      return res.status(400).json({ error: '缺少customer_id参数' });
    }

    // 建立数据库连接并执行参数化查询
    const conn = await mysql.createConnection(dbConfig);
    const [rows] = await conn.execute(
      'SELECT s.id, s.name FROM stores s WHERE s.customer_id = ?',
      [customerId]
    );
    await conn.end();

    // 返回门店数据
    res.json(rows);
  } catch (err) {
    console.error('数据库查询错误:', err);
    res.status(500).json({ error: '服务器内部错误' });
  }
});

module.exports = router;

第三步：在app.js中注册路由 #

const apiRouter = require('./routes/api');
app.use('/api', apiRouter);

3. 关键注意点 #

• 使用参数化查询（?占位符）避免SQL注入风险
• 前端用原生fetch实现异步请求，无需额外依赖
• 可根据实际需求调整数据库查询返回的字段（比如只返回name）

内容的提问来源于stack exchange，提问作者María Isabel Lovera Hernández