MongoDB Dashboard

一个基于 Web 的 MongoDB 数据库管理工具，提供直观的图形界面来管理 MongoDB 连接、数据库、集合和文档。

✨ 功能特性

🔌 连接管理

• 创建连接：支持配置 MongoDB 连接信息（主机、端口、用户名、密码等）
• 连接测试：在保存前测试连接是否可用
• 编辑连接：修改已保存的连接配置
• 删除连接：移除不需要的连接配置
• 连接列表：统一管理多个 MongoDB 连接

🗄️ 数据库管理

• 查看数据库：浏览 MongoDB 实例中的所有数据库
• 创建数据库：创建新的数据库
• 重命名数据库：修改数据库名称（通过复制数据实现）
• 删除数据库：删除数据库及其所有数据
• 数据库统计：显示数据库大小和基本信息

📦 集合管理

• 查看集合：浏览数据库中的所有集合
• 创建集合：创建新的集合
• 重命名集合：修改集合名称
• 删除集合：删除集合及其所有文档
• 集合统计：显示集合的文档数量、大小、索引大小等信息

📄 文档管理

• 文档浏览：分页查看集合中的文档
• 文档编辑：通过 JSON 编辑器修改文档内容
• 文档删除：删除指定的文档
• 列设置：自定义显示哪些字段列
• 嵌套字段支持：自动识别和显示嵌套对象的字段

🔍 查询功能

• 自定义查询：支持多种 MongoDB 查询操作
  • find：查找多个文档（最多返回 100 条）
  • findOne：查找单个文档
  • count：统计符合条件的文档数量
  • aggregate：执行聚合管道查询
• 查询条件：使用 JSON 格式编写查询条件
• 查询结果：实时显示查询结果

🎨 界面特性

• 深色模式：支持深色/浅色主题切换
• 响应式设计：适配不同屏幕尺寸
• 面包屑导航：清晰的导航路径
• 现代化 UI：基于 Ant Design 的美观界面

🚀 快速开始

环境要求

• Node.js >= 18.0.0
• npm >= 9.0.0
• MongoDB 实例（本地或远程）

安装

# 克隆项目
git clone https://gitee.com/shy9120/mongo-dashboard.git
cd mongo-dashboard

# 安装依赖
npm install

开发模式

# 启动开发服务器（默认端口 7017）
npm run dev

# 或指定端口
npm run dev -- --port 8080

访问 http://localhost:7017 即可使用。

生产构建

# 构建生产版本
npm run build

# 启动生产服务器
npm start

# 或指定端口
npm start -- --port 8080

📖 使用手册

1. 创建 MongoDB 连接

1. 启动应用后，在首页点击 "新建连接" 按钮
2. 填写连接信息：
   • 连接名称：用于标识此连接的名称
   • 主机地址：MongoDB 服务器地址（如 localhost 或 192.168.1.100）
   • 端口：MongoDB 端口（默认 27017）
   • 用户名（可选）：MongoDB 用户名
   • 密码（可选）：MongoDB 密码
   • 数据库（可选）：默认连接的数据库
   • 认证源（可选）：认证数据库（默认 admin）
   • 连接字符串（可选）：完整的 MongoDB 连接字符串，如果填写则优先使用此字段
3. 点击 "测试连接" 验证连接是否可用
4. 点击 "保存" 保存连接配置

2. 管理数据库

1. 在连接列表中点击 "连接" 按钮进入数据库列表
2. 查看数据库：浏览所有数据库及其大小信息
3. 创建数据库：
   • 点击 "新建数据库" 按钮
   • 输入数据库名称（只能包含字母、数字、下划线和连字符）
   • 点击 "创建" 确认
4. 重命名数据库：
   • 将鼠标悬停在数据库卡片上
   • 点击右上角的编辑图标
   • 输入新名称并确认
   • ⚠️ 注意：重命名会复制所有数据到新数据库，然后删除旧数据库
5. 删除数据库：
   • 将鼠标悬停在数据库卡片上
   • 点击右上角的删除图标
   • 确认删除操作
   • ⚠️ 警告：删除操作不可恢复！

3. 管理集合

1. 在数据库列表中点击数据库卡片进入集合列表
2. 查看集合：浏览所有集合及其统计信息（文档数量、大小等）
3. 创建集合：
   • 点击 "新建集合" 按钮
   • 输入集合名称（不能以 system. 开头，不能包含 $ 字符）
   • 点击 "创建" 确认
4. 重命名集合：
   • 将鼠标悬停在集合卡片上
   • 点击右上角的编辑图标
   • 输入新名称并确认
5. 删除集合：
   • 将鼠标悬停在集合卡片上
   • 点击右上角的删除图标
   • 确认删除操作
   • ⚠️ 警告：删除操作不可恢复！

4. 查看和编辑文档

1. 在集合列表中点击集合卡片进入文档查看页面
2. 浏览文档：
   • 默认显示前 20 条文档
   • 使用 "上一页" 和 "下一页" 按钮翻页
   • 点击 "列设置" 按钮选择要显示的字段
3. 编辑文档：
   • 点击文档行的 "编辑" 按钮
   • 在 JSON 编辑器中修改文档内容
   • 点击 "更新" 保存更改
   • ⚠️ 注意：_id 字段不能被修改
4. 删除文档：
   • 点击文档行的 "删除" 按钮
   • 确认删除操作

5. 执行自定义查询

1. 在文档查看页面点击 "自定义查询" 按钮
2. 选择查询操作类型：
   • find：查找多个文档（最多返回 100 条）
   • findOne：查找单个文档
   • count：统计符合条件的文档数量
   • aggregate：执行聚合管道查询
3. 在查询条件输入框中输入 JSON 格式的查询条件，例如：

   {"name": "test"}

   或聚合查询（数组格式）：

   [{"$match": {"status": "active"}}, {"$group": {"_id": "$category", "count": {"$sum": 1}}}]

4. 点击 "执行查询" 查看结果
5. 点击 "清除查询" 返回默认文档列表

6. 切换主题

• 点击页面右上角的主题切换按钮在深色模式和浅色模式之间切换
• 主题偏好会自动保存

🔧 配置说明

连接字符串格式

如果使用连接字符串，格式如下：

mongodb://[username:password@]host[:port][/database][?options]

示例：

• mongodb://localhost:27017
• mongodb://admin:password@localhost:27017/mydb
• mongodb+srv://username:[email protected]/database

查询条件示例

简单查询

{"name": "test"}

范围查询

{"age": {"$gte": 18, "$lte": 65}}

正则查询

{"name": {"$regex": "test", "$options": "i"}}

数组查询

{"tags": {"$in": ["mongodb", "database"]}}

聚合查询

[
  {"$match": {"status": "active"}},
  {"$group": {"_id": "$category", "total": {"$sum": "$amount"}}},
  {"$sort": {"total": -1}}
]

⚠️ 注意事项

1. 数据安全：

   • 删除数据库、集合或文档的操作不可恢复，请谨慎操作
   • 建议在生产环境使用前先备份数据

2. 连接安全：

   • 连接信息存储在本地文件中（server/db/connection.json）
   • 请妥善保管此文件，避免泄露敏感信息

3. 性能考虑：

   • 自定义查询的 find 操作最多返回 100 条结果
   • 文档列表默认每页显示 20 条，可通过翻页查看更多

4. 系统集合：

   • 以 system. 开头的集合是 MongoDB 系统集合，不能重命名或删除

5. 保留数据库：

   • admin、local、config 是 MongoDB 保留的数据库名称，不能重命名或删除

🐛 常见问题

连接失败

• 检查 MongoDB 服务是否正在运行
• 检查主机地址和端口是否正确
• 检查防火墙设置是否允许连接
• 如果使用认证，检查用户名和密码是否正确

查询执行失败

• 检查 JSON 格式是否正确
• 检查查询条件是否符合 MongoDB 语法
• 检查是否有足够的权限执行该操作

文档编辑失败

• 检查 JSON 格式是否正确
• 确保 _id 字段没有被修改
• 检查是否有足够的权限更新文档

📝 更新日志

v0.1.0

• 初始版本发布
• 支持连接管理、数据库管理、集合管理、文档管理
• 支持自定义查询功能
• 支持深色模式

📄 许可证

MIT

👥 贡献

欢迎提交 Issue 和 Pull Request！

项目地址：https://gitee.com/shy9120/mongo-dashboard

📚 相关文档

• 开发手册 - 详细的开发规范和指南
• MongoDB 官方文档
• Ant Design 文档