8.9 KiB
8.9 KiB
🎨 Vue.js前端界面文档
📋 模块概述
frontend 是农业股票数据分析系统的前端用户界面模块，基于Vue.js 3.3.0构建，提供现代化的响应式Web界面，支持实时数据展示、交互式图表、股票分析和市场监控功能。
🏗️ 技术架构
核心技术栈
- Vue 3.3.0 - 渐进式JavaScript框架
- Vue Router 4.2.0 - 官方路由管理器
- Vuex 4.0.2 - 状态管理模式
- Element Plus 2.3.0 - Vue 3组件库
- ECharts 5.4.0 - 数据可视化图表库
- Axios 1.4.0 - HTTP客户端
- Vite 4.3.0 - 构建工具
- SASS 1.62.0 - CSS预处理器
- WebSocket - 实时数据通信
系统架构图
┌─────────────────────────────────────────────────────────────┐
│ Vue.js 前端应用 │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────┐ │
│ │ 视图层 │ │ 状态管理 │ │ 路由管理 │ │
│ │ Views │ │ Vuex │ │ Vue Router │ │
│ │ │ │ │ │ │ │
│ │ • 仪表板页面 │ │ • 股票数据状态 │ │ • 路由配置 │ │
│ │ • 市场分析页面 │ │ • 用户界面状态 │ │ • 导航守卫 │ │
│ │ • 股票详情页面 │ │ • 异步操作 │ │ • 懒加载 │ │
│ │ • 数据管理页面 │ │ • 缓存管理 │ │ • 嵌套路由 │ │
│ └─────────────────┘ └─────────────────┘ └─────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────┐ │
│ │ 组件层 │ │ 服务层 │ │ 工具层 │ │
│ │ Components │ │ Services │ │ Utils │ │
│ │ │ │ │ │ │ │
│ │ • 图表组件 │ │ • API接口 │ │ • 工具函数 │ │
│ │ • 表格组件 │ │ • WebSocket │ │ • 常量定义 │ │
│ │ • 搜索组件 │ │ • 数据处理 │ │ • 格式化 │ │
│ │ • 排行榜组件 │ │ • 错误处理 │ │ • 验证器 │ │
│ └─────────────────┘ └─────────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────┘
📁 项目结构
frontend/
├── public/
│ ├── index.html # 入口HTML文件
│ └── favicon.ico # 网站图标
├── src/
│ ├── main.js # 应用入口文件
│ ├── App.vue # 根组件
│ ├── views/ # 页面视图
│ │ ├── Dashboard.vue # 仪表板页面
│ │ ├── MarketAnalysis.vue # 市场分析页面
│ │ ├── StockDetail.vue # 股票详情页面
│ │ ├── StockSearch.vue # 股票搜索页面
│ │ ├── Rankings.vue # 排行榜页面
│ │ ├── DataManagement.vue # 数据管理页面
│ │ └── HealthCheck.vue # 健康检查页面
│ ├── components/ # 可复用组件
│ │ └── MarketOverview.vue # 市场总览组件
│ ├── router/ # 路由配置
│ │ └── index.js # 路由定义
│ ├── store/ # 状态管理
│ │ ├── index.js # Vuex store
│ │ └── modules/ # 模块化store
│ ├── api/ # API接口
│ │ ├── stock.js # 股票数据API
│ │ └── market.js # 市场分析API
│ ├── utils/ # 工具函数
│ │ ├── request.js # HTTP请求封装
│ │ ├── format.js # 数据格式化
│ │ └── constants.js # 常量定义
│ └── styles/ # 样式文件
│ ├── main.scss # 主样式文件
│ └── variables.scss # 样式变量
├── package.json # 项目依赖配置
├── vite.config.js # Vite构建配置
└── .eslintrc.js # ESLint配置
🔧 核心功能模块
1. 仪表板页面 (Dashboard.vue)
功能描述： 系统主页面，提供股票市场的整体概览和关键指标展示。
主要功能：
- 实时市场数据展示
- 涨跌分布统计图表
- 成交量趋势分析
- 热门股票快速入口
- 市场新闻资讯展示
2. 市场分析页面 (MarketAnalysis.vue)
功能描述： 提供深度的市场分析功能，包括技术指标、趋势分析和预测模型。
主要功能：
- K线图表展示
- 技术指标分析（MA、RSI、MACD）
- 市场热力图
- 行业对比分析
- 历史数据回测
3. 股票详情页面 (StockDetail.vue)
功能描述： 展示单个股票的详细信息，包括实时价格、历史走势和基本面分析。
主要功能：
- 实时价格展示
- 历史价格走势图
- 成交量分析
- 基本面数据（PE、PB、市值等）
- 相关新闻和公告
4. 股票搜索页面 (StockSearch.vue)
功能描述： 提供智能的股票搜索功能，支持多种搜索条件和筛选器。
主要功能：
- 关键词搜索（股票代码、名称）
- 高级筛选（价格区间、市值、行业）
- 搜索结果排序
- 收藏夹功能
- 搜索历史记录
5. 排行榜页面 (Rankings.vue)
功能描述： 展示各类股票排行榜，帮助用户快速发现市场热点。
主要功能：
- 涨幅排行榜
- 跌幅排行榜
- 成交量排行榜
- 市值排行榜
- 换手率排行榜
6. 数据管理页面 (DataManagement.vue)
功能描述： 为管理员提供数据管理功能，包括数据导入、导出和系统监控。
主要功能：
- 股票数据批量导入
- 历史数据导出
- 数据同步状态监控
- 系统健康检查
- 错误日志查看
🚀 部署与运行
1. 开发环境
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 代码检查
npm run lint
# 代码格式化
npm run format
2. 生产构建
# 构建生产版本
npm run build
# 预览构建结果
npm run preview
3. Docker部署
Dockerfile:
# 构建阶段
FROM node:16-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
# 生产阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
nginx.conf:
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location /ws {
proxy_pass http://backend:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
📄 许可证
本模块采用 MIT 许可证，详见项目根目录 LICENSE 文件。
联系信息:
- 项目仓库: Agricultural Stock Platform
- 技术支持: support@agricultural-stock.com
- 开发团队: Agricultural Stock Platform Team