数据库查询工具

项目背景

本项目是一个现代化的数据库查询和管理工具，旨在提供一个直观、高效的界面来进行数据库操作、关系管理和数据可视化。项目采用最新的前端技术栈，为用户提供流畅的操作体验和丰富的功能特性。

技术架构

• 前端框架：Vue 3
• UI组件库：Element Plus
• 构建工具：Vite
• 路由管理：Vue Router
• 数据可视化：Mermaid.js
• JSON美化：Vue-Json-Pretty
• HTTP客户端：Axios

功能模块

1. 数据库查询

• 支持多种数据库类型的查询操作
• 提供SQL编辑器界面
• 实时展示查询结果
• 支持查询历史记录

2. 数据源管理

• 支持添加、编辑、删除数据源
• 管理多个数据库连接
• 配置数据源连接参数
• 测试数据源连接

3. 表关系管理

• 可视化展示表之间的关系
• 支持手动建立和编辑表关系
• 保存和加载表关系配置

4. ER图展示

• 使用Mermaid.js生成ER图
• 直观展示数据库表结构
• 支持导出ER图

5. JSON格式化

• JSON数据的格式化展示
• 支持JSON的折叠/展开
• 提供美化的JSON视图

使用说明

环境要求

• Node.js 16+
• npm 7+

安装步骤

1. 克隆项目代码

git clone [项目地址]

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

4. 构建生产版本

npm run build

配置说明

1. 后端API配置 在vite.config.js中配置后端服务地址：

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path
    }
  }
}

使用流程

1. 数据源配置

   • 进入「数据源管理」页面
   • 点击「添加数据源」
   • 填写数据库连接信息
   • 测试并保存连接

2. 数据库查询

   • 进入「数据库查询」页面
   • 选择已配置的数据源
   • 编写SQL查询语句
   • 执行查询并查看结果

3. 表关系管理

   • 进入「表关系管理」页面
   • 选择需要建立关系的表
   • 配置表之间的关联关系
   • 保存关系配置

4. 查看ER图

   • 进入「ER图展示」页面
   • 选择数据源
   • 查看自动生成的ER图
   • 可选择导出ER图

5. JSON格式化

   • 进入「JSON格式化」页面
   • 输入或粘贴JSON文本
   • 查看格式化后的JSON

注意事项

1. 确保后端服务正常运行并配置正确的API地址
2. 数据库连接信息需要正确配置，包括主机地址、端口、用户名和密码
3. 大量数据查询时注意性能影响
4. 定期备份重要的数据源和表关系配置