使用npm.mysql无法连接本地MySQL数据库，遇多类模块缺失错误

问题根源 #

你用的mysql包是Node.js后端专用库，它依赖Node.js的核心模块（如crypto、fs、stream等），这些模块在浏览器环境中不存在，所以直接在前端代码里引入会报模块缺失错误——就算安装额外包或配置webpack也无法从根本解决，因为浏览器本身不支持这些Node核心API。

正确解决方案 #

必须把数据库连接逻辑放到Node.js后端，前端通过HTTP请求获取数据，以下是具体实现步骤：

1. 搭建后端接口（Node.js + Express） #

先创建后端项目，安装依赖：

npm init -y
npm install express mysql cors

编写后端代码（示例命名为server.js）：

const express = require('express');
const mysql = require('mysql');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

// 创建数据库连接
const connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  database: "databaseTest"
});

connection.connect(err => {
  if (err) throw err;
  console.log("数据库连接成功！");
});

// 定义获取饮品数据的接口
app.get('/api/drinks', (req, res) => {
  connection.query('SELECT * FROM drinks', (err, results) => {
    if (err) {
      res.status(500).json({ error: err.message });
      return;
    }
    res.json(results);
  });
});

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

2. 前端修改代码，通过HTTP请求获取数据 #

调整你的DrinksProvider类，用fetch调用后端接口：

export default interface IDrink {
  id: number;
  price: number;
  size: string;
  brand: string;
}

export class DrinksProvider {
  async getDrinks(): Promise<IDrink[]> {
    try {
      const response = await fetch('http://localhost:3001/api/drinks');
      if (!response.ok) throw new Error('请求失败');
      return await response.json();
    } catch (err) {
      console.error('获取饮品数据失败:', err);
      throw err;
    }
  }
}

3. 运行项目 #

• 先启动后端：node server.js
• 再启动前端项目，调用getDrinks方法即可获取数据

关键提醒 #

绝对不要在前端代码中直接写数据库连接信息（用户名、密码等），会导致数据库凭证泄露，引发严重安全问题。所有数据库操作必须通过后端接口中转。

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