Cassandra React 数据库管理界面

这是一个基于 React 和 Node.js 的 Cassandra 数据库管理界面，可以连接到 Cassandra 数据库并执行 CQL 查询。

功能特性

🔗 连接到 Cassandra 数据库
📊 执行 CQL 查询并显示结果
📋 表格形式展示查询结果
🎯 预设常用查询语句
💡 实时连接状态显示
🎨 现代化的用户界面

技术栈

前端

React 18
Ant Design (UI 组件库)
Axios (HTTP 客户端)

后端

Node.js
Express.js
Cassandra Driver for Node.js

安装和运行

前提条件

Node.js (版本 14 或更高)
npm 或 yarn
可访问的 Cassandra 数据库

安装步骤

安装前端依赖
```
npm install
```

安装后端依赖

# 复制后端 package.json
cp server-package.json package-server.json

# 安装后端依赖
npm install --prefix ./server express body-parser cassandra-driver cors

配置数据库连接

在 server.js 文件中修改 Cassandra 连接配置：

const cassandraConfig = {
  contactPoints: ['11.11.11.11'],  // 你的 Cassandra 主机
  localDataCenter: 'datacenter1',     // 数据中心名称
  port: 11,                        // 端口
  credentials: {
    username: '11',            // 用户名
    password: '11'             // 密码
  }
};

运行应用

启动后端服务器
```
node server.js
```
后端服务器将在 http://localhost:3001 运行
启动前端开发服务器
```
npm start
```
前端应用将在 http://localhost:3000 运行

生产环境部署

构建前端应用
```
npm run build
```
启动生产服务器
```
node server.js
```
应用将在 http://localhost:3001 运行（包含前后端）

使用说明

基本操作

检查连接状态
- 应用启动后会自动检查与 Cassandra 的连接状态
- 绿色指示器表示已连接，红色表示未连接
执行查询
- 在查询输入框中输入 CQL 语句
- 点击"执行查询"按钮
- 查询结果将在下方表格中显示
使用预设查询
- 点击预设查询按钮快速填入常用查询
- 包括系统信息、键空间列表、集群信息等

示例查询

-- 查看系统信息
SELECT * FROM system.local;

-- 查看所有键空间
SELECT keyspace_name FROM system_schema.keyspaces;

-- 查看集群节点
SELECT * FROM system.peers;

-- 查看特定键空间的表
SELECT table_name FROM system_schema.tables WHERE keyspace_name = 'system';

项目结构

├── public/
│   └── index.html          # HTML 模板
├── src/
│   ├── App.js              # 主应用组件
│   ├── index.js            # React 入口文件
│   └── index.css           # 样式文件
├── server.js               # 后端服务器
├── package.json            # 前端依赖
├── server-package.json     # 后端依赖
└── README.md               # 项目说明

API 接口

GET /api/connection-status

获取数据库连接状态

POST /api/execute-query

执行 CQL 查询

{
  "query": "SELECT * FROM system.local;"
}

GET /api/keyspaces

获取所有键空间列表

GET /api/tables/:keyspace

获取指定键空间的表列表

故障排除

常见问题

连接失败
- 检查 Cassandra 服务是否运行
- 验证主机地址和端口是否正确
- 确认用户名和密码是否正确
- 检查网络连接和防火墙设置
查询失败
- 检查 CQL 语法是否正确
- 确认表和键空间是否存在
- 验证用户权限
前端无法连接后端
- 确认后端服务器正在运行
- 检查端口 3001 是否被占用
- 验证代理配置是否正确

许可证

MIT License

后端（Node.js + Express）

npx express-generator backend --no-view
cd backend
npm install
npm install cors mongoose

前端（React）

npx create-react-app frontend
cd frontend
npm install antd react-quill axios

后端基础代码

2.1 启用 CORS 并准备API

编辑 backend/app.js：

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

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

// 示例API
app.get('/api/chapters', (req, res) => {
  res.json([
    { id: 1, title: '第一章', children: [{ id: 2, title: '第一节' }] },
    { id: 3, title: '第二章', children: [] }
  ]);
});

app.post('/api/content', (req, res) => {
  // 保存内容到数据库（此处为示例）
  res.json({ success: true });
});

app.get('/api/stats', (req, res) => {
  // 返回统计信息
  res.json({ words: 4460, chars: 4511, time: '00:59:15' });
});

module.exports = app;

webVueBlog/Cassandra