本节课衔接上集,我们成功拿到了子组件的数据后,父组件就要使用axios来发请求给后台了:
首先我们这个请求数据量很大,且是属于上传。所以采用post请求。
但post请求有诸多规则,否则后台很难成功解析。
其中最明显的就是header中content-type。
为了方便,我们准备在全局中修改配置:
所以要动手的地方就是main.js,加上图中的代码即可。
然后我们回到Home.vue中,开始写这个axios请求。
然后我们去django的部分,urls.py中 写上这个/add_user/路由的映射:
然后去views.py中写这个函数:
这里我们打印一下,看看数据对不对!
测试结果:
可以看出,数据是完全没问题的。
不过现在问题又来了,怎么把这俩个字典快速存入到数据库中呢?
其实办法有很多,其中最快的就是直接塞进去,不过这样的风险也很明显,字段要全部对应上!否则就报错。
这里我们要对want表的外键user_info特殊处理一下,让其为刚添加成功的userinfo表内容:
好,写到这我们开始测试!
添加纲手。点击新增按钮后。
数据库中可以看到:
好,到这里,新增功能看来就实现了。不过虽然功能实现了,但是仍有一些异常没有处理,比如年龄写个字符串,就会存不进去。不过这种小问题,我们在之后的最终章节进行优化即可。