【测开中台教程-11】首页的统计功能初实现-关联的测试平台数量

本节内容很简单，就是首页做一个统计关联平台数量的。目前我们也只有这一个值得统计的数据，毕竟当你会了这第一个，其他的也就会了。

首先打开HomeView.vue

这里我先说一下，我们首页右侧顶部的那一条布局，我觉得还是放这种数据比较好，中间放一些重要的数据，底部放一些平台通知。

所以，像有几个项目这种事，并不是很重要，放在顶部一小条就可以。

本节课主要是熟练后台数据，前端展示并不是很华丽。

看到下方红圈了么，我们就在这个红圈里进行添加，这个header标签对就是顶部区域布局。

为了横向放很多的统计数据，所以我们要做好微布局。

下图中，el-row代表顶部区域只写一行数据，el-col有三个，代表有三个数据展示。

我们先给第一个el-col添加文案：这里有一个变量:platform_count

于是在data中需要先声明

声明成功后，界面变成了这样：

这个数字，我们需要动态的去获取才行，而获取的办法，依然是之前学到的，通过mounted来实现，通过一个具体的axios接口去获取数据，但问题是，我们之后可能会需要拿很多数据，每一个数据都单独用一个接口实在是太浪费了，不然一个首页就卡你半天，谁受的了。

所以我们做一个公共的接口来获取：/Home_get_count/

这里需要注意的是，res.data拿到的是全部返回值，就像一个字典。而我们的platofrm_count只是需要其中的一个key对应的value即可。

此刻我们需要回到urls.py中搞定映射，全部用同名即可

然后是views.py中开发这个函数：

函数中，我们用res字典，作为最终返回，目前里面只有一个keyvalue。而获取数量的方式可以直接.count()

打印了一下res,前端刷新页面会触发请求，看看控制台的输出：

再看看前端的展示：

到这，证明我们这套链路没有问题

我们接下来就是简单调整一下它的展示效果就可以了。

先把文案缩小并置灰，再给套上一个el-card卡片外壳

再简单设置下卡片的样式，在文件底部的style中设置：

最终效果：

等统计的数量多了，就会很好看了哦~