上节课我们搞定了动态展示,本节课我们搞定添加功能。
回忆下,添加功能的后台函数,是需要前端传入一个name的,并且最后返回的是完整全部测试平台的名称。
那么我们前端的函数,要做的事就是:
1. 拿到用户输入的关联平台的名称
2. 把名称通过axios请求发送给后台
3. 把后台返回的全部数据重新渲染到菜单的关联列表里
这其中,我们需要一个承载用户输入name的东西,我觉得最好就是dialog对话框。
具体写法如下:
这其中有个输入框,输入框关联的是 new_platform字典的name属性,
然后就是创建按钮,关联了一个函数,这个函数就是负责创建新平台的,并且和url,和django后台的views.py的函数都同名可以。
然后就是这个dialog对话框的默认隐藏问题,我用了一个变量叫dialog_visible来控制,默认为Flase
这里我们顺便声明了下这个空的new_platform字典哦注意。
那什么时候才能让这个dialog对话框展示呢?当然是点击那个增加按钮了:
上图中,点击事件是把这个变量赋值为true,dialog对话框就会展示了。
然后就是我们的具体增加请求了。
很简单的一个get请求,但是结尾要注意把这个new_platform重新置空。
(可复制的代码请直接扫码进群,群内有最新代码压缩包分享,直接赋值粘贴更省事哦~ )
上图中,我们对这个请求返回值做了三个处理,一个是重新渲染全部平台列表,一个是清空对话框的旧名,一个是把对话框隐藏。
效果是可以成功添加了:
到此,我们今天课程结束,欢迎期待下一节~