Files

T

guaiwoluo2020 51b2f30748 feat: 添加前端界面和市场分析模块

- 新增 Vue 3 + Vuetify 前端界面
- 新增市场分析模块 (market/)
- 更新主服务器和路由
- 更新 MT5 EA 文件
- 添加 .gitignore 排除临时文件

2026-03-10 17:38:13 +08:00

6.7 KiB

Raw Permalink Blame History

前端界面集成指南

🎉 完成！前端界面已成功集成

你的量化交易服务现在同时拥有了高性能后端和现代化前端界面！

📋 项目概览

后端服务 (Python FastAPI)

端口: 8000
状态: ✅ 运行中
功能: 交易指令管理、价格过滤、统计数据收集

前端界面 (React)

端口: 3000
状态: ✅ 运行中
功能: 仪表板、交易管理、数据可视化、服务监控

🚀 快速启动

完整系统启动 (推荐)

方式1: 脚本启动

# 终端1: 启动后端
python main.py

# 终端2: 启动前端
./start_frontend.sh

方式2: 手动启动

# 终端1: 启动后端
python main.py

# 终端2: 启动前端
cd frontend && npm start

验证启动成功

# 检查后端
curl http://localhost:8000/health
# 应该返回: {"status":"ok"}

# 检查前端
curl -I http://localhost:3000
# 应该返回: HTTP/1.1 200 OK

🎯 主要功能

1. 仪表板 (Dashboard)

📊 实时服务状态监控
📈 关键指标展示 (待执行指令、统计记录、活跃品种)
🔄 自动刷新数据

2. 交易指令管理 (Trade Orders)

➕ 发送新的交易指令
✅ 智能价格验证: 自动检查买入/卖出指令的价格合理性
📋 查看所有待执行指令
🗑️ 批量清空指令

3. 统计数据分析 (Statistics)

📊 历史数据表格展示
📈 价格和账户趋势图表
📋 汇总统计指标

4. 服务状态监控 (Status)

❤️ 健康检查状态
📊 详细的服务指标
🔄 实时自动刷新 (每5秒)

🔧 技术架构

┌─────────────────┐    HTTP/JSON    ┌─────────────────┐
│   React前端      │◄──────────────►│  FastAPI后端     │
│   (localhost:3000)│                │ (localhost:8000) │
│                  │                │                  │
│ • Material-UI   │                │ • 交易指令管理    │
│ • Axios         │                │ • 价格过滤逻辑    │
│ • Recharts      │                │ • 统计数据收集    │
│ • 响应式设计    │                │ • RESTful API    │
└─────────────────┘                └─────────────────┘
                                      │
                                      ▼
                               ┌─────────────────┐
                               │   MT5 EA        │
                               │   (MetaTrader)  │
                               │                 │
                               │ • TICK处理      │
                               │ • 订单执行      │
                               │ • 风险管理      │
                               └─────────────────┘

📱 使用指南

访问界面

打开浏览器访问: http://localhost:3000

发送交易指令

点击顶部导航栏的 "交易指令"
填写交易表单:
- 交易品种: GOLD, EURUSD 等
- 买卖方向: 买入/卖出
- 手数: 交易量
- 执行价格: 指令价格 (用于价格过滤)
- 止损/止盈: 可选 (自动填充默认值)
点击 "发送交易指令"

查看统计数据

点击 "统计数据"
查看历史统计表格
查看价格趋势图表
调整显示条数 (最多10条)

监控服务状态

点击 "服务状态"
查看实时服务指标
页面会自动每5秒刷新

🔒 安全特性

价格验证规则

买入指令: 必须满足 sl < price < tp
卖出指令: 必须满足 tp < price < sl
自动拒绝: 不符合规则的指令会被服务器拒绝

数据验证

后端使用 Pydantic 进行数据验证
前端进行表单验证和错误处理
API 请求包含错误处理和重试机制

📊 API 接口

主要端点

GET /health - 健康检查
GET /status - 服务状态
POST /send_trade_instructions - 发送交易指令
GET /query_pending_trades - 查询待执行指令
GET /query_statistics - 查询统计数据
DELETE /clear_trades - 清空指令

API 文档

访问: http://localhost:8000/docs

🛠️ 开发和部署

开发环境

# 后端开发
python main.py  # 支持热重载

# 前端开发
cd frontend && npm start  # 支持热重载

生产部署

# 后端
pip install -r requirements.txt
python main.py

# 前端
cd frontend
npm run build
# 将 build 目录部署到 Web 服务器

Docker 部署

# 后端
docker build -t trading-backend .
docker run -p 8000:8000 trading-backend

# 前端
cd frontend
npm run build
# 使用 nginx 或其他 Web 服务器部署 build 目录

🔍 故障排除

常见问题

Q: 前端无法连接后端

# 检查后端是否运行
curl http://localhost:8000/health

# 检查前端代理配置
# frontend/package.json 中 proxy 应为 "http://localhost:8000"

Q: 页面显示空白

# 检查浏览器控制台错误
# 确认 Node.js 和 npm 版本
node --version && npm --version

Q: API 请求失败

# 检查 CORS 配置
# 后端已配置允许所有源

Q: MT5 EA 无法连接

# 确保 EA 启用 WebRequest
# 在 MT5 中: 工具 → 选项 → EA交易 → 勾选 WebRequest

日志查看

# 后端日志 (控制台输出)
python main.py

# 前端日志 (浏览器开发者工具)
# F12 → Console 标签

📈 性能优化

后端: FastAPI + uvloop 高性能异步处理
前端: React 虚拟DOM + Material-UI 优化渲染
网络: HTTP/2 支持，压缩传输
缓存: 浏览器缓存静态资源

🎯 下一步扩展

短期计划

添加用户认证和权限管理
实现实时 WebSocket 推送
添加更多图表类型和指标

长期计划

移动端适配优化
多语言支持 (i18n)
主题切换 (暗色模式)
高级数据分析功能

📞 支持

如果遇到问题，请检查:

浏览器开发者工具的错误信息
终端的日志输出
API 文档的接口说明

📝 更新日志

v1.0.0 (2026-03-05)

✅ 完成前后端集成
✅ 实现完整的交易指令管理
✅ 添加价格验证规则
✅ 集成数据可视化图表
✅ 实现实时状态监控

恭喜！你的量化交易系统现在拥有了完整的现代化界面！

🌟 访问地址: http://localhost:3000 📚 API 文档: http://localhost:8000/docs

6.7 KiB Raw Permalink Blame History Unescape Escape