测试圈相亲平台开发流程(19):匹配功能(下)

简介: 测试圈相亲平台开发流程(19):匹配功能(下)

目前,我们后台的函数要开发这个match_user 匹配函数。

image.png


在开发这个复杂的函数之前,我们先概要设计下,这个函数要做些什么事?

  1. 确定前端要的最终格式
  2. 从数据库拿出所有需要的数据
  3. 循环异性数据,并代入到分值计算函数,得到所有异性的最终匹配得分
  4. 把数据按总分从高到低排列,塞进最终格式返回体中。
  5. 返回给前端


所以,我们这个函数其实中间是需要一个具体计算各个属性匹配得分的纯算法函数。


这个match_user只作为view视图逻辑上的处理。独立出来的那个算法函数就算为业务层。


好,我们开始按步骤实现。


首先确定最终格式,最终格式我们要根据前端展示效果来决定设计:

image.png


我们设计这个最终返回体格式为列表内嵌字典的方案,因为列表是有顺序的,所以正好符合我们的排序需求,然后就是内部的字典,也符合我们的几个字段填充需求。

设计如下:

[{"probability":"","Iscore":"","Oscore":"","weChat":"","Ouid":""}]


注意到,这里面字段中,前三个都需要我们实际计算才知道。


前端Result组件再次修改成,使用这几种字段的代码。

image.png


目前因为没有假数据,所以我们后台要先弄一批假数据来进行mock测试。

image.png

然后启动前后端服务,测试展示情况:


经过测试,我们发现了一个小情况,就是数据虽然成功传递给了前端的父组件,但是并没有成功传递给子组件Result.vue。

那么这个解决办法很多,很流行的解决方案是在子组件中监听这个数据的变化,只要发现数据变化,就重新刷新这个数据。


image.png


当重新刷新最新值后,页面才会有对应的变化:

image.png

这里我们注意到 排名居然是从0开始了,这个问题是因为我们在遍历整个列表时直接使用index下标了,下标自然是从0开始的,解决也很简单,给它加1即可:

image.png

效果如下:

image.png


不过前端我们并没有完全写完,因为还要写这个查看详情按钮呢~


因为避免昵称/wechat过长,所以我在按钮中取消了显示文案,并且加上了一个点击事件:show_detail

image.png

下面我们来写这个show_detail函数

这个功能很简单,就是弹出该会员的所有信息:


但是呢,这些信息我们仍然需要调取后台函数来获取:

所以写成这样:

image.png

然后快速实现这个功能!

urls.py:

image.png

views.py:

image.png

这里的逻辑并不复杂,只是用id取出来数据后,稍微按照字符串的方式进行了拼接。


前端测试点击查看详情结果:

image.png

滑动下:

image.png


试试雏田:

image.png


一切正常!


好了本节课结束,我们成功的打通了前后端匹配结果数据的流转和显示。


下节课我们要正式去写match_user匹配函数喽~


相关文章
|
1月前
|
运维
【运维基础知识】用dos批处理批量替换文件中的某个字符串(本地单元测试通过,部分功能有待优化,欢迎指正)
该脚本用于将C盘test目录下所有以t开头的txt文件中的字符串“123”批量替换为“abc”。通过创建批处理文件并运行,可实现自动化文本替换,适合初学者学习批处理脚本的基础操作与逻辑控制。
134 56
|
10天前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
45 1
|
28天前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
44 2
|
10天前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
31 0
|
1月前
|
测试技术
Appscan手工探索、手工测试功能实战
Appscan手工探索、手工测试功能实战
|
2月前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
247 3
快速上手|HTTP 接口功能自动化测试
|
3月前
|
持续交付 C# 敏捷开发
“敏捷之道:揭秘WPF项目中的快速迭代与持续交付——从需求管理到自动化测试,打造高效开发流程的全方位指南”
【8月更文挑战第31天】敏捷开发是一种注重快速迭代和持续交付的软件开发方法,通过短周期开发提高产品质量并快速响应变化。本文通过问题解答形式,探讨在Windows Presentation Foundation(WPF)项目中应用敏捷开发的最佳实践,涵盖需求管理、版本控制、自动化测试及持续集成等方面,并通过具体示例代码展示其实施过程,帮助团队提升代码质量和开发效率。
72 0
|
3月前
|
Web App开发 敏捷开发 测试技术
自动化测试之美:使用Selenium WebDriver进行网页功能验证
【8月更文挑战第29天】在数字时代,软件质量是企业竞争力的关键。本文将深入探讨如何通过Selenium WebDriver实现自动化测试,确保网页应用的可靠性和性能。我们将从基础设置到编写测试用例,逐步引导读者掌握这一强大的测试工具,同时分享实战经验,让测试不再是开发的负担,而是质量保证的利器。
|
3月前
|
测试技术
一款功能完善的智能匹配1V1视频聊天App应该通过的测试CASE
文章列举了一系列针对1V1视频聊天App的测试用例,包括UI样式、权限请求、登录流程、匹配逻辑、消息处理、充值功能等多个方面的测试点,并标注了每个测试用例的执行状态,如通过(PASS)、失败(FAIL)或需要进一步处理(延期修改、待定、方案再定等)。
66 0
|
6天前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
34 3

热门文章

最新文章