测试圈相亲平台开发流程(14):新增会员功能

简介: 测试圈相亲平台开发流程(14):新增会员功能

在上节课,我们终于完成了 查询功能。

   现在要做一个同样简单的...增加功能。也就是点击页面上的 按钮,可以录入到库,分为男和女哦~

image.png


   我这个设计是,这些输入框不光作为查询结果。也可以作为新增会员的信息输入框。


   当点击新增按钮后,我们把当前页面的数据全部传送给后台,由后台入库即可!


   首先是给这俩个新增按钮 设置点击事件。

image.png


   注意看,我这里虽然是俩个新增按钮,但是调用的是同一个函数,并且没有任何区别。

   那有同学就问了,那后台怎么知道新增是男还是女的?

   回答:在我们的输入框中有性别这个输入框。所以后台根据性别存储。


   然后又有同学问了,那既然俩个按钮功能一样,为啥还要写俩个按钮呢?

   回答:这是为了体验上的设计和给人一种美感交互,属于产品思维。


   好了,我们不纠结这个问题,继续往下研究。


   在vue中写好这个函数 add_user 。

image.png

现在问题来了,这个函数要做什么事?


   答:先获取当前各个输入框内的数据,然后用axios发送给后端。


那么我们第一步就面临了困难,这些输入框的内容,是存在于俩个子组件内的。而他们的父组件Home.vue,想要获取并不可以直接拿到。需要先让子组件传上来才行。这就是一个新的知识点,子传父


现在我们仍然面临一个问题,就是这个子传父的时机,应该是什么时间点开始传输数据呢?


唯一的触发点显而易见是 父级页面的增加按钮。

所以这个问题就变成了,父组件主动获取子组件数据!


这个步骤是:父页面先给子页面添加一个属性


image.png

如上图,我们一次性就把个人信息和择偶信息都搞了。


然后再在下面add_user这个函数内写好获取子组件代码:

image.png

我们可以显示一下,看看一会能否成功获取。


好,父组件到这停止。我们马上切换到这俩个子组件。


我们之前的子组件中,是用:value这种方式来显示数据

image.png

但是现在功能多了,:value已经不能满足了。现在它需要双向绑定,也就是说当input输入框内容改变后,我要让这些数据反过来同步 userInfo这个大字典。


所以,把这里的所有:value全部换成vue专属的指令:v-model:

image.png

然后是Selction.vue组件也一样全部更换:

image.png


现在,我们来测试一下,当我在页面输入一些内容后,点击新增按钮,看看console显示出来的数据是否正常:

image.png

image.png

可以看到,数据是正常的。


这俩个字典我们现在已经成功拿到了,下一步就是axios 发送给后端了。

相关文章
|
3月前
|
存储 测试技术 虚拟化
VMmark 4.0.3 - 虚拟化平台基准测试
VMmark 4.0.3 - 虚拟化平台基准测试
85 0
VMmark 4.0.3 - 虚拟化平台基准测试
|
2月前
|
敏捷开发 运维 数据可视化
DevOps看板工具中的协作功能:如何打破开发、测试与运维之间的沟通壁垒
在DevOps实践中,看板工具通过可视化任务管理和自动化流程,提升开发与运维团队的协作效率。它支持敏捷开发、持续交付,助力团队高效应对需求变化,实现跨职能协作与流程优化。
|
4月前
|
安全 前端开发 Linux
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
154 3
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
|
8月前
|
弹性计算 运维 Java
OS-Copilot参数功能全面测试报告
作为一名运维工程师,我主要负责云资源的运维和管理。通过使用OS Copilot的-t/-f/管道功能,我顺利解决了环境快速搭建的问题,例如Tomcat的快速部署。具体步骤包括购买ECS服务器、配置安全组、远程登录并安装OS Copilot。使用-f参数成功安装并启动Tomcat,自动配置JDK,并通过|管道功能验证了生成内容的正确性。整个过程非常流畅,极大提升了工作效率。
132 12
|
9月前
|
监控 测试技术
slb测试会话保持功能
slb测试会话保持功能
290 6
|
10月前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
442 4
|
3月前
|
Java 测试技术 容器
Jmeter工具使用:HTTP接口性能测试实战
希望这篇文章能够帮助你初步理解如何使用JMeter进行HTTP接口性能测试,有兴趣的话,你可以研究更多关于JMeter的内容。记住,只有理解并掌握了这些工具,你才能充分利用它们发挥其应有的价值。+
721 23
|
8月前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
5月前
|
SQL 安全 测试技术
2025接口测试全攻略:高并发、安全防护与六大工具实战指南
本文探讨高并发稳定性验证、安全防护实战及六大工具(Postman、RunnerGo、Apipost、JMeter、SoapUI、Fiddler)选型指南,助力构建未来接口测试体系。接口测试旨在验证数据传输、参数合法性、错误处理能力及性能安全性,其重要性体现在早期发现问题、保障系统稳定和支撑持续集成。常用方法包括功能、性能、安全性及兼容性测试,典型场景涵盖前后端分离开发、第三方服务集成与数据一致性检查。选择合适的工具需综合考虑需求与团队协作等因素。
643 24
|
5月前
|
SQL 测试技术
除了postman还有什么接口测试工具
最好还是使用国内的接口测试软件,其实国内替换postman的软件有很多,这里我推荐使用yunedit-post这款接口测试工具来代替postman,因为它除了接口测试功能外,在动态参数的支持、后置处理执行sql语句等支持方面做得比较好。而且还有接口分享功能,可以生成接口文档给团队在线浏览。
226 2