基于Node.js与Handlebars实现下拉菜单动态填充

嘿，我来帮你搞定把公司ID数组传递到模板填充下拉菜单的事儿！结合你给出的代码片段，咱们一步步来：

1. 确保Handlebars引擎正确配置 #

首先得把Handlebars注册成Express的模板引擎，补全你代码里的create()配置：

var express = require('express');
var mysql = require('mysql');
var pool = mysql.createPool({
    connectionLimit : 10,
    host : 'localhost',
    user : 'root',
    password: 'Baseball247!',
    database: 'award'
});
var app = express();
var handlebars = require('express-handlebars').create({
    defaultLayout: 'main', // 这里填你的默认布局文件名，比如main.handlebars
    extname: '.handlebars' // 模板文件的后缀
});

// 注册Handlebars引擎
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
// 设置模板文件存放目录（默认是项目根目录下的views文件夹，可省略）
app.set('views', './views');

2. 把公司ID数组传递到模板 #

假设你已经通过数据库查询或者其他方式得到了公司ID数组，在对应的路由里把它作为渲染数据传给模板：

情况1：你已经有现成的公司ID数组 #

app.get('/company-select', (req, res) => {
    // 这里是你已经准备好的公司ID数组
    const companyIds = [101, 102, 103, 104];
    
    // 把数组传给模板，键名companyIds会在模板里用到
    res.render('company-dropdown', { companyIds: companyIds });
    // ES6可以简写为res.render('company-dropdown', { companyIds });
});

情况2：从数据库查询公司ID（如果还没做这步） #

如果你的数组是从数据库里拿的，记得用异步回调确保数据拿到后再渲染：

app.get('/company-select', (req, res) => {
    pool.query('SELECT id FROM companies', (err, results) => {
        if (err) {
            console.error('查询公司ID出错:', err);
            return res.status(500).send('服务器错误');
        }
        // 把查询结果转换成ID数组
        const companyIds = results.map(row => row.id);
        res.render('company-dropdown', { companyIds });
    });
});

3. 在Handlebars模板里渲染下拉菜单 #

在views目录下创建你的模板文件（比如company-dropdown.handlebars），用{{#each}}遍历数组生成下拉选项：

<!-- company-dropdown.handlebars -->
<div class="form-group">
    <label for="company">选择公司</label>
    <select id="company" name="company_id">
        <!-- 遍历companyIds数组，this代表当前元素 -->
        {{#each companyIds}}
            <option value="{{this}}">公司ID: {{this}}</option>
        {{/each}}
    </select>
</div>

如果你的数组里包含公司名称（比如是[{id:101, name:"XX科技"}, ...]这种对象数组），可以改成这样：

<select id="company" name="company_id">
    {{#each companyIds}}
        <option value="{{id}}">{{name}}</option>
    {{/each}}
</select>

几个要注意的小细节 #

• 模板文件一定要放在views目录下（或者你自定义的目录，要和app.set('views', ...)对应）
• 如果用数据库查询，必须在回调函数里调用res.render，不然会因为异步问题导致数组还没拿到就渲染模板
• 检查你的MySQL连接池配置，确保能正常连接到数据库

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