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

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

基于 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


功能完成。

相关文章
|
27天前
|
人工智能 搜索推荐 Serverless
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
66 7
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
|
2月前
|
Java
【Java每日一题】— —第二十一题:编程把现实生活的手机事物映射成一个标准类Phone,并定义一个测试类PhoneDemo测试Phone类的功能
【Java每日一题】— —第二十一题:编程把现实生活的手机事物映射成一个标准类Phone,并定义一个测试类PhoneDemo测试Phone类的功能
37 0
|
3月前
|
人工智能 安全
外汇MT5/MT4交易所平台系统开发测试版/案例设计/策略步骤/功能需求/源码程序
When developing the MT5/MT4 foreign exchange documentary trading system, the following functions and intelligence can also be considered:
|
3月前
|
SQL 测试技术 数据库连接
Lim接口测试平台-接口测试功能详解
Lim接口测试平台-接口测试功能详解
47 1
|
4月前
|
监控 数据可视化 测试技术
什么是非功能性测试?
什么是非功能性测试?
|
4月前
|
存储 测试技术 定位技术
新一代自动化测试工具需要具备的功能
新一代自动化测试工具需要具备的功能
|
4月前
|
API
阿萨聊测试: Postman 的界面功能介绍
阿萨聊测试: Postman 的界面功能介绍
|
21天前
|
测试技术 C语言
网站压力测试工具Siege图文详解
网站压力测试工具Siege图文详解
27 0
|
2月前
|
测试技术 持续交付
现代软件测试中的自动化工具应用与挑战
随着信息技术的快速发展,软件行业对于质量和效率的要求日益提高,自动化测试工具在软件开发过程中扮演着至关重要的角色。本文将探讨现代软件测试中自动化工具的应用现状以及所面临的挑战,旨在帮助开发人员更好地理解并充分利用这一技术手段。
|
3天前
|
机器学习/深度学习 数据采集 人工智能
【专栏】利用AI辅助工具提高软件测试效率与准确性
【4月更文挑战第27天】本文探讨了AI在软件测试中的应用,如自动执行测试用例、识别缺陷和优化测试设计。AI辅助工具利用机器学习、自然语言处理和图像识别提高效率,但面临数据质量、模型解释性、维护更新及安全性挑战。未来,AI将更注重用户体验,提升透明度,并在保护隐私的同时,通过联邦学习等技术共享知识。AI在软件测试领域的前景广阔,但需解决现有挑战。

热门文章

最新文章