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

·  阅读 52

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

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

图片

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

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

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

图片

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

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

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

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

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

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

    在vue中写好这个函数 add_user 。

图片

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

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

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

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

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

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

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

图片

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

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

图片

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

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

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

图片

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

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

图片

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

图片

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

图片

图片

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

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

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