电子商务网站建设价格,无锡网站建设信息有限,南宁网站制作专业,湖南长沙新增病例最新消息三十二、【核心功能改造】数据驱动：重构仪表盘与关键指标可视化 前言准备工作第一部分：后端实现 - 统计 API1. 创建 `DashboardStatsView`2. 注册统计 API 路由3. 后端初步测试第二部分：前端实现 - 重构仪表盘页面1. 创建 `api/dashboard.ts` API 服务2. 重构 `HomeView.vue… 三十二、【核心功能改造】数据驱动：重构仪表盘与关键指标可视化 前言准备工作第一部分：后端实现 - 统计 API1. 创建 `DashboardStatsView`2. 注册统计 API 路由3. 后端初步测试 第二部分：前端实现 - 重构仪表盘页面1. 创建 `api/dashboard.ts` API 服务2. 重构 `HomeView.vue` (仪表盘页面) 第三部分：全面测试与验证 总结 前言
仪表盘是用户进入系统后最先看到的页面，它应该能直观地展示系统的核心状态和关键指标。一个设计良好的仪表盘能帮助团队快速把握项目进度、测试覆盖情况和质量趋势。 本文目标：
重构仪表盘页面，展示以下关键信息：
概览卡片： 项目总数、功能用例总数、接口用例总数。图表统计： 用例类型分布： 通过饼图展示功能用例和接口用例的占比。按项目统计接口用例数： 通过柱状图展示每个项目的接口用例数量。按用户统计用例创建数： 通过柱状图展示不同用户创建的测试用例数量，了解团队成员的贡献度。 准备工作
前端项目就绪： test-platform/frontend 项目可以正常运行 (npm run dev)。后端 API 运行中： Django 后端服务运行。Element Plus 集成完毕。vue-echarts 图表库已安装： 在前端项目根目录运行 npm install echarts vue-echarts --save。拥有一些测试数据： 创建多个项目、不同类型的测试用例（功能/接口），并由不同用户创建，以便统计图表能展示出多样化的数据。第一部分：后端实现 - 统计 API
新建一个 API 来提供仪表盘所需的所有统计数据，以避免前端多次请求。
1. 创建 DashboardStatsView
打开 test-platform/api/views.py，添加一个新的 APIView：
# test-platform/api/views.py
from django.db.models import Count # 导入 Count
from rest_framework import viewsets, filters, generics, permissions, filters, pagination, status as http_status# ... (其他 ViewSet) ...class DashboardStatsView(APIView):"""提供仪表盘所需的统计数据GET /api/dashboard/stats/"""permission_classes = [permissions.IsAuthenticated] # 只有登录用户才能查看def get(self, request, *args, **kwargs):# 1. 概览统计project_count = Project.objects.count()# 2. 按用例类型统计case_type_stats = TestCase.objects.values('case_type').annotate(count=Count('id'))# 3. 按项目统计接口用例数 (只统计接口用例)project_case_stats = TestCase.objects.filter(case_type='api') \.values('module__project__name') \.annotate(count=Count('id')) \.order_by('-count')# 4. 按用户创建用例统计 (按 maintainer 字段)# 注意: maintainer 是 CharField，如果想按 User 对象统计，TestCase 模型需添加 creator 字段user_case_stats = TestCase.objects.exclude(maintainer__isnull=True).exclude(maintainer__exact='') \.values('maintainer') \.annotate(count=Count('id')) \.order_by('-count'
