1.在vue2中引入axios

axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post请求。

首先在vue项目中找到main.js

加入以下代码完成全局引入

import axios from 'axios'
Vue.prototype.$axios = axios

2.发送请求

现在即可在需要发送请求的地方,使用this.$axios(url,data)发送请求

this.$axios.post('http://localhost:8000/login',this.ruleForm).then(res => {
              console.log(res)
            })

这里使用axios发送一个post请求,将ruleForm这个表单作为数据,接受方为本地的Django项目

3.Django中关于axios请求的接收

注意:

原生的django对于content-type为application/x-www-form-urlencoded 的ajax请求,且data经过urlencoded编码,其数据是放在request.POST(request.body中也会有数据,但是格式得自己重新反序列化)中的。,data若无编码直接上传,会放在request.body中,而request.POST中是错误格式的数据。

用原生django只能通过request.body获取数据,而这时的request.body为bytes类型,可通过json.loads(request.body)获取前端传过来的字典

body中是byte string,可能要解码成unicode string才能使用

在Django中做如下配置,即可拿到数据

body = json.loads(request.body.decode('utf-8'))
uname = body['username']

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐