测试圈相亲平台开发流程(13):搜索功能

·  阅读 48

     上节课我们最终选定了第二种方案进行父传子 数据。

    

先来个人信息表的数据传输:

    首先打开我们的Home.vue,给个人信息表的数据弄出来变成一个变量。

图片

    

    然后找到子组件Detail的dom层使用行,并加上自定义属性。

图片

好了,然后我们去Detail.vue组件内去接收这个自定义属性。

图片

然后就是在我们的那些输入框中直接展示即可。

图片

然后我们来测试一下:

图片

可以看到功能已经成功了~ 

注意,我在开发的过程中,写错了几个单词。请大家不要抄错了。

**man 被我写成了 men
**

**address 被我写成了 adress
**

want 被我写成了 wangt

大家引以为戒,千万不要手滑写错单词,排查很难的。

好了,搞定了这个基础信息,下面就是择偶信息了。直接照葫芦画瓢!

正好大家再复习一遍!

第一步,在父组件中接口返回值中 弄好这个变量:

图片

第二步,在子组件的dom层引用标签加入新的属性:

图片

第三步,打开子组件,去接收:

图片

第四步:在子组件中使用这个接收的变量

图片

测试结果:ok

图片

这里要说明一下,虽然择偶要求中都有最低 最高这种描述。

但是实际上,差一点也不是不行。

比如要求身高最低160,但是159也不会就完全被砍掉。只是会降低最终的匹配分数而已。

而161 这种则会加分,但考虑到正常人性选择,所以如果身高达到165以上,那么就要开始扣分,毕竟和人家心中目标差距太大了。

所以最终的算法肯定是要不断优化的,尽请关注。

分类:
开发工具
标签:
收藏成功!
已添加到「」, 点击更改