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

·  阅读 42

    上一节课,我们已经创造了数据层和其俩张表:个人信息表/择偶表。

    并且创造了四个样例,鸣人/佐助/小樱/雏田。

    本节课我们要完成第一个小功能:查询。

    也就是页面上根据微信号(昵称) 来查询出结果并渲染到页面上。

图片

    这个常见的查询问题,我们首先要缕清思路:

    首先,确定这个功能的触发点,即点击搜索按钮。所以我们整个开发要从这个点开始入手。

    先给搜索按钮加一个点击事件吧~  @click, 调用的函数名为search

图片

    

    然后我们去下面写出这个函数:

图片

    现在要来思考,这个函数要干什么?

当然是获取用户输入的微信号(昵称) ,然后调用一个请求传给后台!

    微信号输入框的值我们做成绑定变量:

图片

然后在底部vue中声明初始值为空:

图片

这样这个变量,我们之后要用的时候,直接就写this.wechart_value即可。

然后就是我们要如何发送一个请求给后台了。

答案当然是axios了

图片

如图,我发送给路由/sarch/,并且带了一个参数,wechart_value。

然后我们就去django的urls.py中写好这个路由和后台的映射。

图片

然后我们立马去views.py中写好这个search函数:

图片

注意,views.py的开头,我们要写好常用的这几个引入语句,然后再新建我们的search函数:

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

答案很简单:

    1. 从请求中获取到这个微信号

    2. 去数据库找到俩个表的数据

    3. 把数据打包成json

    4. 作为请求的返回体传回前端

实现:

图片

    上图中,我打印了一下最终的res,给大家看看结果,它是一个嵌套字典:

图片

图片

    好了,我们后台给了前端这个数据,前端要做的就是渲染到页面的这些个输入框中。

    先不要着急实现,先在前端vue中打印一下这个数据,看看是否正常:

图片

结果:

图片

可以看到,数据是完全正常的。此时并没有填充到对应输入框中。

当大家以为可以简单的填充的时候,却突然发现,我们目前是在Home.vue中调用接口获取到的数据,但是这些输入框却存在于Detail.vue和Selection.vue内。

直接给另一个组件的输入框赋值并不好办,所以只能先把数据传输给这俩个子组件了。

也就是俗称的父传子!

这里我们有俩种方案:

  1. 通过数据总线:msg.js 来存和取数据

  2. 通过给子组件赋予新属性来传送数据

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