project/Src/command_center/web-command-center/test

无人机指挥控制中心 Web 系统

这是一个基于Web的无人机指挥控制中心系统，采用前后端分离架构，使用高德地图API实现实时地图展示。

技术栈

前端

• Vue.js 3
• Element Plus
• 高德地图 JavaScript API
• Socket.IO Client

后端

• Node.js
• Express
• MySQL
• Socket.IO

系统要求

• Node.js >= 14.0.0
• MySQL >= 5.7
• 现代浏览器（Chrome, Firefox, Safari, Edge）

安装步骤

1. 克隆项目

git clone [项目地址]
cd web-command-center

2. 安装后端依赖

cd backend
npm install

3. 安装前端依赖

cd ../frontend
npm install

4. 配置环境变量

• 在backend目录下创建.env文件：

DB_HOST=localhost
DB_USER=your_username
DB_PASSWORD=your_password
DB_NAME=command_center
JWT_SECRET=your_jwt_secret
PORT=3000

• 在frontend目录下创建.env文件：

VUE_APP_API_URL=http://localhost:3000
VUE_APP_AMAP_KEY=your_amap_key

5. 初始化数据库

cd backend
mysql -u your_username -p < src/config/init.sql

6. 启动服务

# 启动后端服务
cd backend
npm run dev

# 启动前端服务
cd frontend
npm run serve

功能特性

• 实时地图展示
• 无人机状态监控
• 路径规划
• 用户认证和授权
• 实时数据更新
• 操作日志记录

目录结构

web-command-center/
├── frontend/                # 前端项目
│   ├── src/
│   │   ├── assets/         # 静态资源
│   │   ├── components/     # 组件
│   │   ├── views/          # 页面
│   │   ├── router/         # 路由配置
│   │   ├── store/          # Vuex状态管理
│   │   └── App.vue         # 根组件
│   └── package.json
│
├── backend/                 # 后端项目
│   ├── src/
│   │   ├── config/         # 配置文件
│   │   ├── routes/         # 路由处理
│   │   ├── middleware/     # 中间件
│   │   └── app.js          # 应用入口
│   └── package.json
│
└── README.md

开发指南

1. 前端开发

• 使用Vue.js 3的组合式API
• 使用Element Plus组件库
• 使用高德地图JavaScript API进行地图操作

2. 后端开发

• 遵循RESTful API设计规范
• 使用JWT进行身份认证
• 使用Socket.IO实现实时通信

部署

1. 构建前端

cd frontend
npm run build

2. 配置生产环境

• 设置适当的环境变量
• 配置数据库连接
• 配置高德地图API密钥

3. 启动生产服务

cd backend
npm start

安全注意事项

• 确保JWT密钥的安全性
• 定期更新依赖包
• 实施适当的访问控制
• 保护敏感配置信息

许可证

MIT License