简介这份资源围绕 JavaScript 直接访问 MySQL 数据库展开面向从事 AJAX 开发、希望省去后台服务与复杂 JDBC 调用的前端与全栈开发者。核心是 JavaScript DataBase ConnectorJSDBC组件通过 OCX 对象在浏览器端建立与 MySQL 的连接免去部署 Java 运行环境简化调试与应用集成流程。内容涵盖 connectMySQL() 连接、insertMySQL()/execDMLMySQL()/selectMySQL() 执行增删改查、getLastError() 错误处理及 closeMySQL() 释放连接等关键函数并给出可直接引用的脚本示例。资源包共 1 个 doc 文档约 31KB以文字说明与代码片段为主便于快速查阅与对照实践。目前已有 6926 人学习适合想了解前端直连数据库方案、需要轻量调试手段的开发者参考。1. JS 直连 MySQL为什么大多数前端项目一开始就走错了路浏览器里跑着一段 JS想直接读 MySQL 的数据这个念头几乎每个做前端或者写 Node 脚本的人都动过。尤其是做内部工具、数据看板、爬虫后台的时候第一反应往往是「能不能省掉后端这一层JS 直接连库查数据」。答案是可以但分两种完全不同的场景一种是在 Node.js 环境里用mysql2这类驱动直连另一种是在浏览器页面里通过 HTTP 接口间接访问。前者是真直连后者本质还是走后端只是把后端写薄了。很多人搜「JS 直接访问数据 MySQL」其实混淆了这两件事结果在浏览器里引入mysql包打包报错、连接被拒折腾半天才发现方向错了。这篇就把两条路都讲清楚Node 侧怎么连、参数怎么配、连接池怎么管浏览器侧为什么不能直连、该用什么替代方案以及那些我踩过的坑。2. Node.js 侧直连 MySQL从装驱动到跑通第一条查询2.1 为什么选 mysql2 而不是老的 mysql 包Node 生态里连 MySQL 的驱动主流就两个mysql和mysql2。mysql是早期实现纯回调风格Promise 支持要靠promise-mysql这类包装mysql2是它的继任者原生支持 Promise、支持预处理语句prepared statement、支持连接池、性能也更好。我一般无脑选mysql2除非维护的是五六年前的老项目。安装很简单npm install mysql2如果你要用 TypeScript再补一个类型包npm install -D types/nodemysql2自带类型定义不需要额外装types/mysql2那个包是社区维护的反而容易和主包版本对不上。选型上还有一个点mysql2的execute方法走的是真正的预处理语句参数不会拼进 SQL 字符串能挡掉大部分 SQL 注入而query方法是把参数转义后拼字符串。日常写业务我优先用execute只有遇到某些不支持预处理的场景比如动态表名才退回query。2.2 最小可运行连接一条 SELECT 跑通先写一个最简单的脚本确认能连上库、能查到数据// db-basic.js const mysql require(mysql2/promise); async function main() { // 创建单条连接仅用于测试生产别这么干 const conn await mysql.createConnection({ host: 127.0.0.1, port: 3306, user: app_user, password: your_password, database: demo, charset: utf8mb4, }); const [rows, fields] await conn.execute( SELECT id, name, created_at FROM users WHERE status ? LIMIT ?, [1, 10] ); console.log(rows); await conn.end(); } main().catch((err) { console.error(连接或查询失败:, err.message); process.exit(1); });逻辑说明createConnection建立一条物理连接execute执行带占位符的查询?是参数占位符数组里的值按顺序填入。返回的rows是结果集fields是字段元信息。最后必须conn.end()否则进程不会退出。参数说明host用127.0.0.1而不是localhost因为某些环境下localhost会走 Unix socket和 TCP 行为不一致排查问题时容易懵。charset一定写utf8mb4不然 emoji 和部分生僻字会变问号。port默认 3306改过端口的记得对上。2.3 连接池生产环境唯一正确的姿势单条连接只能测试用。真实服务里每次请求新建连接MySQL 的max_connections很快被打满报Too many connections。正确做法是用连接池// db-pool.js const mysql require(mysql2/promise); const pool mysql.createPool({ host: process.env.DB_HOST || 127.0.0.1, port: Number(process.env.DB_PORT) || 3306, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME, charset: utf8mb4, waitForConnections: true, // 池满时排队而不是直接报错 connectionLimit: 10, // 池内最大连接数 queueLimit: 0, // 排队上限0 表示不限制 enableKeepAlive: true, // 保持长连接减少握手开销 keepAliveInitialDelay: 0, timezone: 08:00, // 时区避免时间字段差 8 小时 }); async function getUserById(id) { const [rows] await pool.execute( SELECT id, name FROM users WHERE id ?, [id] ); return rows[0] || null; } module.exports { pool, getUserById };逻辑说明createPool不会立刻建连接而是在第一次查询时按需创建最多到connectionLimit。waitForConnections: true让超出上限的请求排队等待而不是抛错。enableKeepAlive让空闲连接定期发心跳避免被 MySQL 的wait_timeout掐断后拿到一个死连接。参数说明connectionLimit不是越大越好。单实例 Node 进程一般 10 到 20 就够因为 Node 是单线程事件循环并发查询再多也是排队发出去的。设太大反而把 MySQL 的连接数吃光影响其他服务。timezone这个参数是血泪经验不写的话DATETIME字段读出来会按 UTC 解释前端显示就差 8 小时很多人以为是前端格式化的问题其实是驱动时区没配。2.4 用环境变量管配置别把密码写进代码上面已经用了process.env。配套装一个dotenvnpm install dotenv项目根目录建.envDB_HOST127.0.0.1 DB_PORT3306 DB_USERapp_user DB_PASSWORDyour_password DB_NAMEdemo入口文件第一行加载require(dotenv).config();.env必须进.gitignore。我见过太多把生产库密码提交到仓库的翻车案例改密码、查日志、追溯泄露一套流程下来半天没了。3. 浏览器里的 JS 为什么连不上 MySQL把边界讲透3.1 协议层就决定了浏览器不能直连MySQL 用的是自己的二进制协议跑在 TCP 之上不是 HTTP。浏览器能发起的网络请求只有 HTTP/HTTPS、WebSocket 等少数几种根本没有办法说 MySQL 的握手协议。你在页面里import mysql from mysql2打包工具会尝试把 Node 的net、tls模块塞进去直接报模块找不到。就算用browserify强行 polyfill浏览器也不允许页面主动发起任意 TCP 连接。这是安全模型决定的不是技术没做到。所以「JS 直接访问数据 MySQL」在浏览器语境下唯一可行的解释是JS 通过一个 HTTP 接口去访问 MySQL接口那层由后端实现。这个后端可以很薄但必须有。3.2 最薄的中间层一个 Express 接口如果只是内部工具不想写完整后端用 Express 起一个只做转发的服务就够了// server.js const express require(express); const { pool } require(./db-pool); const app express(); app.use(express.json()); app.get(/api/users/:id, async (req, res) { try { const id Number(req.params.id); if (!Number.isInteger(id) || id 0) { return res.status(400).json({ error: invalid id }); } const [rows] await pool.execute( SELECT id, name, created_at FROM users WHERE id ?, [id] ); if (!rows.length) return res.status(404).json({ error: not found }); res.json(rows[0]); } catch (err) { console.error(err); res.status(500).json({ error: internal error }); } }); app.listen(3000, () console.log(listening on 3000));逻辑说明路由参数先做类型和范围校验再进 SQL。查询用execute加占位符杜绝拼接。错误统一返回 500不把数据库原始错误抛给前端避免泄露表结构。参数说明express.json()是为了解析 POST 的 JSON bodyGET 用不上但一起加上无妨。端口 3000 按需改。生产环境这个服务前面还要挂反向代理和鉴权不能裸奔。3.3 前端侧怎么调fetch 就够了浏览器里就是普通的 fetch// 前端调用 async function loadUser(id) { const resp await fetch(/api/users/${id}); if (!resp.ok) { throw new Error(请求失败: ${resp.status}); } return resp.json(); }逻辑说明resp.ok判断状态码是否在 200 到 299非 2xx 直接抛错避免把错误响应当正常数据解析。返回的 JSON 直接给业务用。参数说明如果接口和页面不同源需要后端配 CORS或者前端走同源的反向代理。开发阶段用 Vite 或 webpack 的 proxy 配置转发生产用 Nginx 统一入口别在前端硬编码后端地址。3.4 什么时候该用 WebSocket 而不是 HTTP如果数据是实时推送的比如监控看板要持续刷新用 HTTP 轮询会很浪费。这时候可以在后端用 WebSocket 把 MySQL 的变更推给前端。但注意WebSocket 只是传输通道MySQL 那边还是后端在查。常见做法是后端定时查或者监听 binlog再通过 WebSocket 广播。前端用原生WebSocket或者socket.io接收即可。这条路的复杂度比 HTTP 高一个量级不是实时需求就别上。4. 避坑与排查那些让连接失败的常见原因4.1 报 ER_ACCESS_DENIED_ERROR账号权限或来源限制现象连接直接失败错误码ER_ACCESS_DENIED_ERROR提示 Access denied for user。原因三种可能。密码错账号不存在账号存在但host限制不允许从当前 IP 连。MySQL 的账号是userhost组合app_userlocalhost和app_user%是两个不同账号。解决先确认账号和密码再查SELECT user, host FROM mysql.user WHERE user app_user;。如果只有localhost而你是从另一台机器连需要建一个app_user%或者指定 IP 的账号并授权。生产环境别图省事用%按实际来源 IP 授权。4.2 报 ECONNREFUSED端口没通或被防火墙挡了现象connect ECONNREFUSED 127.0.0.1:3306。原因MySQL 没启动或者监听的地址不对或者防火墙拦了。MySQL 默认可能只监听127.0.0.1外部连不进来。解决先systemctl status mysql看服务状态。再看配置文件里的bind-address如果是127.0.0.1而你需要外部访问改成0.0.0.0并重启。然后确认防火墙放行了 3306 端口。云服务器还要检查安全组规则。这几层任何一层没通都是这个错。4.3 报 ER_NOT_SUPPORTED_AUTH_MODE认证插件不匹配现象MySQL 8.0 默认用caching_sha2_password老版本客户端或某些驱动连不上报ER_NOT_SUPPORTED_AUTH_MODE。原因驱动版本太老不支持新的认证插件。解决优先升级驱动mysql2较新版本都支持。如果升不了只能改账号认证方式ALTER USER app_user% IDENTIFIED WITH mysql_native_password BY your_password;。但这是降级方案安全性变差能升级驱动就别改账号。4.4 报 PROTOCOL_CONNECTION_LOST连接被服务端掐断现象服务跑一段时间后突然报PROTOCOL_CONNECTION_LOST重启又好了。原因MySQL 的wait_timeout默认 8 小时空闲连接被服务端关闭但连接池里还留着这个死连接下次拿到就报错。解决开enableKeepAlive让连接定期发心跳。同时把连接池的idleTimeout设得比wait_timeout小主动回收空闲连接。另外在查询失败时做一次重试能兜住偶发的连接失效。4.5 时间字段差 8 小时时区配置漏了现象数据库里存的是2024-01-01 10:00:00JS 读出来变成2024-01-01 02:00:00。原因驱动默认按 UTC 解释DATETIME而你的库和业务是东八区。解决连接配置里加timezone: 08:00。或者统一用TIMESTAMP类型并让 MySQL 处理时区转换。两种方案选一种别混用混用会出现有的字段对、有的字段错排查起来很痛苦。5. 进阶把直连封装成可维护的数据访问层5.1 用事务保证多条写入的一致性单条 SQL 不需要事务但涉及多条写入就必须用。mysql2的连接池提供getConnection拿一条独占连接来开事务async function transfer(fromId, toId, amount) { const conn await pool.getConnection(); try { await conn.beginTransaction(); await conn.execute( UPDATE accounts SET balance balance - ? WHERE id ? AND balance ?, [amount, fromId, amount] ); await conn.execute( UPDATE accounts SET balance balance ? WHERE id ?, [amount, toId] ); await conn.commit(); } catch (err) { await conn.rollback(); throw err; } finally { conn.release(); // 必须归还否则连接池会被耗尽 } }逻辑说明beginTransaction开启事务所有操作走同一条连接commit提交出错rollback回滚。finally里release把连接还给池子这一步漏了就是连接泄漏跑一会儿池子就空了。参数说明扣款那条 SQL 带了AND balance ?这是乐观锁思路余额不足时影响行数为 0业务层要检查affectedRows决定是否继续。不加这个条件并发下会出现负余额。5.2 用预处理语句挡住 SQL 注入前面一直用execute这里说清楚为什么。假设拼接字符串// 错误示范别这么写 const sql SELECT * FROM users WHERE name ${name};如果name是 OR 11整条 SQL 的语义就被改了全表数据泄露。用execute加占位符参数永远被当数据不会被解释成 SQL 语法。这是最省事也最有效的防线没有之一。5.3 慢查询怎么定位连接层能做的排查有限慢查询要靠 MySQL 自己。开慢查询日志SET GLOBAL slow_query_log ON; SET GLOBAL long_query_time 1; SET GLOBAL slow_query_log_file /var/log/mysql/slow.log;逻辑说明超过long_query_time秒的查询会被记录。分析日志用mysqldumpslow或者pt-query-digest。定位到慢 SQL 后用EXPLAIN看执行计划重点看type是不是ALL全表扫描、rows扫描行数是不是过大、key有没有用上索引。参数说明long_query_time生产环境一般设 1 秒压测阶段可以设 0.1 秒抓得更细。慢查询日志本身有 IO 开销量大的库注意日志轮转。5.4 一个容易忽略的点连接池和进程数如果服务用 PM2 或者 cluster 起了多个 Node 进程每个进程都有自己的连接池。4 个进程、每个池 10 条连接就是 40 条。MySQL 的max_connections默认 151看着够但加上其他服务就紧张了。所以connectionLimit要按「总连接数 进程数 × 单池上限」来算别只盯着单个进程。5.5 验证方案是否值得投入判断这套方案值不值得做看三点。第一数据量。几千条数据、单机内部工具Node 直连完全够上 ORM 反而累赘。第二并发量。QPS 上百、多实例部署就要认真配连接池、加缓存、考虑读写分离。第三安全要求。只要涉及用户数据浏览器侧就必须走后端接口加鉴权没有捷径。这三点想清楚方案选型就不会跑偏。我自己的习惯是任何新项目先把连接池和时区这两个参数写死在配置模板里后面不管谁来接手都不会在这两个地方翻车。数据库连接这种事出问题往往不是不会写而是某个参数忘了配然后花半天排查一个本可以避免的错。希望帮到你。本文还有配套的精品资源点击获取