接口测试平台代码实现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中引入子页面的架构设计,看来在这上有好处,可以很灵活的控制各种页面。大家继续往后学,会有很多这样的巧妙设计慢慢被发现

相关文章
|
1月前
|
算法 IDE Java
Java 项目实战之实际代码实现与测试调试全过程详解
本文详细讲解了Java项目的实战开发流程,涵盖项目创建、代码实现(如计算器与汉诺塔问题)、单元测试(使用JUnit)及调试技巧(如断点调试与异常排查),帮助开发者掌握从编码到测试调试的完整技能,提升Java开发实战能力。
190 0
|
3月前
|
存储 测试技术 虚拟化
VMmark 4.0.3 - 虚拟化平台基准测试
VMmark 4.0.3 - 虚拟化平台基准测试
80 0
VMmark 4.0.3 - 虚拟化平台基准测试
|
2月前
|
安全 Java 测试技术
Java 项目实战中现代技术栈下代码实现与测试调试的完整流程
本文介绍基于Java 17和Spring技术栈的现代化项目开发实践。项目采用Gradle构建工具,实现模块化DDD分层架构,结合Spring WebFlux开发响应式API,并应用Record、Sealed Class等新特性。测试策略涵盖JUnit单元测试和Testcontainers集成测试,通过JFR和OpenTelemetry实现性能监控。部署阶段采用Docker容器化和Kubernetes编排,同时展示异步处理和反应式编程的性能优化。整套方案体现了现代Java开发的最佳实践,包括代码实现、测试调试
89 0
|
3月前
|
Java 测试技术 容器
Jmeter工具使用:HTTP接口性能测试实战
希望这篇文章能够帮助你初步理解如何使用JMeter进行HTTP接口性能测试,有兴趣的话,你可以研究更多关于JMeter的内容。记住,只有理解并掌握了这些工具,你才能充分利用它们发挥其应有的价值。+
650 23
|
4月前
|
安全 前端开发 Linux
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
137 3
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
|
5月前
|
SQL 安全 测试技术
2025接口测试全攻略:高并发、安全防护与六大工具实战指南
本文探讨高并发稳定性验证、安全防护实战及六大工具(Postman、RunnerGo、Apipost、JMeter、SoapUI、Fiddler)选型指南,助力构建未来接口测试体系。接口测试旨在验证数据传输、参数合法性、错误处理能力及性能安全性,其重要性体现在早期发现问题、保障系统稳定和支撑持续集成。常用方法包括功能、性能、安全性及兼容性测试,典型场景涵盖前后端分离开发、第三方服务集成与数据一致性检查。选择合适的工具需综合考虑需求与团队协作等因素。
537 24
|
5月前
|
人工智能 自然语言处理 测试技术
自然语言生成代码一键搞定!Codex CLI:OpenAI开源终端AI编程助手,代码重构+测试全自动
Codex CLI是OpenAI推出的轻量级AI编程智能体,基于自然语言指令帮助开发者高效生成代码、执行文件操作和进行版本控制,支持代码生成、重构、测试及数据库迁移等功能。
626 0
自然语言生成代码一键搞定!Codex CLI:OpenAI开源终端AI编程助手,代码重构+测试全自动
|
8月前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
5月前
|
SQL 测试技术
除了postman还有什么接口测试工具
最好还是使用国内的接口测试软件,其实国内替换postman的软件有很多,这里我推荐使用yunedit-post这款接口测试工具来代替postman,因为它除了接口测试功能外,在动态参数的支持、后置处理执行sql语句等支持方面做得比较好。而且还有接口分享功能,可以生成接口文档给团队在线浏览。
211 2
|
7月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
263 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡