guaiwoluo2020
51b2f30748
- 新增 Vue 3 + Vuetify 前端界面 - 新增市场分析模块 (market/) - 更新主服务器和路由 - 更新 MT5 EA 文件 - 添加 .gitignore 排除临时文件
268 lines
6.7 KiB
Markdown
268 lines
6.7 KiB
Markdown
# 前端界面集成指南
|
||
|
||
## 🎉 完成！前端界面已成功集成
|
||
|
||
你的量化交易服务现在同时拥有了**高性能后端**和**现代化前端界面**！
|
||
|
||
## 📋 项目概览
|
||
|
||
### 后端服务 (Python FastAPI)
|
||
- **端口**: 8000
|
||
- **状态**: ✅ 运行中
|
||
- **功能**: 交易指令管理、价格过滤、统计数据收集
|
||
|
||
### 前端界面 (React)
|
||
- **端口**: 3000
|
||
- **状态**: ✅ 运行中
|
||
- **功能**: 仪表板、交易管理、数据可视化、服务监控
|
||
|
||
## 🚀 快速启动
|
||
|
||
### 完整系统启动 (推荐)
|
||
|
||
**方式1: 脚本启动**
|
||
```bash
|
||
# 终端1: 启动后端
|
||
python main.py
|
||
|
||
# 终端2: 启动前端
|
||
./start_frontend.sh
|
||
```
|
||
|
||
**方式2: 手动启动**
|
||
```bash
|
||
# 终端1: 启动后端
|
||
python main.py
|
||
|
||
# 终端2: 启动前端
|
||
cd frontend && npm start
|
||
```
|
||
|
||
### 验证启动成功
|
||
|
||
```bash
|
||
# 检查后端
|
||
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**
|
||
|
||
### 发送交易指令
|
||
1. 点击顶部导航栏的 **"交易指令"**
|
||
2. 填写交易表单:
|
||
- **交易品种**: GOLD, EURUSD 等
|
||
- **买卖方向**: 买入/卖出
|
||
- **手数**: 交易量
|
||
- **执行价格**: 指令价格 (用于价格过滤)
|
||
- **止损/止盈**: 可选 (自动填充默认值)
|
||
3. 点击 **"发送交易指令"**
|
||
|
||
### 查看统计数据
|
||
1. 点击 **"统计数据"**
|
||
2. 查看历史统计表格
|
||
3. 查看价格趋势图表
|
||
4. 调整显示条数 (最多10条)
|
||
|
||
### 监控服务状态
|
||
1. 点击 **"服务状态"**
|
||
2. 查看实时服务指标
|
||
3. 页面会自动每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**
|
||
|
||
## 🛠️ 开发和部署
|
||
|
||
### 开发环境
|
||
```bash
|
||
# 后端开发
|
||
python main.py # 支持热重载
|
||
|
||
# 前端开发
|
||
cd frontend && npm start # 支持热重载
|
||
```
|
||
|
||
### 生产部署
|
||
```bash
|
||
# 后端
|
||
pip install -r requirements.txt
|
||
python main.py
|
||
|
||
# 前端
|
||
cd frontend
|
||
npm run build
|
||
# 将 build 目录部署到 Web 服务器
|
||
```
|
||
|
||
### Docker 部署
|
||
```bash
|
||
# 后端
|
||
docker build -t trading-backend .
|
||
docker run -p 8000:8000 trading-backend
|
||
|
||
# 前端
|
||
cd frontend
|
||
npm run build
|
||
# 使用 nginx 或其他 Web 服务器部署 build 目录
|
||
```
|
||
|
||
## 🔍 故障排除
|
||
|
||
### 常见问题
|
||
|
||
**Q: 前端无法连接后端**
|
||
```bash
|
||
# 检查后端是否运行
|
||
curl http://localhost:8000/health
|
||
|
||
# 检查前端代理配置
|
||
# frontend/package.json 中 proxy 应为 "http://localhost:8000"
|
||
```
|
||
|
||
**Q: 页面显示空白**
|
||
```bash
|
||
# 检查浏览器控制台错误
|
||
# 确认 Node.js 和 npm 版本
|
||
node --version && npm --version
|
||
```
|
||
|
||
**Q: API 请求失败**
|
||
```bash
|
||
# 检查 CORS 配置
|
||
# 后端已配置允许所有源
|
||
```
|
||
|
||
**Q: MT5 EA 无法连接**
|
||
```bash
|
||
# 确保 EA 启用 WebRequest
|
||
# 在 MT5 中: 工具 → 选项 → EA交易 → 勾选 WebRequest
|
||
```
|
||
|
||
### 日志查看
|
||
```bash
|
||
# 后端日志 (控制台输出)
|
||
python main.py
|
||
|
||
# 前端日志 (浏览器开发者工具)
|
||
# F12 → Console 标签
|
||
```
|
||
|
||
## 📈 性能优化
|
||
|
||
- **后端**: FastAPI + uvloop 高性能异步处理
|
||
- **前端**: React 虚拟DOM + Material-UI 优化渲染
|
||
- **网络**: HTTP/2 支持，压缩传输
|
||
- **缓存**: 浏览器缓存静态资源
|
||
|
||
## 🎯 下一步扩展
|
||
|
||
### 短期计划
|
||
- [ ] 添加用户认证和权限管理
|
||
- [ ] 实现实时 WebSocket 推送
|
||
- [ ] 添加更多图表类型和指标
|
||
|
||
### 长期计划
|
||
- [ ] 移动端适配优化
|
||
- [ ] 多语言支持 (i18n)
|
||
- [ ] 主题切换 (暗色模式)
|
||
- [ ] 高级数据分析功能
|
||
|
||
## 📞 支持
|
||
|
||
如果遇到问题，请检查:
|
||
1. 浏览器开发者工具的错误信息
|
||
2. 终端的日志输出
|
||
3. API 文档的接口说明
|
||
|
||
## 📝 更新日志
|
||
|
||
### v1.0.0 (2026-03-05)
|
||
- ✅ 完成前后端集成
|
||
- ✅ 实现完整的交易指令管理
|
||
- ✅ 添加价格验证规则
|
||
- ✅ 集成数据可视化图表
|
||
- ✅ 实现实时状态监控
|
||
|
||
---
|
||
|
||
**恭喜！你的量化交易系统现在拥有了完整的现代化界面！**
|
||
|
||
🌟 **访问地址**: http://localhost:3000
|
||
📚 **API 文档**: http://localhost:8000/docs |