接口测试平台代码实现17:帮助模块1

简介: 接口测试平台代码实现17:帮助模块1

开始之前给大家说说上节课的主页吐槽功能,其实大家可以按照我们已经掌握的前端技术,对首页进行重新排版,力求好看+实用,吐槽功能比较重要,是我们收到反馈的一个重要途径,而且也是趁这个机会给大家展示如何使用sqlite3数据库orm映射技术。我们在本系列后期的某节课,仍然会对首页进行改版。具体改版的效果可以参考如下主页:微信图片_20220616232347.png只是因为此主页技术要求很高,非常复杂。所以只能留到本系列最后,小伙伴不要心急,这么大的工程要一步一步来。

好了 言归正传。

为啥要开发个帮助模块呢?

  1. 我们从小到大用过很多软件,几乎每一个软件菜单都有帮助
  2. 新人的确很需要帮助模块来熟悉如何使用平台,效果比你发教程ppt在群里要好的多
  3. 我们恰好可以设计设计漂亮的帮助页面,练练js/css


那我们要养成一个习惯,在写一个新的模块之前,先好好设计设计。一是页面布局,二是数据

1.页面布局

页面布局的话,我们用最简单的方式,左侧目录,右侧说明文案。微信图片_20220616232355.png

2.数据

也就是说,我们这些帮助文档,要放在哪呢?首先这些文档我们不经常维护,是可以写死的。那么写在某些文件中如word/txt,我们提取的时候有点麻烦,而且我们要给其中某行换字体,加粗,变色等操作很难。那么最简单的方式就是写死在html文件中,样式我们随意设置,简单。


好。让我们开始做:

       首先,在templates文件夹下创建help.html微信图片_20220616232400.png

然后我们做一个 div,用来存放目录,其实就是一堆a标签 超链接。

并在里面放一些a标签,以便我们来调试样式微信图片_20220616232405.png

别忘了修改title 为 帮助文档:微信图片_20220616232749.png

让我们停下脚步,先去把映射调通,然后就可以在浏览器上不断的看我们修改的效果了。

打开urls.py ,添加我们之前写好的帮助文档的超连接:/help/

这个是我们之前在welcome.html中写菜单时候,给帮助菜单写的url:微信图片_20220616232414.png

urls.py中这么写:微信图片_20220616232426.png

然后我们发现这个help貌似颜色不对啊,怎么是紫色?

那是因为我们django的库函数中已经有函数叫help了。我们要是也这么起名,就很容易产生各种未知冲突,所以我们今后在写代码时候,要尽量避免取这种大众简单的单词。

所以我们给help函数的名字改成api_help,微信图片_20220616232932.png

好了,这次正常了。

让我们打开views.py,在最下面创造api_help()函数:这个函数只是单纯进入而已。我们别写错了。前面是welcome.html,后面是help.html微信图片_20220616232937.png

好,让我确保服务运行,且自动重启后。我们点击页面上的帮助菜单看看能否进入:微信图片_20220616232942.png

但是我们意识到了一个问题,就是我们今后进入的各个子页面,这个左侧菜单都比较挡害,那么有什么办法可以在我们进入任何子页面后,它自己主动隐藏呢?也就是说,让它自己自动点一下 菜单的隐藏按钮

   好的,让我们打welcome.html :

让我们写一段js代码,来点击这个按钮。在body内的最后写一个script用来存放这段js代码:微信图片_20220616232947.png

我们往常写完script后 都会在里面写一个function xxx(){},然后在function里面才写js代码,

这就好比是我们python的def xxxx() 你要是不调用这个函数,那么它永远也不会运行。所以这里我们不写function了,直接在script里面写js代码,这样就会达到 页面刚打开,它自动就运行了这段js 这样的效果:微信图片_20220616232952.png

大家可以学到:document.getElement('你要操作的元素id').click() 这句代码是点击一个元素的,这里我们要点击菜单隐藏按钮,所以我们要放入菜单的隐藏按钮的id,我们找到这个按钮微信图片_20220616233150.png

它的id是menu_btn让我们把它填入js:微信图片_20220616233156.png好,我们现在刷新浏览器,看看效果:微信图片_20220616233200.png


可以看到它自己自动就点击了,形成了我们想要的效果。

之后无论进入任何页面都会如此,但是我们想要的是并不完全是主页的效果,我们想要的是,在home主页的时候 不要隐藏菜单,在其他页面自动隐藏菜单。

那么我们就要在这段js上继续改。加一个if判断,如果不是home主页,那么就点。


这里我们要怎么知道当前子页面是不是home呢,别忘了。我们welcome中的有个后端传过来的参数,恰好是子页面的html文件名!微信图片_20220616233205.png

就是上图的{{ whichHTML }}

   所以我们就要在if中进行判断。注意{{ 变量名 }} 只会忠诚的替换,你要是直接写,它会报错,你要想把它当作一个字符串,外面就要写双引号或单引号:微信图片_20220616233209.png

   写好后。我们刷新浏览器测试一下,

  1. 在home主页,菜单不隐藏
  2. 在帮助页面,菜单自动隐藏

好了。测试完毕,毫无问题。


我们之前的设计,在welcome.html中引入子页面的架构设计,看来在这上有好处,可以很灵活的控制各种页面。大家继续往后学,会有很多这样的巧妙设计慢慢被发现

相关文章
|
6天前
|
SQL 关系型数据库 MySQL
实时计算 Flink版产品使用合集之idea本地测试代码,要增大 Flink CDC 在本地 IDEA 测试环境中的内存大小如何解决
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
25 1
|
8天前
|
jenkins Devops 测试技术
单元测试与质量保证:确保Visual Basic代码的健壮性
【4月更文挑战第27天】在VB开发中,单元测试是保证代码质量和软件健壮性的关键。本文介绍了单元测试的基础,包括其定义和好处,如提高代码质量、促进重构。接着,讨论了MSTest、NUnit和xUnit等VB单元测试工具。遵循TDD原则和最佳实践,编写独立、有针对性的测试,并注重测试速度和覆盖率。通过示例展示了如何在Visual Studio中设置和运行测试。最后,提到了持续集成和自动化测试工具,如Jenkins和静态代码分析工具,以提升软件开发效率和质量。单元测试不仅是技术手段,更是提升团队协作和软件工程水平的文化体现。
|
3天前
|
数据采集 JSON 数据格式
2024年最新【python基础教程】常用内置模块(1),2024年最新头条测试面试
2024年最新【python基础教程】常用内置模块(1),2024年最新头条测试面试
|
8天前
探讨AC/DC电源模块的可靠性设计和测试方法
探讨AC/DC电源模块的可靠性设计和测试方法
探讨AC/DC电源模块的可靠性设计和测试方法
|
8天前
BOSHIDA AC/DC电源模块的可靠性设计与测试方法
BOSHIDA AC/DC电源模块的可靠性设计与测试方法
BOSHIDA  AC/DC电源模块的可靠性设计与测试方法
|
8天前
|
数据挖掘 测试技术 网络安全
LabVIEW开发卫星测试平台
LabVIEW开发卫星测试平台
11 3
|
8天前
|
程序员 测试技术
程序员难以一次性写好代码并持续修复Bug,主要源于软件的高复杂性、需求不确定性、测试局限性和技术能力限制。
【5月更文挑战第11天】程序员难以一次性写好代码并持续修复Bug,主要源于软件的高复杂性、需求不确定性、测试局限性和技术能力限制。复杂的系统易产生意外问题,需求变化导致初始设计难完备,测试无法覆盖所有情况,而技术更新和个体能力差异也会引入错误。因此,持续调试和优化是保证软件质量的关键步骤。
17 0
|
8天前
|
算法 物联网 5G
LabVIEW开发最小化5G系统测试平台
LabVIEW开发最小化5G系统测试平台
15 0
|
8天前
|
算法 数据可视化 API
LabVIEWCompactRIO 开发指南33 测试和调试LabVIEW FPGA代码
LabVIEWCompactRIO 开发指南33 测试和调试LabVIEW FPGA代码
14 0
|
8天前
|
消息中间件 测试技术 Linux
linux实时操作系统xenomai x86平台基准测试(benchmark)
本文是关于Xenomai实时操作系统的基准测试,旨在评估其在低端x86平台上的性能。测试模仿了VxWorks的方法,关注CPU结构、指令集等因素对系统服务耗时的影响。测试项目包括信号量、互斥量、消息队列、任务切换等,通过比较操作前后的时戳来测量耗时,并排除中断和上下文切换的干扰。测试结果显示了各项操作的最小、平均和最大耗时,为程序优化提供参考。注意,所有数据基于特定硬件环境,测试用例使用Alchemy API编写。
56 0
linux实时操作系统xenomai x86平台基准测试(benchmark)

热门文章

最新文章