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

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

简介: 上节之后有粉丝私聊觉得,平台右上角的“主页/退出” 按钮已经过时。所以我们本节首先来优化下。
+关注继续查看

微信图片_20220704194255.png   首先是退出按钮,我们因为不经常用,不必要放在这么明显的位置,而且和个人姓名头像放在一起更符合常理....所以转移到左侧收缩菜单里即可。

    打开welcome.html:

我们把这个退出按钮的超链接 先转移走

微信图片_20220704193849.png

我们把它移动到左侧菜单的 名字后面 别忘了改成图中设置的颜色,并且和名字username中间 放一个  就是空格,注意分号别漏。

微信图片_20220704193901.png

效果如下:

微信图片_20220704193908.png

接着是 剩余的左上角的主页按钮。现在是这样:

微信图片_20220704193917.png

我们简单重新设计下:

删除我们原来的主页按钮相关的div和超链接。

然后在header中加入style,并粘贴下面的css样式:

微信图片_20220704193930.png


    <style>
      .chamfer{
          background: linear-gradient(41deg, transparent 10px, #66defd 0) top left,
                  linear-gradient(-90deg, transparent 0px, #adfdee 0) top right,
                  linear-gradient(-90deg, transparent 0px, #cbffbd 0) bottom right,
                  linear-gradient(45deg, transparent 21px, #b0fde2 0) bottom left;
          background-size: 49% 48%;
          background-repeat: no-repeat;

      }
</style>

然后在底部找一个位置 写上新的home首页按钮 div。具体写在那随意,因为我们要给它固定位置在页面右上角。

微信图片_20220704193937.png

<div class="chamfer" style="height: 30px;width: 100px;position: fixed;right: 0px;top: 0px ">
    <strong>
        <a href="/home/" style="font-size: large;padding-left: 30px;color: #00372e;text-decoration: none"> HOME </a>
    </strong>
</div>

效果如下:

微信图片_20220704193945.png

具体细节,自己可以随意调试改动,颜色 大小等等。

好了,关于右上角按钮的问题到此结束。开始本节主要内容:

本节我们继续想办法 添加个人看板栏:

可能目前有些同学 很想加一个 统计图,这样看起来显得高大上一些,所以本节我们来嵌入这个。

   不过这个功能,大家可以跟我一起进行思考,以一个第一次完全不知道如何下手的新人状态来思考。注意以下思考是我根据我总结的方法论生成的具体步骤,而非沉淀的方法论本身,   所以这也是我在逐步校验这套理论的可行性的一步。

  1.首先不知道要如何添加这种图形的,我猜测肯定是通过js/css来根据具体数据来生成图像。

   2.但是我并不知道要如何生成,我需要去百度,百度的话会有俩种方向搜索,一种是教我如何自己开发,一种是直接给我做好第三方我直接复用。

   3.这个问题我觉得一定很难,所以先试试不造轮子,直接去下载使用。

   4.风险上肯定是有,第三方的也都是个人开发的,并不一定能适应我们现在的布局和具体环境,大概率是需要进行修正,但是这个难度不好说,代价也许很大。

   5.那么既然要去下载,所以我优先选择了jq之家的。找了几款试一下吧,改动的时候记住修改的地方,以便不合适的时候可以还原干净。

   6.如果是第三方的,那么风格上我们需要进行本地化,也就是我的主页是淡蓝色简约风格,不可能弄个大红大绿的欧式繁华的花纹控件。所以寻找到合适的如下:

   http://www.htmleaf.com/jQuery/Chart/201802074971.html

微信图片_20220704193951.png


好的我下载好了资源:

微信图片_20220704193957.png


然后解压到 static目录下:

微信图片_20220704194004.png

 取了个low名 :bingxingtu。

   

然后点击它的index.html,也就是它的demo。看看如何使用。

凭借多年经验,一眼就看出来 这个饼形图的html代码:

微信图片_20220704194020.png

我们把其复制到我们的Home.html中:

微信图片_20220704194028.png

效果如下:

微信图片_20220704194036.png

这里没有成功,是肯定的。而且位置也不对。我们希望是 同一行显示,不过我们先不管位置了,先让它变成图而非字。我们注意到 这些class的具体我们并没有引入,所以继续去index.html中复制粘贴到Home.html:

微信图片_20220704194046.png

现在效果变成了这样:

微信图片_20220704194052.png

还是差很多,所以我们继续去找index.html。我们仔细看index.html,它最下面的时候明显引入了 我们不认识的陌生js和script。所以我怀疑这个应该就是图形生成的必须代码:

微信图片_20220704194059.png

将其复制到Home.html最后:

微信图片_20220704194106.png

然后我们刷新页面看看效果,注意因为我们引入了js等静态文件,所以我的习惯是打开console看看。

微信图片_20220704194113.png

结果是仍然没成功,并且有报错,这个报错信息很简单,就是我们的js文件没有找到导致。我们复制过来的时候 并没有修改js文件的引入路径。所以改成如下:

微信图片_20220704194121.png

不过这里我们去刷新页面可以看到,console并不报错了,但是效果仍然是不对的。所以我们还需要去index.html中找必须的代码:

微信图片_20220704194128.png

可以很明显的看到这句箭头指向的,不是平时见过的,而且都带有circle圆的标志,所以推测这个css文件引入代码也是必须的。粘贴到Home.html里:

微信图片_20220704194140.png

其实这里的css文件 和刚刚的js文件我们都可以在bingxingtu文件夹轻松找到:

微信图片_20220704194153.png

好了。如今我们 dom复制了,js也复制了,css也复制了。再不成功!天理难容!。

刷新页面,效果如下:

微信图片_20220704194201.png

可以看到已经成功,而且进入页面后还有个慢涨动画效果。


接下来我们给其大小位置 重新设计。代码修改如下:

大小,我们最好的办法是直接去刚刚的css文件中看,刚进入就可以发现 有明显的关于大小高度的设置,我们依次修改,找出生效的设置即可:

(注意,如不生效,记得还原)

微信图片_20220704194208.png

强制刷新页面后,效果如下:

微信图片_20220704194215.png

看来大小合适了,然后是间距貌似太大了。我们关闭了progresscircle.css,回到Home.html中设置:

可以看到我们在header中引入的那个css,给它加入宽度看看效果:

微信图片_20220704194224.png

效果如下,可以看到间距明显缩小了。 

微信图片_20220704194235.png

剩下的是 位置。我们想办法给移动到和文字数据看板并列,这里有俩种办法,一是给其和父级div都设置上bootstrap的并列属性。二是简单点,直接给写死位置,因为其相对于页面的底部和左边界是固定的。所以简单点这样改即可:微信图片_20220704194246.png

效果如下:

微信图片_20220704194255.png

最后我们要做的就是让这个饼形图 真的有用。我们可以随意控制它的数量。所以我们先想好都有什么可以用图来表示。然后如何表示?

从其中具体文字可以看出,我们进入页面时直接把这几个位置的数字传进来即可展示:

微信图片_20220704194301.png

然后现在来思考可以做什么吧。

  1.  个人项目占平台总项目的比
  2. 个人接口占平台总接口的比
  3. 个人用例占平台总接口的比
  4. 未完成请求/任务通知占总数的比
  5. 未被用例套用的接口占总数的比
  6. 后台反馈吐槽未被管理员回复 占总数的比
  7. 等等。。。。

欢迎大家畅所欲言~ 这里可以根据自己需要在views.py的child_json中计算好数据 带入页面中实现真正效果。

下一节我们就来去做示范的弄三个数据计算展示~


最后看看目前主页的变化,其实很大了:

微信图片_20220704194307.png

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

相关文章
接口测试平台代码实现番外:主页改版-7
接口测试平台代码实现番外:主页改版-7
14 0
接口测试平台番外-正交工具5
接口测试平台番外-正交工具5
12 0
接口测试平台代码实现98:全局域名-5
接口测试平台代码实现98:全局域名-5
17 0
接口测试平台代码实现58-首页重构6
接口测试平台代码实现58-首页重构6
16 0
接口测试平台代码实现57-首页重构5
本节我们接着开发首页, 主要内容是 让左侧的请求记录和右侧的请求模块 联动起来。 具体联动需求: 右侧请求一次之后,左侧生成记录 点击左侧记录,右侧则会显示这次记录的请求数据 我们本节课的内容是想办法实现1-生成记录。
21 0
接口测试平台代码实现96:全局域名-3
全局域名这里我们目前已经搞定了 域名管理 部分。也就是当用户请求的时候我们偷偷存了份 host,并且去重。 本节我们就来研究下,如何在用户调试接口的时候,可以联想自动输入。这个小技巧其实很简单,但是非常实用。
38 0
接口测试平台代码实现55:首页重构-3
接着上节继续来做: 先来回顾一下,上节课我们基本就是清空来首页,并且划了一条竖线,把首页分为左右俩部分。
21 0
接口测试平台代码实现19.首页优化
接口测试平台代码实现19.首页优化
24 0
接口测试平台代码实现5:亲手创造第一个首页
接口测试平台代码实现5:亲手创造第一个首页
20 0
接口测试平台代码实现8:首页的继续开发
接口测试平台代码实现8:首页的继续开发
26 0
+关注
游客pxprrm2iipsfu
我去热饭
435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载