实施计划

1. 初始化项目结构
- 创建后端.NET 9.0解决方案，包含API、Core、Infrastructure和Application四个项目层
- 创建前端Vite+Vue 3项目，配置路由、状态管理和UI组件库
- 配置MySQL数据库连接和Entity Framework Core
- 设置开发环境配置文件（appsettings.json和.env）
- 需求: 1.1, 6.1
2. 实现数据库层和核心实体
- 2.1 创建实体类和DbContext
  - 实现Category、Product、PerformanceScore、Specification、DataSource和RankingHistory实体类
  - 配置AppDbContext和实体关系映射
  - 配置数据库索引（Name, Model, CategoryId, PerformanceScore字段）
  - 需求: 7.1, 7.2
- 2.2 创建和执行数据库迁移
  - 生成初始数据库迁移文件
  - 执行迁移创建数据库表结构
  - 添加种子数据（初始产品类别：手机CPU、手机GPU、电脑CPU、电脑GPU）
  - 需求: 1.1, 1.2, 7.1
- 2.3 编写实体验证单元测试
  - 测试实体属性验证规则
  - 测试实体关系配置
  - 需求: 7.1
3. 实现Repository层数据访问
- 3.1 创建Repository接口和实现
  - 实现ICategoryRepository和CategoryRepository
  - 实现IProductRepository和ProductRepository，包含分页、搜索和筛选方法
  - 实现通用Repository基类
  - 需求: 2.2, 4.2, 7.2
- 3.2 实现产品查询方法
  - 实现按类别获取产品列表（支持分页和排序）
  - 实现产品搜索方法（按名称、型号、品牌）
  - 实现产品筛选方法（按性能分数区间、发布年份）
  - 需求: 2.1, 4.2, 4.3, 4.4
- 3.3 编写Repository层单元测试
  - 使用InMemory数据库测试CRUD操作
  - 测试查询和筛选逻辑
  - 需求: 7.2
4. 实现Service层业务逻辑
- 4.1 创建CategoryService
  - 实现获取所有类别方法
  - 实现获取单个类别详情方法
  - 使用AutoMapper配置DTO映射
  - 需求: 1.3, 1.4, 6.1
- 4.2 创建ProductService
  - 实现获取产品排名列表方法（支持分页、排序）
  - 实现获取产品详情方法（包含规格参数和性能分数）
  - 实现产品搜索方法
  - 实现产品筛选方法
  - 需求: 2.1, 2.2, 2.3, 2.4, 4.2, 4.3, 4.4
- 4.3 创建ComparisonService
  - 实现产品对比方法（接受2-4个产品ID）
  - 实现对比数据处理逻辑（标识最优和最差指标）
  - 生成对比矩阵数据结构
  - 需求: 5.1, 5.2, 5.3, 5.4
- 4.4 编写Service层单元测试
  - 测试业务逻辑正确性
  - 使用Mock测试Repository依赖
  - 需求: 2.1, 4.2, 5.1
5. 实现API Controllers
- 5.1 创建CategoriesController
  - 实现GET /api/categories端点
  - 实现GET /api/categories/{id}端点
  - 配置响应格式和状态码
  - 需求: 6.1, 6.6
- 5.2 创建ProductsController
  - 实现GET /api/products端点（支持查询参数：categoryId, page, pageSize, sortBy, order）
  - 实现GET /api/products/{id}端点
  - 实现GET /api/products/search端点（支持查询参数：q, categoryId, manufacturer, minScore, maxScore）
  - 配置FluentValidation验证查询参数
  - 需求: 2.1, 2.2, 2.3, 4.2, 4.4, 6.2, 6.3, 6.4, 6.6
- 5.3 创建ComparisonController
  - 实现POST /api/comparison端点
  - 验证请求体（productIds数组长度2-4）
  - 配置响应格式
  - 需求: 5.1, 5.2, 6.5, 6.6
- 5.4 配置全局异常处理中间件
  - 实现GlobalExceptionMiddleware
  - 处理ValidationException、NotFoundException和通用Exception
  - 返回标准化错误响应
  - 需求: 6.7
- 5.5 编写API集成测试
  - 使用WebApplicationFactory测试API端点
  - 测试各种查询参数组合
  - 测试错误处理
  - 需求: 6.1, 6.2, 6.3, 6.4, 6.5
6. 实现数据采集服务
- 6.1 创建DataCollectionService基础结构
  - 实现IDataCollectionService接口
  - 配置HttpClientFactory
  - 实现数据验证和转换逻辑
  - 需求: 3.1, 3.2, 3.3, 3.4
- 6.2 实现GeekBench数据采集
  - 实现CollectFromGeekBenchAsync方法
  - 解析GeekBench API响应或爬取排行榜页面
  - 提取CPU性能数据（Single-Core和Multi-Core分数）
  - 更新或插入Product和PerformanceScore数据
  - 需求: 3.1, 3.4
- 6.3 实现GPU数据采集
  - 实现CollectGpuDataAsync方法
  - 集成3DMark或GFXBench数据源
  - 提取GPU性能数据
  - 需求: 3.2, 3.4
- 6.4 实现AnTuTu数据采集
  - 实现CollectFromAnTuTuAsync方法
  - 爬取AnTuTu排行榜数据
  - 提取移动设备综合性能数据
  - 需求: 3.3, 3.4
- 6.5 实现排名计算服务
  - 实现RecalculateRankingsAsync方法
  - 按类别和性能分数计算排名
  - 更新Product的CurrentRank字段
  - 记录RankingHistory历史数据
  - 需求: 2.5, 7.3
- 6.6 配置错误处理和重试机制
  - 实现API调用失败重试逻辑（最多3次）
  - 记录详细错误日志（使用Serilog）
  - 实现告警通知机制
  - 需求: 3.6
- 6.7 编写数据采集服务测试
  - 使用Mock测试外部API调用
  - 测试数据验证逻辑
  - 测试排名计算准确性
  - 需求: 3.4, 3.6
7. 配置后台任务调度
- 7.1 集成Hangfire
  - 安装Hangfire NuGet包
  - 配置Hangfire使用MySQL存储
  - 配置Hangfire Dashboard
  - 需求: 3.5
- 7.2 创建DataSyncJob
  - 实现定时数据同步任务
  - 配置每24小时执行一次
  - 调用DataCollectionService的各个采集方法
  - 记录任务执行结果
  - 需求: 3.5
- 7.3 配置数据库备份任务
  - 创建DatabaseBackupJob
  - 配置每周执行一次
  - 实现MySQL数据库备份逻辑
  - 需求: 7.5
8. 实现前端基础架构
- 8.1 配置Vue Router
  - 创建路由配置文件
  - 定义路由：首页、类别排名、产品详情、产品对比
  - 配置路由懒加载
  - 需求: 2.1, 8.1
- 8.2 配置Pinia状态管理
  - 创建categoryStore（管理产品类别状态）
  - 创建productStore（管理产品列表和详情状态）
  - 创建comparisonStore（管理对比产品状态）
  - 需求: 2.1, 4.1, 5.1
8.3 配置Axios和API服务层
- 创建Axios实例，配置baseURL和拦截器
- 实现请求拦截器（添加通用headers）
- 实现响应拦截器（统一错误处理）
- 创建categoryService、productService和comparisonService
- 需求: 6.1, 6.2, 6.3, 6.4, 6.5
- 8.4 集成Element Plus和TailwindCSS
  - 安装和配置Element Plus组件库
  - 配置TailwindCSS
  - 创建全局样式文件
  - 需求: 8.1, 8.2
9. 实现前端布局组件
- 9.1 创建Header组件
  - 实现顶部导航栏
  - 添加Logo和应用名称
  - 添加产品类别导航菜单
  - 实现响应式布局
  - 需求: 1.4, 8.1, 8.2
- 9.2 创建Footer组件
  - 显示数据来源说明
  - 显示最后更新时间
  - 添加数据源链接
  - 需求: 10.1, 10.2, 10.4
- 9.3 创建主布局组件
  - 组合Header和Footer
  - 配置router-view
  - 实现响应式容器
  - 需求: 8.1, 8.2
10. 实现首页和类别选择
- 10.1 创建Home视图
  - 显示产品类别卡片网格
  - 调用categoryStore获取类别列表
  - 实现类别卡片点击跳转
  - 显示每个类别的产品数量
  - 需求: 1.1, 1.4
- 10.2 实现响应式布局
  - 桌面端：4列网格
  - 平板端：2列网格
  - 手机端：1列网格
  - 需求: 8.1, 8.2, 8.3
11. 实现产品排名列表页面
- 11.1 创建CategoryRanking视图
  - 根据路由参数获取categoryId
  - 调用productStore获取产品列表
  - 显示产品排名列表
  - 实现分页组件
  - 需求: 2.1, 2.5
- 11.2 创建ProductCard组件
  - 显示产品缩略图、名称、型号
  - 显示性能分数和排名
  - 显示制造商和发布日期
  - 实现点击跳转到详情页
  - 需求: 2.2
- 11.3 创建ProductFilter组件
  - 实现品牌筛选下拉框
  - 实现性能分数区间滑块
  - 实现发布年份筛选
  - 实现筛选条件重置按钮
  - 需求: 4.3, 4.5
- 11.4 创建ProductSearch组件
  - 实现搜索输入框
  - 实现搜索建议（防抖）
  - 实现搜索结果高亮
  - 需求: 4.1, 4.2
- 11.5 实现排序功能
  - 添加排序下拉框（按性能分数、发布日期、价格）
  - 实现升序/降序切换
  - 调用API重新获取排序后的数据
  - 需求: 2.4
- 11.6 实现产品对比选择
  - 添加产品选择复选框
  - 显示已选产品数量（最多4个）
  - 添加"对比"按钮，跳转到对比页面
  - 需求: 5.1
12. 实现产品详情页面
- 12.1 创建ProductDetail视图
  - 根据路由参数获取productId
  - 调用productStore获取产品详情
  - 显示产品基本信息（名称、型号、制造商、发布日期）
  - 显示性能分数和当前排名
  - 需求: 2.2, 2.3
- 12.2 显示规格参数
  - 以表格形式展示Specifications
  - 分组显示（如：处理器规格、图形规格）
  - 需求: 2.2
- 12.3 显示性能测试分数
  - 以卡片形式展示各项Benchmark分数
  - 使用进度条可视化分数
  - 需求: 2.2
- 12.4 显示数据来源信息
  - 显示数据来源名称和链接
  - 显示最后更新时间
  - 需求: 10.2, 10.3, 10.4
- 12.5 集成ECharts图表
  - 安装vue-echarts
  - 创建性能历史趋势折线图
  - 创建性能指标雷达图
  - 实现图表响应式
  - 需求: 9.1, 9.3
13. 实现产品对比页面
- 13.1 创建ProductComparison视图
  - 从路由查询参数获取productIds
  - 调用comparisonStore获取对比数据
  - 显示对比产品的基本信息
  - 需求: 5.1, 5.2
- 13.2 创建ComparisonTable组件
  - 以表格形式展示产品参数对比
  - 高亮显示最优值（绿色）和最差值（红色）
  - 支持横向滚动（移动端）
  - 需求: 5.2, 5.4
- 13.3 创建ComparisonChart组件
  - 使用ECharts创建柱状图对比性能分数
  - 使用雷达图对比多维度性能指标
  - 实现图表交互（悬停显示详细数据）
  - 需求: 5.3, 9.2
14. 实现前端错误处理和加载状态
- 14.1 创建全局错误处理
  - 在Axios拦截器中处理网络错误
  - 显示Toast错误提示（使用Element Plus）
  - 处理401/403/404/500等HTTP错误
  - 需求: 8.4
- 14.2 实现加载状态
  - 在各个视图中添加Loading组件
  - 使用Skeleton屏幕优化加载体验
  - 实现数据加载失败重试按钮
  - 需求: 8.4
- 14.3 实现空状态处理
  - 创建EmptyState组件
  - 在无数据时显示友好提示
  - 提供返回首页或重新加载按钮
  - 需求: 8.4
15. 实现性能优化
- 15.1 配置前端代码分割
  - 配置Vite的代码分割策略
  - 实现路由级别的懒加载
  - 分离第三方库（vendor chunk）
  - 需求: 8.4
- 15.2 实现图片优化
  - 配置图片懒加载（使用Intersection Observer）
  - 使用WebP格式图片（带降级方案）
  - 实现图片占位符
  - 需求: 8.4
- 15.3 配置后端缓存
  - 安装StackExchange.Redis NuGet包
  - 配置Redis连接
  - 实现排名列表缓存（5分钟过期）
  - 实现产品详情缓存（15分钟过期）
  - 需求: 2.1, 2.3
- 15.4 实现API响应压缩
  - 配置Response Compression中间件
  - 启用Gzip压缩
  - 需求: 6.6
- 15.5 配置数据库查询优化
  - 使用AsNoTracking优化只读查询
  - 实现Include预加载关联数据
  - 避免N+1查询问题
  - 需求: 7.2
16. 配置CORS和安全设置
- 16.1 配置CORS策略
  - 在Program.cs中配置CORS
  - 允许前端域名访问
  - 配置允许的HTTP方法和Headers
  - 需求: 6.6
- 16.2 配置API限流
  - 安装AspNetCoreRateLimit NuGet包
  - 配置IP限流规则（每分钟最多100请求）
  - 配置端点级别限流
  - 需求: 6.6
- 16.3 配置输入验证
  - 使用FluentValidation验证所有API输入
  - 防止SQL注入（使用参数化查询）
  - 清理和转义用户输入
  - 需求: 6.7
17. 配置日志和监控
- 17.1 配置Serilog
  - 安装Serilog NuGet包
  - 配置日志输出到文件和控制台
  - 配置结构化日志格式
  - 配置日志级别（Development: Debug, Production: Information）
  - 需求: 3.6
- 17.2 实现关键操作日志
  - 记录数据采集任务执行日志
  - 记录API错误日志
  - 记录数据库操作异常日志
  - 需求: 3.6
- 17.3 配置Hangfire Dashboard监控
  - 启用Hangfire Dashboard
  - 配置Dashboard访问权限
  - 监控后台任务执行状态
  - 需求: 3.5
18. 编写部署文档和配置
- 18.1 创建Docker配置
  - 编写后端Dockerfile
  - 编写前端Dockerfile
  - 创建docker-compose.yml（包含API、前端、MySQL、Redis）
  - 需求: 1.1
- 18.2 创建环境配置文件
  - 创建appsettings.Production.json
  - 创建前端.env.production
  - 配置生产环境数据库连接字符串
  - 配置API密钥和外部服务配置
  - 需求: 3.1, 3.2, 3.3
- 18.3 编写部署文档
  - 编写README.md（项目介绍、技术栈、功能特性）
  - 编写DEPLOYMENT.md（部署步骤、环境要求、配置说明）
  - 编写API文档（使用Swagger/OpenAPI）
  - 需求: 1.1, 6.1, 6.2, 6.3, 6.4, 6.5

14 KiB Raw Blame History Unescape Escape

实施计划

14 KiB

Raw Blame History