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

目录
打赏
0
0
0
0
27
分享
相关文章
【硬件测试】基于FPGA的1024QAM基带通信系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR
本文介绍了基于FPGA的1024QAM基带通信系统的硬件测试版本,包含testbench、高斯信道模块和误码率统计模块。系统新增ila在线数据采集和vio在线SNR设置模块,支持不同SNR条件下的性能测试。1024QAM调制将10比特映射到复平面上的1024个星座点之一,实现高效数据传输。硬件测试结果表明,在SNR=32dB和40dB时,系统表现出良好的性能。Verilog核心程序展示了各模块的连接与功能实现。
43 7
【硬件测试】基于FPGA的MSK调制解调系统系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR
本文基于FPGA实现MSK调制解调系统,采用Verilog开发,包含同步模块、高斯信道模拟、误码率统计等功能。相比仿真版本,新增ILA数据采集与VIO在线SNR设置模块。通过硬件测试验证,展示不同SNR(如10dB和16dB)下的性能表现。研究聚焦软件无线电领域,优化算法复杂度以适应硬件限制,利用MSK恒定包络、相位连续等特性提升频谱效率。核心代码实现信号生成、调制解调、滤波及误码统计,提供完整的硬件设计与分析方案。
47 19
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
Potpie.ai 是一个基于 AI 技术的开源平台,能够为代码库创建定制化的工程代理,自动化代码分析、测试和开发任务。
194 19
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
【硬件测试】基于FPGA的4ASK调制解调通信系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR
本文介绍了基于FPGA的4ASK调制解调系统的硬件测试版本,该系统包括testbench、高斯信道模块和误码率统计模块,并新增了ILA在线数据采集和VIO在线SNR设置功能。通过VIO设置不同SNR(如15dB和25dB),实现了对系统性能的实时监测与调整。4ASK是一种通过改变载波幅度表示数据的数字调制方式,适用于多种通信场景。FPGA平台的高效性和灵活性使其成为构建高性能通信系统的理想选择。
63 17
【硬件测试】基于FPGA的16QAM调制+软解调系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR
本文基于之前开发的16QAM调制与软解调系统,增加了硬件测试功能。该系统包含FPGA实现的16QAM调制、软解调、高斯信道、误码率统计模块,并新增了ILA在线数据采集和VIO在线SNR设置模块。通过硬件测试,验证了不同SNR条件下的系统性能。16QAM软解调通过比较接收信号采样值与16个调制点的距离,选择最近的调制点来恢复原始数据。核心Verilog代码实现了整个系统的功能,包括SNR设置、信号处理及误码率统计。硬件测试结果表明系统在不同SNR下表现良好,详细操作步骤可参考配套视频。
47 13
【硬件测试】基于FPGA的4FSK调制解调通信系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR
本文基于之前的文章《基于FPGA的4FSK调制解调系统》,增加了ILA在线数据采集模块和VIO在线SNR设置模块,实现了硬件测试版本。通过VIO设置不同SNR(如10dB和20dB),并展示了ILA采集的数据结果。四频移键控(4FSK)是一种数字调制方法,利用四个不同频率传输二进制数据,具有较高的频带利用率和抗干扰性能。输入的二进制数据分为两组,每组两个比特,对应四个频率f1、f2、f3、f4,分别代表二进制组合00、01、10、11。调制过程中选择相应频率输出,并进行幅度调制以增强抗干扰能力。接收端通过带通滤波器提取信号并还原为原始二进制数据。
33 7
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
72 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
Python测试淘宝店铺所有商品接口的详细指南
本文详细介绍如何使用Python测试淘宝店铺商品接口,涵盖环境搭建、API接入、签名生成、请求发送、数据解析与存储、异常处理等步骤。通过具体代码示例,帮助开发者轻松获取和分析淘宝店铺商品数据,适用于电商运营、市场分析等场景。遵守法规、注意调用频率限制及数据安全,确保应用的稳定性和合法性。
【硬件测试】基于FPGA的256QAM基带通信系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR
本文介绍了基于FPGA的256QAM基带通信系统的硬件测试版本,包含testbench、高斯信道模块和误码率统计模块。系统新增ila在线数据采集和vio在线SNR设置模块,支持不同信噪比(如30dB和40dB)的仿真测试,并提供配套操作视频。256QAM调制方案每个符号携带8比特信息,通过复数值星座图映射实现高效传输。Verilog代码展示了核心模块设计,包括SNR设置、数据处理和ILA测试分析,确保系统在实际硬件环境中的稳定性和性能。
22 2
【硬件测试】基于FPGA的16QAM基带通信系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR
本文介绍了基于FPGA的16QAM基带通信系统硬件测试版本。该系统在仿真基础上增加了ILA在线数据采集和VIO在线SNR设置模块,支持不同信噪比(如15dB、25dB)的测试。16QAM是一种正交幅度调制方式,通过两路4ASK信号叠加实现,每个符号包含4比特信息。系统采用正交调幅法生成16QAM信号,并通过DAC转换为模拟信号。解调时使用正交相干解调,经低通滤波器恢复电平信号。开发板内完成发射与接收,无需定时同步模块。代码可移植至其他开发板,具体步骤见配套文档。
30 2

热门文章

最新文章