今天终于解决了一个困扰很久的问题,在使用Vue进行前端项目的搭建时,通常采用axios作为数据传输的工具,我们会发现,使用get请求一切都正常,但是使用post请求,会发生一些奇怪的事情。这次我使用的是python的web框架django,但道理都是一样的,我们可以通过修改前端来处理,也可以通过修改后端来处理。

 

一、我们先用GET方法写一个小小的登陆请求:

下面是Vue前端的代码

loginsubmit(){
    console.log(this.UserName+this.UserPwd);
    axios.get("http://localhost:8000/baseapi/login",{
        params:{
            userid:"zhonghangAlex",
            password:"woaini123"
        }
    }).then((response)=>{
        let res = response.data;
        console.log(res);
        this.$router.push('/user/userindex')
    });
}

结果发现请求是正常的:

后台的接口是这样的:

def login(request):
    if request.method == 'POST':
        return HttpResponse('{"status":"0","message":"请使用GET请求","result":"null"}')
    elif request.method == 'GET':
        req_userid = request.GET.get('userid')
        req_password = request.GET.get('password')
        if req_userid and req_password:
            try:
                login_obj = models.T_user_info.objects.filter(userid = req_userid,password = req_password).first()
            except:
                return HttpResponse('{"status":"0","message":"用户名或密码错误","result":"null"}')
            else:
                request.session['userid'] = login_obj.userid
                request.session['power'] = login_obj.power
                return HttpResponse('{"status":"1","message":"登陆成功","result":{"power":"'+str(login_obj.power)+'"}}')
        else:
            HttpResponse('{"status":"0","message":"输入有误,请重新输入","result":"null"}')

后台可以获取get请求的键值对,简单而言:

?userid=zhonghangAlex&password=woaini123这样的字段传送过去,后端进行键值对获取,下面是后台获取数据的核心代码

req_userid = request.GET.get('userid')
req_password = request.GET.get('password')

一切都很正常,但是登陆的请求为了保障安全性,应该采用post,这个时候我们再看看会发生什么?

 

二、使用POST方法写一个登陆请求:

下面是Vue前端的代码:

loginsubmit(){
   console.log(this.UserName+this.UserPwd);
   axios.post("http://localhost:8000/baseapi/login",{
       userid:"zhonghangAlex",
       password:"woaini123"
   }).then((response)=>{
       let res = response.data;
       console.log(res);
       this.$router.push('/user/userindex')
   });

}

结果这个时候请求变成了这样:

数据变成了类json进行传输而且数据请求的方式也发生了变化,上面变成了Request Payload

这个时候数据无法解析成?userid=zhonghangAlex&password=woaini123这样的字段,我们如果使用:

req_userid = request.POST.get('userid')
req_password = request.POST.get('password')

这样的后台数据获取方式,就会发生异常,那么应该如何处理呢?

 

三、两种解决方案

(一)前端解决:

         使用URLSearchParams传递参数,网上大多数都是这样的方法:

import axios = import('axios');
let param = new URLSearchParams();
param.append("userid", "zhonghangAlex");
param.append("password", "woaini123");

axios.post('xxxxx', param).then(.....)

       果然我们传递的参数就正常了,后台可以获取到相应的键值对,但是使用这样的方法有两点坏处,第一个是前端请求每一个字段都append会很麻烦,第二个就是这个对象它不兼容IE和Edge甚至在360浏览器都会挂掉,我曾经尝试过IE11版本都不行,提示这个对象缺失。所以我们最好的办法就是在后端做一个处理!

(二)后端解决

      经过查阅大量的资料,我发现,正如我前面说过的,get请求发送的是很标准的键值对,数据可以被后端解析,那为什么后端不能解析json格式的post数据呢?按照这个思路我研究了下request的api,发现这个json是封装到body中的,所以,在后端的调用应该使用body对象。话不多说,直接上代码:

def login(request):
    if request.method == 'GET':
        return HttpResponse('{"status":"0","message":"请使用post请求","result":"null"}')
    elif request.method == 'POST':
        req = json.loads(request.body)
        req_userid = req['userid']
        req_password = req['password']
        if req_userid and req_password:
            try:
                login_obj = models.T_user_info.objects.filter(userid = req_userid,password = req_password).first()
            except:
                return HttpResponse('{"status":"0","message":"用户名或密码错误","result":"null"}')
            else:
                request.session['userid'] = login_obj.userid
                request.session['power'] = login_obj.power
                return HttpResponse('{"status":"1","message":"登陆成功","result":{"power":"'+str(login_obj.power)+'"}}')
        else:
            HttpResponse('{"status":"0","message":"输入有误,请重新输入","result":"null"}')

这就是后端处理的办法,核心的代码是:

req = json.loads(request.body)
req_userid = req['userid']
req_password = req['password']

这样req_userid和req_password就分别存储了前端发来的数据。

在前端时间我使用node的时候也是一样的,post请求的数据会封装到request的body中,所以不管你采用什么样的语言写后台,这个问题总是可以在后台解决的。

 

 

欢迎我的微信公众号【前端栈无不胜】

会定期推送Js、Vue、React、Node、算法、面试等大前端技术博客、精选文章!

Logo

前往低代码交流专区

更多推荐