接口测试平台代码实现8:首页的继续开发

简介: 接口测试平台代码实现8:首页的继续开发

上节说到,首页我们可以成功打开了。本节就说说,如何设计主页吧~

美化设计:

关于设计这点,老实说,我是没有什么话语权的,因为我做的东西不好看。但是大不了我们可以借鉴啊.....所以我们来介绍几种设计:

1.百度风格微信图片_20220615221755.png

特点:简洁明了,加载飞快,搜索功能强大,很容易被同事作为书签页收藏甚至做成主页。


2.hao123风格微信图片_20220615221805.png

特点:满屏的超链接,花里胡哨,但是很实用,全都是常用网址,设计公司内测试平台的话也可以用各种内部常用链接作为首页,这样做更容易让同事保存成书签。


3.数据总结显示:微信图片_20220615222330.png特点:此类页面更加直观的给用户展示必要数据,显得高大上和正规。但是要求技术难度较高,且需要大量的网上去抄第三方控件,首次进入加载会很慢。


4.广告类页面

微信图片_20220615222444.png

特点:通篇的大屏图片,动画,感觉高端大气上档次。低调奢华有内涵,但是不太适合作为一个测试平台使用


5.主要工具实用类

特点:就相当于 没有主页了。用户进来的第一个页面 就是一个最常用的工具页面,给人感觉是比较务实,但是失去了仪式感。


6.文字排版文档类简简单单欢迎语+使用说明+更新说明特点:制作简单,无任何难度。只要设计得体,那么依然漂亮的一批,国外的很多开源网址,下载地址页面都这样,低调,朴素。


本节我们就介绍第6个,做一个简单的页面美化

首先,我们设计一个欢迎语打开项目,让我们新建一个html页面,叫做:home.html这里我们要更改一个概念:welcome.html 我们准备后续给它当作公共菜单。home.html 作为主页。所以我们把welcome.html的title改成测试平台:

微信图片_20220615222706.png


这样我们后续进入的各种页面都会显示这个了


好的,让我们打开新建的home.html开始开发:

微信图片_20220615222713.png

然后在浏览器打开看看效果:

微信图片_20220615222846.png

接着设计, 给body增加text-align属性,值为center。这个意思是让整个body内的文字元素都居中显示。

<body style="text-align: center">


微信图片_20220615223117.png

然后如上图,我们添加了一个div块,用来存放 使用说明。并且给它加了一些自己的特定属性。虽然在body这个父控件中指定了text-align:center。但是如果内部子控件单独写了同一个属性,那么这个子控件将不再接受父控件的这个属性,而按照自己单独写的。


看看效果微信图片_20220615223125.png接下来我们继续写其他的:

微信图片_20220615223348.png


其中span   标签是静态文案的标签,写了之后可以肆意的去改变文案的大小字号,颜色,阴影等各种样式了。

br标签是回车换行符

a标签是超链接

h1 - h5都是常用的标题,自动加粗加黑加大


看看效果微信图片_20220615223259.png

接下来让我们放一个图片进来装点一下:图片的标签是img,你输入img之后,按下tab键,就会自动给你补全:

微信图片_20220615223524.png

按tab键:

微信图片_20220615223530.png

神奇么?src属性就是你的图片的具体位置路径。alt属性是缺省,就是当你的图片坏了找不到了,就会显示alt的属性内容,比如说:抱歉,图片走丢了 5555

我们的图片应该放在哪呢?当然是static这个静态资源文件夹了

微信图片_20220615223648.png

然后我们在src属性中写路径,一定要以 /satic/开头,注意左边的/

顺便在图片之前加俩个br

微信图片_20220615223654.png

好了现在,我们在浏览器打开可以看到:

微信图片_20220615223701.png为啥会发生这个现象呢?

因为我们的图片路径是以/static/开头的写法。这个写法是因为django服务会自动去static中提取所有静态资源,但是我们目前是直接在浏览器中打开home.html,并没有走django的路线,所以找不到这个路径。而如果要在django服务中看到,我们必须要先去写urls.py的映射,然后写个后台函数,后台函数来返回我们的home.html,才可以。

所以现在开始写url映射吧~

微信图片_20220615223928.png

按如图修改,新写一个home/$ 作为url然后我们去views.py写这个home函数:微信图片_20220615223934.png

然后确保我们的服务没有停止。

现在让我们打开网址:127.0.0.1:8000/home/ 来看看刚刚开发的首页!微信图片_20220615223941.png

可以看到图片很好的加载了,但是显得有点大,让我们给它加一个width宽度css属性:微信图片_20220615224139.png

回来浏览器,刷新看看。微信图片_20220615224144.png

现在小多了。但是图片内容可能引起小邪😈同学的极度

不适和反感,所以我们换个图。比如我们去做一个平台自己的专属logo!微信图片_20220615224243.png微信图片_20220615224301.png

然后按照步骤一步一步设计吧。注意,如果网站要求付费或者登陆,小伙伴们还是按照要求来,这个花不了太多钱的,人家开平台也是需要成本的哈。

当然你也可以自己用ps设计

微信图片_20220615224354.png

好了本节就介绍到这里。小伙伴尽量自己凭着自己的美感来设计属于自己特有的主页。下节预告:如何让各个页面都显示我们的菜单。

相关文章
|
13天前
|
IDE 测试技术 开发工具
10个必备Python调试技巧:从pdb到单元测试的开发效率提升指南
在Python开发中,调试是提升效率的关键技能。本文总结了10个实用的调试方法,涵盖内置调试器pdb、breakpoint()函数、断言机制、logging模块、列表推导式优化、IPython调试、警告机制、IDE调试工具、inspect模块和单元测试框架的应用。通过这些技巧,开发者可以更高效地定位和解决问题,提高代码质量。
108 8
10个必备Python调试技巧:从pdb到单元测试的开发效率提升指南
|
8天前
|
算法 Java 测试技术
使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
40 13
|
18天前
|
监控 JavaScript 测试技术
postman接口测试工具详解
Postman是一个功能强大且易于使用的API测试工具。通过详细的介绍和实际示例,本文展示了Postman在API测试中的各种应用。无论是简单的请求发送,还是复杂的自动化测试和持续集成,Postman都提供了丰富的功能来满足用户的需求。希望本文能帮助您更好地理解和使用Postman,提高API测试的效率和质量。
70 11
|
2月前
|
并行计算 算法 测试技术
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面,旨在通过综合策略提升程序性能,满足实际需求。
65 1
|
2月前
|
存储 算法 C语言
用C语言开发游戏的实践过程,包括选择游戏类型、设计游戏框架、实现图形界面、游戏逻辑、调整游戏难度、添加音效音乐、性能优化、测试调试等内容
本文探讨了用C语言开发游戏的实践过程,包括选择游戏类型、设计游戏框架、实现图形界面、游戏逻辑、调整游戏难度、添加音效音乐、性能优化、测试调试等内容,旨在为开发者提供全面的指导和灵感。
53 2
|
2月前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
2月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
70 3
|
2月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
150 1
|
2月前
|
安全 测试技术 持续交付
云计算时代的软件开发与测试:高效、灵活、可扩展
云计算时代的软件开发与测试:高效、灵活、可扩展
|
3月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
83 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)