接口测试平台代码实现9:菜单常显

简介: 上节我们说到了一个问题:就是如何让菜单出现在每个页面的左侧。比如我们刚研发好的home.html,配上菜单看才会更好看。

微信图片_20220615225136.png 这里有三个方法:

  1. 把菜单的html代码复制粘贴到 其他各个页面
    特点:完全不推荐这个方式。一百个页面难道要粘一百段菜单代码么。然后我新改动了菜单,就要手动去改动一百个页面,这简直在开玩笑。
  2. 把菜单的html代码做成组件,然后其他各个页面去调用,在页面上生成菜单

       特点:比较不错。

   3. 把菜单作为后台唯一能返回的html,也就是唯一的render函数内的那个html参数。然后在菜单welcome.html 中 把其他各个页面都当作一个子页面 一个来引入。

       特点:和方法2逻辑相反,而且在很多js等静态资源导入上更简洁。比如100个页面都需要引入jquery.min.js文件,那么你只需要在welcome.html中引入一次,即可在所有页面中生效。


综上所述,各有利弊。我这里选用第三种方式了。


进行思考:后台以后所有的函数,返回的renede函数中的html 都是welcome.html菜单了,那么自己本身的页面要怎么传入呢?这里就需要我们再加一个参数,来作为真正要访问的页面html了。


所以本节先引入一个知识点:render函数都能往里面加什么东西。


render 我们之前的用法是: 微信图片_20220615225032.png

里面只有俩个参数,一个request是本次请求的http信息。一个是html文件名。那么其实它还可以加第三个参数:字典。这一个字典 其实就等于 可以加无限个参数了。

比如这样:微信图片_20220615225136.png

那么这些参数 会用在哪呢?也就是说,怎么去调用出来呢?答案就是 这些参数是会作用在 html页面上!


用法就是。在html的静态代码中,加入{{ key1 }} 那么真正用户看到的 这里就变成来 字典中key1的值 1


我们来做个实验:

在home.html这个html里加入username参数名:一定用俩个大括号包起来。这样浏览器才会知道这里是个变量 需要去赋值。微信图片_20220615225143.png

我们进入urlhttp://127.0.0.1:8000/home/看效果:微信图片_20220615225450.png

暂时并没有什么显示,那是因为我们后台还没给返回username这个参数。让我们在后台函数home中加上username参数:微信图片_20220615225454.png

好,我们修改了后台views.py ,那么切换回浏览器后,django会自动重启,你需要等待它一下。然后刷新页面:微信图片_20220615225459.png

可以看到,已经显示出来了,这就是后台如何给前端html返回数据的一个途径。


好了。我们理解了这个概念,那么接下来还要学习新知识点:如何引入,这里大家如果听不太明白,就照葫芦画瓢即可,慢慢的自会了解。


打开welcome.html,在它里面 body标签内的最后位置加上一个空div,给这个div写一个属性。id 为 page1 ,如图:

微信图片_20220615225650.png

然后在下面写一个script标签,script标签就是专门存放我们js代码的地方。

微信图片_20220615225704.png

在script标签内写上一句代码:


$('#page1').load('/child/'+'{{ whichHTML }}/{{ oid }}/')

大家看到这句话可能问题比较多,这里直接复制就好,先简单跟大家说说是什么意思,这句话的意思是,一旦打开welcome.html, 那么就运行这句代码,这句代码会把id为page1的那个空div,给它的内容加载另一个url返回的页面。

这个url 我定位:'/child/'+'{{ whichHTML }}/{{ oid }}/' 它会返回我们真正的要访问的页面 home.html 其中的/child/一级路由只是我的个人习惯,以便自己知道这个路由是来找孩子(子页面)的。后面俩个 {{大括号,我们前面说了,浏览器会识别成变量,把我们的俩个参数的值都替换进来。这个whichHTML 就是我们真实要拿到的html的名字。后面的oid,也就是我预留出来的一个参数。以后可能用的上。万一welcome去接儿子home,结果home说你怎么证明你是我爸爸?拿出来证明。证明对了,儿子就跟着回家,证明不对,那么就👮‍♀️同志跟你回家了,虽然我们今天的教程用不上这个证明参数,但是后续是一定用上的相信我。

好现在完成后是这样:微信图片_20220615225713.png

接下来去urls.py中,写这个/child/  url的映射关系吧~打开urls.py 加入这样一句:


url(r"^child/(?P<eid>.+)/(?P<oid>.*)/$", child),  # 返回子页面

我们发现,多出来俩个没见过的东西:微信图片_20220615225831.png

这里解释一下,这是标准的正则写法。目的是获取url中的这俩个变量。


也就是说,这个url后面的俩段,并不是写死的一成不变的。而是一个变量,对应的是我们welcome.html中的 whichHTML 和  oid微信图片_20220615230017.png

 因为是变量,所以我们这个正则写法可以完全匹配到并且获取里面的值。


接下来我们去写后端child函数。打开views.py,新增child函数

微信图片_20220615230022.png

它只做一件事,就是真实的返回 我们目标html,在这里就是home.html,其中的eid,就是获取url中(?P.+)值,也就是我们welcome.html中的

{{ whichHTML }} ,也就是我们后台函数返回的子页面html的真实名字。


现在让我们来修改home函数,因为现在除了child函数外,所有的后台函数都要返回的是welcome.html,而原来的真正目标页面home.html则变成了区区字典里的一个值,它的key是 whichHTML 。



def home(request):    return render(request,'welcome.html',{"whichHTML": "Home.html

微信图片_20220615230029.png

oid 暂时用不上,为空即可。

让我们切换到浏览器,等待django重启(若中间报错停止了,就手动点击运行),再刷新页面看看效果:

微信图片_20220615230316.png

可以看到,左侧的菜单成功显示了。但是我们发现。home.html的排版出问题了,怎么居中的东西全变成靠左了呢?

这是因为它现在的js/css静态资源 全被welcome.html给影响了,同一类型的js/css 在welcome.html和home.html中都被引入。而且版本不同,势必产生冲突。这就需要我们去解决了,这种情况之后会很常见。因为我们总是从网络上下载,导致资源不统一,我们这里可以采取一些办法,给它纠正过来。

我们打开home.html,发现我们设置居中的属性在body中,但是作为一个子页面加入了welcome.html后,body中的css设置被无视了微信图片_20220615230701.png

既然body不行了,那我弄个div 装这些东西吧,div的样式可不会被无视掉目前。

所以我们在body内 写个div微信图片_20220615230707.png

然后给它中间回车,分的大一点。微信图片_20220615230712.png然后把下面的内容 剪切到这个div中来微信图片_20220615230717.png

变成如下图所示

微信图片_20220615231026.png然后我们把body中的居中样式 给挪到div上:微信图片_20220615231031.png

然后回去刷新页面看看吧。微信图片_20220615231036.png

一切正常了~


之后的所有页面,都会和home.html的出现形势一样,都是作为子页面嵌入到welcome.html这个菜单页面中去。后面我就不会再详细关于这里的细节了。

相关文章
|
3月前
|
数据采集 机器学习/深度学习 大数据
行为检测代码(一):超详细介绍C3D架构训练+测试步骤
这篇文章详细介绍了C3D架构在行为检测领域的应用,包括训练和测试步骤,使用UCF101数据集进行演示。
87 1
行为检测代码(一):超详细介绍C3D架构训练+测试步骤
|
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月前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
2月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
70 3
|
2月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
150 1
|
3月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
82 2
|
2月前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
71 0
|
3月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
83 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)