接口测试平台代码实现22:项目列表前后端开发

简介: 上节课我们已经创建好了俩个项目作为demo,所以接下来就是我们要打造一个项目列表的前端页面,

 新建一个html页面,取名叫project_list.html:微信图片_20220617201230.png

然后进入urls.py中,打造好映射关系:

url和函数都写:project_list 吧,这样方便辨认:微信图片_20220617201247.png

进入views.py中,新增project_list函数,返回值里面的whichHTML的值是project_list.html。别写错了微信图片_20220617201254.png

然后我没去welcome.html中 设置好菜单-项目列表的超链接/project_list/,注意前后都有微信图片_20220617201303.png

接下来进行测试,我们启动服务,进入主页后,点击项目列表这个菜单,看看能否跳转成功:

微信图片_20220617201311.png

没报错,说明成功了,只是页面我们说明都没写,一片空白。

到此我们算是打通了这条链路,接下来可以去构建页面的内容了。

首先这个页面的内容肯定是需要我们全部数据库中的项目数据的,所以后台我们继续,在返回数据控制器child_json()函数中增加 对 project_list.html的返回数据设置:微信图片_20220617201317.png

上图代码中,如果eid为project_list.html时,就获取DB_project我们的项目数据表的所有数据,然后写入res这个字典中,作为projects键的值存入。

这样我们前端 就可以直接用{{ projects }} 来显示这些项目数据了。

打开project_list.html。 试着写一下:微信图片_20220617201329.png

页面显示:微信图片_20220617201336.png

这就是说明 俩个项目已经成功加载进来了,接下来就看我们如何展示他们了。大体上的技术还是基于我们做首页的那个传送门连接一样,循环展示。但是这里我们要新学一个技术点:表格。我们的项目要展示在规范的表格内,每行就是一个项目,每列为不同的字段。


我们首先先写个循环 不加 表格,展示一下这个项目列表微信图片_20220617201344.png

我们展示了项目的 名字和创建者名字。然后不同的项目直接 用br换行。看看效果:微信图片_20220617201354.png

虽然成功展示了项目,但是很难看是吧,所以我们要引入表格 :

表格标签是table 。

下面有 thead 和 tbody俩部分,thead是表头,tbody是具体内容哦。

无论是表头还是表内容,都需要分行分列(表头也有俩三行的)。所以每一行的标签是tr,表头中的每一列是th ,具体内容的每一列的标签是td。一般都是一个tr内包含多个th或td。

让我们继续写代码,建立一个空的表格:微信图片_20220617201402.png

如上图所示的结构就是一个空的表格,表格后续我们可以用很多样式来让它变得更好看。不过现在我们要把刚刚的 项目列表数据放进来,我们要循环显示的其实是 表的具体内容tbody 中的每一个tr行 都要放进循环体:微信图片_20220617202142.png这里千万不要写错了,瞪大眼睛抄。循环体内部 是tr ,tr里面是多个td ,每个td是一个字段,我们就在每个td标签内夹着的地方放进我们要展示的项目具体字段:微信图片_20220617202148.png

写的过程要注意,所有变量都必须 用俩层大括号。

刷新页面,让我们看看效果:微信图片_20220617202155.png

仔细看,每个字段实际上都是左对齐的。只是目前我们这个表格的颜色和css都没有,所以看不到线条。我们接下来 加入bootstrap的效果就好了。bootstrap是一个最广泛的样式库,里面各种元素控件都有漂亮大方的样式 可让我们直接使用。


目前我所知道 是有俩种方法。

第一种是安装pip插件,然后在settings.py中添加。之后在html中使用。

第二种是和我们导入其他js/css资源一样的办法,去下载一个bootstrap的资源包,然后在html中引入后就可以随意使用。

第三种是我们不下载,直接用在线的,不过毕竟每次打开页面都要访问外网资源,所以加载会稍微慢一点点,虽然有不错的cdn加速器。


这里我们使用第二种方法。先去下载一个bootstratp3的包。

官网地址:https://v3.bootcss.com/getting-started/

然后点下载用于生产环境的按钮。微信图片_20220617202202.png


下载后是一个压缩包,我们解压。微信图片_20220617202209.png

把这个bootstrap-3.3.7-dist文件夹 剪切到我们的项目内的-MyApp/static 目录下:

微信图片_20220617202215.png那么已经导入成功了,我们去哪个html里导入呢?答案是welcome.html

这样我们就会发现各个子页面都会享受到这个静态资源。这也是我们一开始的架构的好处之一。

打开welcome.html:

那么具体要导入哪些文件呢?其实就俩个:微信图片_20220617202220.png

但是我们要在welcome.html中这么写微信图片_20220617202232.png

注意,导入的一个是js文件,一个是css文件,js导入用的标签是script,css导入用的标签是link。注意路径,必须是从 /static开始写,文件名中全部加入 .min.  也就是说,bootstrap.js 要写成bootstrap.min.js 这样,css文件也如此。千万不要抄错了。


写好后就算导入成功了。接下来就要在具体的元素控件中 设置class,来说明这个元素要用到bootstrap3中的什么样式,打开project_list.html文件:

给我们的table标签 增加一个class属性,值为:

微信图片_20220617202239.png

然后我们看看服务,保证是开着的状态,刷新页面。看看效果:微信图片_20220617202713.png

发现确实增加了颜色线条等样式,不过我们还远远没有做完:

我们的字段中 最前面加上 项目id。微信图片_20220617202720.png

刷新页面:

微信图片_20220617202727.png

当然我们忘记了最重要的,就是表头。

设置thead 中的各个th吧:

微信图片_20220617202735.png

刷新页面:微信图片_20220617202741.png

接下来,我们要给他们添加一个新的列,叫“操作”

里面的内容是 进入 和 删除 按钮。用来进入项目内部 或  删除项目:

也就是在最后新增一个th,新增一个td的事:微信图片_20220617202747.png刷新页面看看:微信图片_20220617202755.png

每个项目 都出现了自己的进入和删除按钮。


到这里我们这个表已经比较完善了,下一节,我们继续优化这个列表页的显示效果,新增项目功能,还有俩个按钮的实际功能实现。

相关文章
|
13天前
|
IDE 测试技术 开发工具
10个必备Python调试技巧:从pdb到单元测试的开发效率提升指南
在Python开发中,调试是提升效率的关键技能。本文总结了10个实用的调试方法,涵盖内置调试器pdb、breakpoint()函数、断言机制、logging模块、列表推导式优化、IPython调试、警告机制、IDE调试工具、inspect模块和单元测试框架的应用。通过这些技巧,开发者可以更高效地定位和解决问题,提高代码质量。
108 8
10个必备Python调试技巧:从pdb到单元测试的开发效率提升指南
|
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月前
|
安全 测试技术 持续交付
云计算时代的软件开发与测试:高效、灵活、可扩展
云计算时代的软件开发与测试:高效、灵活、可扩展
|
2月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
70 3
|
3月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
83 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
4月前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
280 7
Jmeter实现WebSocket协议的接口测试方法
|
4月前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
289 3
快速上手|HTTP 接口功能自动化测试