浏览器中使用mysql库出现listenerCount未定义错误求助

核心问题本质 #

你犯了一个严重的架构错误：mysql库是专为Node.js后端环境设计的，完全无法在浏览器前端运行——这和require语法无关，就算你修改所有模块的导入方式也没用。它依赖Node.js独有的核心API（比如net网络模块、fs文件系统模块），这些API在浏览器环境中根本不存在，这才是你触发listenerCount报错的根本原因（报错是因为mysql库依赖的Node.js EventEmitter相关实现在浏览器中缺失）。

正确解决方案：前后端分离架构 #

必须搭建Node.js后端服务，由后端处理数据库操作，前端通过HTTP API接口与后端通信。

步骤1：搭建Node.js后端服务

用Express框架快速实现处理用户注册的后端接口：

// backend/server.js
const express = require('express');
const mysql = require('mysql');
const cors = require('cors');
const app = express();

// 解决跨域请求问题
app.use(cors());
// 解析JSON格式请求体
app.use(express.json());

// 创建数据库连接池
const pool = mysql.createPool({
    host: "localhost",
    user: "root",
    password: "",
    database: "test",
    connectionLimit: 10
});

// 用户注册接口
app.post('/api/register', (req, res) => {
    const { username, password } = req.body;
    // 使用参数化查询防止SQL注入
    const query = 'INSERT INTO `login`(`Username`, `Password`) VALUES (?, ?)';
    pool.query(query, [username, password], (err, result) => {
        if (err) {
            if (err.code === 'ER_DUP_ENTRY') {
                return res.status(409).json({ message: '用户名已存在' });
            }
            return res.status(500).json({ message: '服务器内部错误' });
        }
        res.status(200).json({ message: '注册成功' });
    });
});

// 启动服务
app.listen(3001, () => {
    console.log('后端服务运行在 http://localhost:3001');
});

安装后端依赖：

npm install express mysql cors

步骤2：修改前端代码，调用后端API

替换原来直接操作数据库的代码，改为通过fetch请求后端接口：

// database.ts
export default async function Ritorno(username: string, password: string) {
    try {
        const response = await fetch('http://localhost:3001/api/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ username, password }),
        });
        const data = await response.json();
        console.log(data.message);
    } catch (error) {
        console.error('请求失败:', error);
    }
}

同时修正Login组件中的错误（原代码里覆盖了传入的参数，需删除无效的变量赋值）：

// Login组件的handleLogin方法
const handleLogin = () => {
    console.log("Username/Email:", usernameEmail);
    console.log("Password:", password);
    Ritorno(usernameEmail, password);
    setGoToHomePage(true);
};

关键安全与规范提醒 #

• 禁止前端暴露数据库凭证：之前你把数据库用户名、密码写在前端代码里，编译后会完全公开，任何人都能直接访问你的数据库，这是致命漏洞。
• 必须加密存储密码：绝对不能明文存储用户密码，要在后端用bcrypt等库加密后再存入数据库。
• 强制使用参数化查询：永远不要直接拼接SQL字符串，避免被SQL注入攻击。

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