Express+MySQL生成数据库按钮异常：仅显示单个undefined按钮

我看了你的代码和控制台输出，马上发现两个导致问题的关键原因：

1. 为啥只出一个按钮？
   你的display函数里，while循环刚跑第一次就return了！这直接终止了函数，后面的数据库根本没机会生成按钮，自然只显示第一个（还因为字段错了显示undefined）。

2. 为啥按钮显示undefined？
   看控制台输出的数据库对象：RowDataPacket { Database: 'information_schema' }，字段名是大写开头的Database，但你代码里写的是databases[i].name，这肯定取不到值啊，所以显示undefined。

另外还给你加了两个小优化：防止SQL注入，还有把表格列表显示得更友好（原来直接输出result会显示[object Object]）。

修改后的完整代码 #

const express = require('express');
const mysql = require('mysql');
var port = 3000;
const app = express();

app.listen(port, () => {
    console.log('Server started on port '+port);
});

// 展示数据库列表
app.get('/', (req, res) => {
    let sql = 'show databases';
    db.query(sql, (err, reply) => {
        if(err) throw err;
        console.log(reply);
        res.send(display(reply))
        
        function display(databases){
            // 先初始化基础HTML内容
            let htmlContent = 'Showing databases...<br><br>';
            // 遍历所有数据库，逐个拼接按钮
            for(let i = 0; i < databases.length; i++){
                // 注意这里用Database字段，和控制台输出对应
                htmlContent += `<input type="button" onclick="location.href='http://localhost:3000/database/${databases[i].Database}';" value="${databases[i].Database}" /><br>`;
            }
            // 循环完所有数据库再返回完整HTML
            return htmlContent;
        }
    });
});

// 数据库连接配置
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password'
});

// 建立数据库连接
db.connect(function(err) {
    if (err) {
        console.error('error connecting: ' + err.stack);
        return;
    }
    console.log("Connected!");
});

// 切换到指定数据库
app.get('/database/:db', useDatabase);
function useDatabase(req, res){
    var data = req.params;
    // 用mysql.escape防止SQL注入，安全第一！
    let sql = 'use ' + mysql.escape(data.db);
    db.query(sql, (err, result) => {
        if(err) throw err;
        console.log(result);
        res.send(`Entering ${data.db}...<br><br>
        <input type="button" onclick="location.href='http://localhost:3000/showtables';" value="Show Tables" />`)
    });
}

// 展示当前数据库的表格
app.get('/showtables', (req, res) => {
    let sql = 'show tables';
    db.query(sql, (err, result) => {
        if(err) throw err;
        console.log(result);
        // 把RowDataPacket转成可读的表格名称列表
        let tablesList = result.map(tableRow => tableRow[Object.keys(tableRow)[0]]).join('<br>');
        res.send(`Showing tables...<br><br>${tablesList}<br><br>
        <input type="button" onclick="location.href='http://localhost:3000/';" value="Back to Databases" />`)
    });
}

核心修改点拆解 #

• 修复循环提前终止：把while循环改成for循环，先把所有按钮的HTML拼接成一个完整字符串，最后再返回，这样每个数据库都会生成对应的按钮。
• 修正字段名：把databases[i].name改成databases[i].Database，和MySQL返回的字段名完全对应。
• SQL注入防护：在切换数据库时用mysql.escape()处理用户传入的数据库名，避免恶意输入搞破坏。
• 优化表格显示：把返回的表格对象数组转成纯文本列表，再也不会看到[object Object]啦。

现在重启你的服务，访问localhost:3000就能看到每个数据库的按钮，点击后也能正常跳转，展示表格的时候也会清晰显示所有表格名称咯！

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