测试圈相亲平台开发流程(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匹配函数喽~


相关文章
|
16天前
|
人工智能 搜索推荐 Serverless
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
37 7
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
|
1月前
|
Java
【Java每日一题】— —第二十一题:编程把现实生活的手机事物映射成一个标准类Phone,并定义一个测试类PhoneDemo测试Phone类的功能
【Java每日一题】— —第二十一题:编程把现实生活的手机事物映射成一个标准类Phone,并定义一个测试类PhoneDemo测试Phone类的功能
35 0
|
29天前
|
缓存 运维 Serverless
应用研发平台EMAS产品常见问题之测试检查更新没有反应如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
|
1月前
|
机器学习/深度学习 人工智能 监控
视觉智能平台常见问题之体验产品的美颜测试关掉如何解决
视觉智能平台是利用机器学习和图像处理技术,提供图像识别、视频分析等智能视觉服务的平台;本合集针对该平台在使用中遇到的常见问题进行了收集和解答,以帮助开发者和企业用户在整合和部署视觉智能解决方案时,能够更快地定位问题并找到有效的解决策略。
23 1
|
2月前
|
人工智能 安全
外汇MT5/MT4交易所平台系统开发测试版/案例设计/策略步骤/功能需求/源码程序
When developing the MT5/MT4 foreign exchange documentary trading system, the following functions and intelligence can also be considered:
|
2月前
|
测试技术
Lim测试平台测试报告说明
Lim测试平台测试报告说明
32 2
|
2月前
|
SQL 测试技术 数据库连接
Lim接口测试平台-接口测试功能详解
Lim接口测试平台-接口测试功能详解
40 1
|
10天前
|
测试技术 C语言
网站压力测试工具Siege图文详解
网站压力测试工具Siege图文详解
19 0
|
1月前
|
JavaScript jenkins 测试技术
这10款性能测试工具,收藏起来,测试人的工具箱!
这10款性能测试工具,收藏起来,测试人的工具箱!
|
1月前
|
人工智能 监控 测试技术
利用AI辅助工具提升软件测试效率
【2月更文挑战第17天】 随着科技的不断发展,人工智能(AI)在各个领域的应用越来越广泛。在软件测试领域,AI技术也发挥着重要作用。本文将探讨如何利用AI辅助工具提升软件测试效率,包括自动化测试、智能缺陷识别和预测等方面。通过引入AI技术,软件测试过程将变得更加高效、准确和可靠。
164 1