接口测试平台代码实现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

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


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

相关文章
|
1天前
|
消息中间件 测试技术 Linux
linux实时操作系统xenomai x86平台基准测试(benchmark)
本文是关于Xenomai实时操作系统的基准测试,旨在评估其在低端x86平台上的性能。测试模仿了VxWorks的方法,关注CPU结构、指令集等因素对系统服务耗时的影响。测试项目包括信号量、互斥量、消息队列、任务切换等,通过比较操作前后的时戳来测量耗时,并排除中断和上下文切换的干扰。测试结果显示了各项操作的最小、平均和最大耗时,为程序优化提供参考。注意,所有数据基于特定硬件环境,测试用例使用Alchemy API编写。
8 0
linux实时操作系统xenomai x86平台基准测试(benchmark)
|
1天前
|
传感器 Linux 测试技术
xenomai 在X86平台下中断响应时间测试
该文讨论了实时操作系统中断响应时间的重要性,并介绍了x86中断机制和Xenomai的中断管理,包括硬件中断和虚拟中断的处理。Xenomai通过I-Pipe确保实时性,中断优先级高的Xenomai先处理中断。文中还提到了中断响应时间的测试设计,分别针对I-Pipe内核间虚拟中断和硬件中断进行了测试,并给出了在不同负载下的测试结果。
6 0
xenomai 在X86平台下中断响应时间测试
|
1天前
LabVIEW编程LabVIEW开发防护时间测试仪
LabVIEW编程LabVIEW开发防护时间测试仪
|
1天前
|
传感器
LabVIEW编程LabVIEW开发控制PACE1000精密压力测试仪例程与相关资料
LabVIEW编程LabVIEW开发控制PACE1000精密压力测试仪例程与相关资料
|
1天前
|
传感器 编解码 算法
2021-07-20LabVIEW编程LabVIEW开发 控制Dantec 激光多普勒测试仪LDV例程与相关资料
2021-07-20LabVIEW编程LabVIEW开发 控制Dantec 激光多普勒测试仪LDV例程与相关资料
|
1天前
|
传感器 编解码
LabVIEW编程LabVIEW开发 控制RITEC RAM-5000 SNAP非线性高能超声测试系统例程与相关资料
LabVIEW编程LabVIEW开发 控制RITEC RAM-5000 SNAP非线性高能超声测试系统例程与相关资料
|
6天前
|
测试技术
使用CLion创建Cmake项目,使用GoogleTest和GoogleMock对代码进行测试
使用CLion创建Cmake项目,使用GoogleTest和GoogleMock对代码进行测试
17 3
|
7天前
|
XML Java 测试技术
Maven 构建 & 项目测试
该文介绍了如何使用Maven进行Java应用的构建与测试。在`C:/MVN/consumerBanking`项目中,`pom.xml`配置了JUnit依赖。Maven默认创建了源码和测试文件,通过命令`mvn clean package`进行构建,生成`consumerBanking-1.0-SNAPSHOT.jar`。测试报告在`surefire-reports`文件夹。新增`Util`类并更新`App`后,执行`mvn clean compile`编译,然后运行`java -cp . com.companyname.bank.App`显示"Hello World!"。
|
9天前
|
Linux 测试技术 数据安全/隐私保护
CentOS安装MeterSphere并实现无公网IP远程访问本地测试平台
CentOS安装MeterSphere并实现无公网IP远程访问本地测试平台
|
19天前
|
网络协议 安全 测试技术
性能工具之emqtt-bench BenchMark 测试示例
【4月更文挑战第19天】在前面两篇文章中介绍了emqtt-bench工具和MQTT的入门压测,本文示例 emqtt_bench 对 MQTT Broker 做 Beachmark 测试,让大家对 MQTT消息中间 BenchMark 测试有个整体了解,方便平常在压测工作查阅。
113 7
性能工具之emqtt-bench BenchMark 测试示例

热门文章

最新文章