Node.js与XAMPP MySQL数据库连接及登录跳转问题排查

1. 端口占用问题解决 #

XAMPP的MySQL服务默认占用3306端口，Node.js服务不能使用同一端口，修改app.js中的端口为其他值（比如3000）：

const port = process.env.PORT || 3000; // 替换原3306为3000

启动Node.js服务后，访问http://localhost:3000即可。

2. 登录页面无响应问题修复 #

核心原因 #

• HTML表单输入框缺少name属性，表单提交时无法传递用户名、密码参数到后端，导致req.body.username/req.body.password为undefined，数据库查询逻辑出错且未处理错误，请求挂起。
• 数据库查询未添加错误捕获，一旦查询出错会直接导致响应无法正常结束。

修改后的HTML代码 #

给输入框补充name属性：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Krishi Mitra Admin Login</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Exo:wght@200&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/logstyle.css">
    <script src="assets/js/logmain.js"></script>
</head>

<body>
    <section>
        <div class="img">
            <img src="assets/imgs/bg.jpg">
        </div>
        <div class="content">
            <div class="form">
                <h2>Login</h2>
                <form action="/" method="post">
                    <div class="input">
                        <span>Username</span>
                        <input type="text" id="username" name="username"> <!-- 添加name属性 -->
                    </div>
                    <div class="input">
                        <span>Password</span>
                        <input type="password" id="password" name="password"> <!-- 添加name属性 -->
                    </div>
                    <div class="input">
                        <div class="submit">
                            <input type="submit" value="Sign In">
                        </div>
                    </div>
                    <span id="error"></span>
                </form>
            </div>
        </div>
    </section>
</body>

</html>

修改后的app.js代码 #

添加错误处理逻辑，移除多余的res.end()，并优化文件路径处理：

const express = require('express')
const bodyParser = require('body-parser')
const mysql = require('mysql')
var path = require('path')
const app = express()
const port = process.env.PORT || 3000; // 修改端口为3000

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// 正确设置静态文件目录（假设assets与app.js同级）
app.use(express.static(__dirname));

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'nodejs'
})

connection.connect(function(error) {
    if (error) throw error
    else console.log("connected to the database successfully!")
});

app.get("/", function(req, res) {
    res.sendFile(path.join(__dirname, "index.html")); // 使用path.join避免路径拼接错误
})

app.post("/", function(req, res) {
    var username = req.body.username;
    var password = req.body.password;

    // 先校验参数是否存在
    if (!username || !password) {
        return res.redirect("/");
    }

    connection.query("select * from loginuser where user_name = ? and user_pass = ?", [username, password], function(error, results, fields) {
        // 捕获数据库查询错误
        if (error) {
            console.error(error);
            return res.redirect("/");
        }
        if (results.length > 0) {
            res.redirect("/welcome"); // 跳转到已定义的dash.html路由
        } else {
            res.redirect("/");
        }
        // redirect会自动结束响应，无需额外res.end()
    })
})

app.get("/welcome", function(req, res) {
    res.sendFile(path.join(__dirname, "dash.html")) // 使用path.join保证路径正确性
})

app.listen(port, () => console.log(`Listening on port ${port}`))

3. 额外优化建议 #

• 禁止明文存储密码，使用bcrypt等库对密码哈希处理后存入数据库，验证时比对哈希值。
• 添加登录失败提示：通过URL参数传递错误信息，前端读取后在#error元素中显示。
• 使用数据库连接池替代单连接，提升服务稳定性：

const pool = mysql.createPool({
    connectionLimit: 10,
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'nodejs'
})
// 查询时改用pool.query代替connection.query

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