【测试开花】六、项目管理-前后端-实现编辑功能

简介: 【测试开花】六、项目管理-前后端-实现编辑功能

基于 springboot+vue 的测试平台开发继续更新。


今天实现项目列表的编辑功能:


  • 点击【编辑】按钮,打开对话框,显示此条记录的信息
  • 修改对话框表单内容,点击对话框【保存】按钮,更新此条记录


一、打开编辑页面显示数据


1. 编辑按钮


之前复制的 table 组件,里面带有 2 个按钮,修改其中一个为【编辑】按钮。


1268169-20210921230146233-342642008.png


绑定一个点击事件handleUpdate(scope.row),这个row就是当前这条记录的对象,可以加个console打印一下。


1268169-20210921230608568-1355856080.png


2. 编写 handleUpdate 方法处理数据外显


数据外显其实还是要查询出当前记录的项目名称和描述,再赋值给 form 表单即可。这里需要根据项目id(唯一性)来查询。


修改一下后端项目列表的接口,使其支持根据项目id查询数据:


1268169-20210921231037762-405686303.png


在 handleUpdate 中调用接口:


1268169-20210921231143766-1025445240.png


  • this.dialogFormVisible = true,首先打开对话框
  • 在 data 的 projectQuery 对象中,新增一个 id,用于传参给接口。
  • 再把row.id把每行里的 id 赋值给this.projectQuery.id
  • 最后请求接口,返回的list中只有一个元素,把这个结果的projectNamedescription,再赋值给 form 表单即可。


测试一下:


1268169-20210921231409366-1651188852.png


二、保存编辑页面的内容


1. 后端增加 update 接口


编辑页表单与新增页面一致,没必要再写一个。所以要稍作一些改动,让这个表单分别在新增和编辑的时候可以调用对应的接口。


新增接口已有,现在增加一个更新的接口,继续在 ProjectService 里编写。


1268169-20210921233156321-356740224.png


还有对应外面的 controller 处理器:


1268169-20210921233244221-1168532339.png


自测一下更新接口,功能正常。


1268169-20210921234833696-1142958285.png


2. 前端页面修改


为了可以区分这是新增表单还是编辑表单,需要在 data 里增加一个字段来标识:dialogStatus


1268169-20210921233502466-318686003.png


修改表单里的【保存按钮】,点击的时候通过dialogStatus的值,来决定调用新增还是更新的方法:


1268169-20210921233938907-1359658525.png


dialogStatus等于"create",就是新增,否则就是修改更。


那么处理编辑页数据外显的方法handleUpdate也修改修改,给dialogStatus赋值为update:


1268169-20210921234143293-1857751677.png


新增updateData方法,来调用后端的 update 接口。但是别忘记在 js 文件里添加好接口的请求,然后导入到 vue 页面文件中去。


1268169-20210921234600530-1092466005.png


然后继续完成的updateData方法的代码:


1268169-20210922000730346-1233667188.png


这里还设计到【新增项目】按钮的改动,因为点击了【编辑】按钮,dialogStatus等于update,那自然点击新增的时候要赋值为create才可以调用到add()方法。

但由于之前的【新增项目】按钮已经绑定了一个this.dialogFormVisible = true,所以把这2个抽出来,写到一个方法handleAdd中:


1268169-20210922001025358-1000805350.png


然后新增按钮绑定这个新方法即可。


1268169-20210922001045797-305597824.png


最后,测试一下功能。


1268169-20210922001132204-1513140450.png


功能完成。

相关文章
|
1月前
|
运维
【运维基础知识】用dos批处理批量替换文件中的某个字符串(本地单元测试通过,部分功能有待优化,欢迎指正)
该脚本用于将C盘test目录下所有以t开头的txt文件中的字符串“123”批量替换为“abc”。通过创建批处理文件并运行,可实现自动化文本替换,适合初学者学习批处理脚本的基础操作与逻辑控制。
134 56
|
1月前
|
测试技术
Appscan手工探索、手工测试功能实战
Appscan手工探索、手工测试功能实战
|
2月前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
246 3
快速上手|HTTP 接口功能自动化测试
|
3月前
|
XML Web App开发 数据挖掘
Postman接口测试工具全解析:功能、脚本编写及优缺点探讨
文章详细分析了Postman接口测试工具的功能、脚本编写、使用场景以及优缺点,强调了其在接口自动化测试中的强大能力,同时指出了其在性能分析方面的不足,并建议根据项目需求和个人偏好选择合适的接口测试工具。
109 1
|
3月前
|
Web App开发 敏捷开发 测试技术
自动化测试之美:使用Selenium WebDriver进行网页功能验证
【8月更文挑战第29天】在数字时代,软件质量是企业竞争力的关键。本文将深入探讨如何通过Selenium WebDriver实现自动化测试,确保网页应用的可靠性和性能。我们将从基础设置到编写测试用例,逐步引导读者掌握这一强大的测试工具,同时分享实战经验,让测试不再是开发的负担,而是质量保证的利器。
|
3月前
|
测试技术
一款功能完善的智能匹配1V1视频聊天App应该通过的测试CASE
文章列举了一系列针对1V1视频聊天App的测试用例,包括UI样式、权限请求、登录流程、匹配逻辑、消息处理、充值功能等多个方面的测试点,并标注了每个测试用例的执行状态,如通过(PASS)、失败(FAIL)或需要进一步处理(延期修改、待定、方案再定等)。
66 0
|
3月前
|
JavaScript 前端开发 应用服务中间件
【qkl】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
【区块链】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
|
6天前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
34 3
|
1月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
57 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
2月前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
237 7
Jmeter实现WebSocket协议的接口测试方法