开发者社区> 游客pxprrm2iipsfu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

接口测试平台代码实现番外:主页改版-6

简介: 本节我们来实现下那三个饼形图的后台逻辑,不过我这里只做其中一个的,其他俩个留着日后再用。 也就是用户的 资源占平台总的比。资源暂时定为项目数比 接口数比 用例数 。 这里大家可以自行设计,本教程只演示如何实现这个流程。
+关注继续查看

首先我们打开Home.html:

我们需要想办法 给这三个饼 写上注释。

1.给css文件修改下,继续变小。留出位置给文字。

微信图片_20220704212957.png2. Home.html中上移,准备把文字写在下面:

微信图片_20220704213014.png

现在的效果如下了:

微信图片_20220704213020.png

我们准备在红圈内写上相关文案。

Home.html中的代码如下:

微信图片_20220704213028.png

效果如下:

微信图片_20220704213034.png

我们现在要做的去后台,搞定这个{{ ziyuan }}的具体数即可:

打开views.py 找到child_json:

微信图片_20220704213056.png

对上节的代码进行修改,参数化了个人的几个数量值 减少计算次数。

# 个人数据看板
count_project = len(user_projects)
count_api = sum([ len(DB_apis.objects.filter(project_id=i.id)) for i in user_projects])
count_case = sum([len(DB_cases.objects.filter(project_id=i.id)) for i in user_projects] )

ziyuan_all = len(DB_project.objects.all())+len(DB_apis.objects.all())+len(DB_cases.objects.all())
ziyuan_user = count_project+count_api+count_case
ziyuan = ziyuan_user/ziyuan_all *100

new_res = {
    "count_project":count_project ,
    "count_api":  count_api,
    "count_case": count_case,
    "count_report": '',
    "ziyuan":ziyuan,
}

重启服务刷新页面后效果如下:

微信图片_20220704213109.png

这个60%就是我的资源占比。

           接下来是榜一大哥提供的一个额外功能,就是根据这个百分比数值来显示不同的文案.....

首先修改css文件中的大小,默认的3px太小,改成4px:

微信图片_20220704213135.png

然后找到我们的js文件:微信图片_20220704213141.png

添加如下三句inner_text:

微信图片_20220704213148.png然后刷新页面 可以看到 效果:

微信图片_20220704213158.png


到这里 这个小功能算是结束了

下节课我们继续去设计主页的功能,欢迎关注。

看看现在首页的样子,是不是步入正轨了呢?

微信图片_20220704213207.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
接口测试平台代码实现番外:主页改版-4
接口测试平台代码实现番外:主页改版-4
10 0
接口测试平台代码实现156:私有client证书设置
接口测试平台代码实现156:私有client证书设置
11 0
接口测试平台代码实现139:不同项目大用例登陆态干扰bug测试
虽然上节课我们准备好了测试数据,但是本节我们要想想如何来测,从哪看结果等问题。
16 0
接口测试平台代码实现140: 项目大用例干扰bug解决
上节课我们明确了解决方案,先试验思路1, 也就是想办法 隔离。
11 0
接口测试平台番外-正交工具6
接口测试平台番外-正交工具6
16 0
接口测试平台代码实现99:全局域名-6
接口测试平台代码实现99:全局域名-6
25 0
接口测试平台代码实现59-首页重构7
本节基本就是最后一节,上节我们本来以为很简单的重构,结果遇到了恶心的第三方组件bug,所以我就用刷新套路来绕过了这个问题,还省去了clear清空函数,顺便给大家讲了下新增的第二万能参数ooid。在最后我们解决了url,host,header的显示问题。本节就剩处理一下 请求方式/请求体类型/请求体了。
21 0
接口测试平台代码实现30:接口库-接口列表
接口测试平台代码实现30:接口库-接口列表
23 0
接口测试平台代码实现21:项目列表
在本节开始之前,让我们先修复一个bug, bug是,我们在做首页的超链接的时候,修改了child函数,使其增加了一个返回数据的控制器-child_json()函数
22 0
接口测试平台代码实现31:接口列表继续开发
接口测试平台代码实现31:接口列表继续开发
13 0
+关注
游客pxprrm2iipsfu
我去热饭
435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载