文末扫码进群有最新源码分享哦
本节内容很简单，就是首页做一个统计关联平台数量的。目前我们也只有这一个值得统计的数据，毕竟当你会了这第一个，其他的也就会了。
首先打开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中设置：
最终效果：
等统计的数量多了，就会很好看了哦~
进群扫码：
视频课即将上传知识星球：测试开发干货
长按后选择扫描图中二维码
