开源项目guonl-mysql-web-studio · 纯前端 · 双形态Web / Chrome 插件 · 一条命令启动一、当下的现状我们查个数据到底有多麻烦先问几个扎心的问题你有没有只是想看一眼线上某张表的数据却要在跳板机上折腾半天 SSH 隧道你有没有遇到过公司安全策略禁止在办公电脑安装任何软件而手里正好没有 Web 化的数据库工具你有没有被 Navicat 的付费弹窗、DBeaver 的JVM 启动进度条、DataGrip 的几个 G 内存占用劝退过你有没有在别人的电脑 / 临时环境 / 客户现场急着想执行一条 SQL却发现什么工具都没有这就是大多数开发者和 DBA 的日常现状。市面上的工具大致分三类各有各的痛工具类型代表痛点桌面客户端Navicat / DataGrip / DBeaver体积大、要安装、收费或吃内存、内网机器装不了传统 Web 工具phpMyAdmin / Adminer需要部署 PHP 环境、界面停留在十年前、体验粗糙云厂商控制台各云 DMS绑定自家云、要开权限审批、临时库不方便接入核心矛盾是查数据是一个高频、轻量、临时的动作但现有工具全都是重量级的——要么重装一套环境要么走一遍审批流程。工具的重量和任务的重量严重不匹配。二、为什么我创造了这个产品我想要的其实很简单打开一个浏览器标签页输入连接信息就能像桌面客户端一样浏览库表、写 SQL、导数据。关掉标签页不留痕迹。但这里有一个绕不开的技术问题浏览器的安全模型不允许网页直接发起 TCP 连接。WebSocket它跑在 HTTP 升级之上MySQL 协议并不认。这意味着纯浏览器直连 MySQL在物理上就是不存在的任何号称纯前端的数据库客户端背后都必然有一个代理层。市面上常见做法是让你独立部署一个后端服务比如 CloudBeaver部署成本又把轻量这个初衷杀死了。于是我做了一个设计取舍——把代理层做到最小、最透明它不是独立服务而是内嵌在 Vite dev server 里的一个 WebSocket 桥接器基于 Node 生态最成熟的mysql2驱动协议被压缩到极致只有3 个 opconnect/query/close启动方式只有一条命令npm run dev桥接器随 dev server 自动拉起零配置。Vite Dev Server浏览器纯前端ws://host/__mysql_bridge{ id, op, args }mysql2 (TCP 3306)React UI(Zustand CodeMirror)WsAdapterWS JSON 协议客户端WebSocket 桥接器MySQL5.x / 8.x这就是MySQL Web Studio的由来一个把代理层压缩到极限、把客户端体验对标桌面软件的纯前端 MySQL 客户端。三、它有什么优点1. 双形态Web 开箱即用也能装进 ChromeWeb 模式npm run dev一条命令打开浏览器就能用Chrome 插件模式MV3npm run build:ext打包后加载进 Chrome从此数据库工具就在你的浏览器工具栏里点图标即开数据存chrome.storage.local。插件形态的意义在于浏览器是唯一一个企业电脑普遍允许安装的软件。装不了 Navicat 的机器几乎都能装 Chrome 扩展。2. 体验对标桌面客户端不是玩具这不是一个能跑 SQL 就行的 demo常用功能全部到位连接管理多连接、自定义命名、可选记住密码库表浏览连接 → Schema → 表/视图 三级树表名/注释过滤Schema 手风琴式交互过滤只作用于当前展开的库不会被同名表干扰行数估算、引擎类型一目了然右键菜单复制名称、查看 DDL弹窗大小可拖拽调节、查看最近 10 条记录、前 100 行、导出SQL 编辑CodeMirror 6语法高亮 智能补全连字段 COMMENT 都能补全提示、多查询标签页、运行选中语句、一键格式化结果面板表头显示字段名、类型、主键徽标和COMMENT 描述长字段JSON/TEXT自动截断 100 字符悬停看全值不再被超宽字段毁掉整个表格结果区高度可拖拽SQL 脚本 执行历史本地持久化随时回填重跑导出DDL / INSERT 语句支持DROP TABLE、IF NOT EXISTS、INSERT IGNORE、SQL 预览、CSV 导出暗 / 亮双主题界面细节全部打磨过。3. 隐私优先数据只在你本机连接配置、SQL 脚本、执行历史全部保存在本机Web 模式localStorage插件模式chrome.storage.local不经过任何第三方服务器桥接器就跑在你自己的机器上MySQL 流量不出你的内网。对于安全敏感的企业环境这一点比任何功能都重要。4. 架构极简二次开发友好前端 React 18 TypeScriptstrict Zustand 4 CodeMirror 6代码结构清晰adapters/协议适配、components/UI、core/状态与存储。桥接器核心抽离在bridge/bridge-core.mjsWeb 模式和插件模式两个入口共用。想改成 PostgreSQL只要桥接器换驱动、协议加个 op 的事。5. 内置演示库30 秒上手不配置任何 MySQL项目内置了一个 demo 数据库示例电商库shop打开页面自动连接。你可以先体验再决定要不要接入真实库。四、如何使用方式一Web 模式推荐先体验这个环境要求Node.js ≥ 18gitclone https://github.com/guonl/guonl-mysql-web-studio.gitcdguonl-mysql-web-studionpminstallnpmrun dev打开 http://localhost:5188会自动连上内置演示库。点击左上角「 新建连接」填入你的 MySQL 主机、端口、用户名、密码开始使用。桥接器内嵌在 dev server 里无需任何额外配置。方式二Chrome 插件模式npmrun build:ext# 构建插件产物到 dist/npmrun bridge# 另开终端启动独立桥接器默认端口 5189然后Chrome 打开chrome://extensions→ 开启「开发者模式」→「加载已解压的扩展程序」→ 选择dist/目录。之后点击工具栏图标即可随时唤起。三分钟上手路线连库新建连接或直接玩内置 demo 库浏览左侧树展开 Schema右键任意表看 DDL / 预览数据写 SQL新建查询标签页试试表名补全和字段 COMMENT 提示导出右键表 → 导出 SQL勾选选项后预览或直接下载沉淀常用 SQL 存为脚本执行历史自动帮你记着。五、必须说清楚的安全边界作为一款工程工具我把丑话写在前面本项目定位为本地 / 内网开发工具不要把 dev server 或桥接端口暴露到公网桥接器无鉴权勾选「记住密码」后密码明文存在本机存储中介意可不勾选仅会话内有效构建产物是纯静态前端部署到 Web 或打包插件后均需自行运行桥接器npm run bridge公网场景请自行加鉴权并使用wss://。工具的边界坦诚标注才能放心使用。六、写在最后MySQL Web Studio 不是要取代 Navicat 或 DataGrip——重度数据库作业ER 图设计、数据同步、备份恢复它们依然是王者。它瞄准的是那个被忽略的大多数场景临时查个数、写个验证 SQL、看看表结构、导一份小数据。这些场景下你要的不是一个几个 G 的软件而是一个浏览器标签页。项目完全开源欢迎 Star、提 Issue、提 PR源码地址https://github.com/guonl/guonl-mysql-web-studiohttps://gitee.com/983220871/guonl-mysql-web-studio技术栈React 18 / TypeScript / Zustand 4 / CodeMirror 6 / Vite 5 / mysql2更多文档使用手册 · 架构说明如果它帮你省掉了一次装软件的折腾、一次审批的等待欢迎把它转发给你的同事——这就是对我最好的支持。产品截图