axios用post提交数据到后台的格式和问题处理

原創 全栈wushen 2020-06-16 14:06

文章目录

post提交数据的四种编码方式
1.application/x-www-form-urlencoded

这应该是最常见的post编码方式，一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中，可以用$_POST[“key”]的方式获取到key的值，在node中我们可以使用querystring中间件对参数进行分离

app.post("/server",function(req,res){
    req.on("data",function(data){
        let key=querystring.parse(decodeURIComponent(data)).key;
        console.log("querystring:"+key)
    });
});
2.multipart/form-data

这也是一种比较常见的post数据格式，我们用表单上传文件时，必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。使用这种编码格式时发送到后台的数据长得像这样子在这里插入图片描述

不同字段以--boundary开始，接着是内容描述信息，最后是字段具体内容。如果传输的是文件，还要包含文件名和文件类型信息

3.application/json

axios默认提交就是使用这种格式。如果使用这种编码方式，那么传递到后台的将是序列化后的json字符串。我们可以将application/json与application/x-www-form-urlencoded发送的数据进行比较
首先是application/json：在这里插入图片描述

接着是application/x-www-form-urlencoded：
在这里插入图片描述

这里可以明显看出application/x-www-form-urlencoded上传到后台的数据是以key-value形式进行组织的，而application/json则直接是个json字符串。如果在处理application/json时后台还是采用对付application/x-www-form-urlencoded的方式将会产生问题。例如后台node.js依然采用之前对付application/x-www-form-urlencoded的方法，那么querystring.parse(decodeURIComponent(data))之后得到的数据是这样子的
在这里插入图片描述

这个时候再querystring.parse(decodeURIComponent(data)).key只能获取到undefined

4.text/xml

剩下的一种编码格式是text/xml，这种格式用的少

解决方法

既然我们知道axios post方法默认使用application/json格式编码数据，那么解决方案就有两种，一是后台改变接收参数的方法，另一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded，这样就不需要后台做什么修改了。
第一种解决方法
vue组件中，axios发送post请求的代码如下

this.$axios({
    method:"post",
    url:"/api/haveUser",
    data:{
        name:this.name,
        password:this.password
    }
}).then((res)=>{
    console.log(res.data);
})

此时控制台Network Headers里面的信息是这样子的在这里插入图片描述

后台接收数据需要依赖body-parser中间件，我们事先装好，接着在后台代码中引用body-parser
在这里插入图片描述

这张截图中，发挥作用的代码仅仅是const bodyParser=require("body-parser");
接下来在路由中使用body-parser

app.post("/api/haveUser",bodyParser.json(),function(req,res){
    console.log(req.body);
    let haveUser=require("../api/server/user.js");
    haveUser(req.body.name,req.body.password,res);
});

这时，当前台发送post请求之后，后台控制台中就会打印出req.body
在这里插入图片描述

这时，通过req.body.name或者req.body.password就能拿到对应的值。
这种方法比较简单，也不需要前台做过多修改，推荐使用这种方法。

第二种解决方法，具体操作如下
前端

this.$axios({
    method:"post",
    url:"/api/haveUser",
    headers:{
        'Content-type': 'application/x-www-form-urlencoded'
    },
    data:{
        name:this.name,
        password:this.password
    },
    transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
}).then((res)=>{
    console.log(res.data);
})

其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前，修改请求数据。这样操作之后，后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: 'w', password: 'w' }的对象。后台代码如下

app.post("/api/haveUser",function(req,res){
      let haveUser=require("../api/server/user.js");
      req.on("data",function(data){
          let name=querystring.parse(decodeURIComponent(data)).name;
          let password=querystring.parse(decodeURIComponent(data)).password;
          console.log(name,password)
          haveUser(name,password,res);
      });
});

这种方法明显就要比第一种麻烦一点，但不需要后台做过多处理。所以具体操作还是得根据实际情况决定。

案例 :

首先 我们要清楚axios post提交方式默认数据提交格式为application/json ,如下：
在前台写出相应post提交数据的代码，在这里插入图片描述
然后打日志，可以在浏览器控制台，很清楚的观察出提交的数据格式：
在这里插入图片描述
针对这种情况，我写了两种方法。
方法一：利用vue qs模块
1、首先是在cmd找到项目根目录，输入npm install qs，然后在main.js中导入qs模块，并交给vue使用

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

2、使用qs，对data数据进行格式转换,代码如下：

method:'post',
url:'http://localhost:8081/login',
data:this.$qs.stringify ( {user: this.user,pass: this.pwd})

然后打日志，在浏览器控制台观察：

在这里插入图片描述

data提交的数据格式已经转变，这个为普通post提交数据的格式。这样后台处理起来就很简单了。就是获取数据后利用querystring.parse解析数据。

前台相应模块导入代码：

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

前台组件代码（只写了登陆的方法，可以参照登录方法写下注册）：

<template>
  <div>
    用户：<input type="text" id="user" v-model="users"/><br>
    密码：<input type="password" id="pass" v-model="pwd"/><br>
    <input type="button" value="注册" id="btn_reg">
    <input type="button" value="登陆" id="btn_login" @click="log">
  </div>
</template>
 
<script>
  export default {
    name: '',
    data(){
      return {
        users:'',
        pwd:'',
      }
    },
    methods:{
      async log(){
        console.log(this.users)
        
        let a = await this.ajax({
          method:'post',
          url:'http://localhost:8081/login',
          data: this.$qs.stringify({user: this.users,pass: this.pwd})
        })
        
        //相应日志：
        console.log('a',a)
        console.log('a.data',a.data)
        console.log(this.users)
        
        if(!a.data['err']){
          console.log('success')
          //路由跳转
          this.$router.push({ path: '/list' })
        }
  }}}
</script>
<style scoped> 
</style>

后台代码(node 服务器)：

const http=require('http');
const mysql=require('mysql');
const fs=require('fs');
const url=require('url');
const zlib=require('zlib');
const crypto=require('crypto');
const querystring=require('querystring');
 
const _key='sadfslekrtuew5iutoselgdtjiypoydse4ufhs.edtyo;s8te4arfeliawkfhtsie5tlfia;sefdshroiupeoutwyeli5gurse;ihf';
 
function md5(str){
  let obj=crypto.createHash('md5');
 
  obj.update(str);
 
  return obj.digest('hex');
}
//加密
function md5_2(str){
  return md5(md5(str)+_key);
}
//连接数据库
let db=mysql.createPool({host: 'localhost', port: 3306, user: 'root', password: '', database: 'a'});
 
let server=http.createServer((req, res)=>{
 
  //跨域处理
  res.writeHead(200,{
    'Access-Control-Allow-Origin': '*',
	'Access-Control-Allow-Headers':'content-type'
    });
	
  //get
  let {pathname, query}=url.parse(req.url, true);
  
  console.log('query',query);
  
  //post
  let str='';
  req.on('data',data=>{
	  console.log('str0:',str);
	  str+=data
	  console.log('str1:',str);
  });
  console.log('str2:',str); 
  req.on('end', ()=>{
	  //解析数据
    let post=querystring.parse(str);
	console.log('str3:',str); 
	console.log('post1:',post);
    //解构获取到的数据
	let {user, pass}=str?post:query;
	console.log(user);
  switch(pathname){
    //接口
    case '/reg':
      //校验
      if(!user){
        res.write('{"err": 1, "msg": "username can\'t be null"}');
        res.end();
      }else if(!pass){
        res.write('{"err": 1, "msg": "password can\'t be null"}');
        res.end();
      }else if(!/^\w{4,16}$/.test(user)){
        res.write('{"err": 1, "msg": "username is invaild"}');
        res.end();
      }else if(/['|"]/.test(pass)){
        res.write('{"err": 1, "msg": "password is invaild"}');
        res.end();
      }else{
        db.query(`SELECT * FROM usertable WHERE username='${user}'`, (err, data)=>{
          if(err){
            res.write('{"err": 1, "msg": "database error"}');
            res.end();
          }else if(data.length>0){
            res.write('{"err": 1, "msg": "this username exsits"}');
            res.end();
          }else{
            db.query(`INSERT INTO usertable (ID,username,password) VALUES(0,'${user}','${md5_2(pass)}')`, (err, data)=>{
              if(err){
                res.write('{"err": 1, "msg": "database error"}');
                res.end();
              }else{
                res.write('{"err": 0, "msg": "success"}');
                res.end();
              }
            });
          }
        });
      }
      break;
    case '/login':
      //校验
      if(!user){
        res.write('{"err": 1, "msg": "username can\'t be null"}');
        res.end();
      }else if(!pass){
        res.write('{"err": 1, "msg": "password can\'t be null"}');
        res.end();
      }else if(!/^\w{4,16}$/.test(user)){
        res.write('{"err": 1, "msg": "username is invaild"}');
        res.end();
      }else if(/['|"]/.test(pass)){
        res.write('{"err": 1, "msg": "password is invaild"}');
        res.end();
      }else{
        db.query(`SELECT * FROM usertable WHERE username='${user}'`, (err, data)=>{
          if(err){
            res.write('{"err": 1, "msg": "database error"}');
            res.end();
          }else if(data.length==0){
            res.write('{"err": 1, "msg": "no this user"}');
            res.end();
          }else if(data[0].password!=md5_2(pass)){
            res.write('{"err": 1, "msg": "username or password is incorrect"}');
            res.end();
          }else{
            res.write('{"err": 0, "msg": "success"}');
            res.end();
          }
        });
      }
      break;
    default:
      //缓存      TODO
      //静态文件
      let rs=fs.createReadStream(`www${pathname}`);
      let gz=zlib.createGzip();
 
      res.setHeader('content-encoding', 'gzip');
      rs.pipe(gz).pipe(res);
 
      rs.on('error', err=>{
        res.writeHeader(404);
        res.write('Not Found');
        res.end();
      });
  }
  });
});
server.listen(8081);

方法二：前台不改变提交的数据格式，后台解析
1、因为前台不引用模块，则提交到后台的数据就是json格式，后台接说到不能直接解构，这里我还是利用querystring.parse对数据进行解析，但是在解析数据前，首先得对数据进行处理。

2、我们要了解querystring.parse的用法，根据官方文档
在这里插入图片描述

对于user=AAAA&pass=123456 会解析成 { user: ‘AAAA’, pass: ‘123456’ }。我们需要的就是{ user: ‘AAAA’, pass: ‘123456’ }这种格式的数据。

3、我们先观察后台接收的数据转成字符串形式为：{“user”:“AAAA”,“pass”:“123456”}，不能直接对其进行解析。为了得到类似user=AAAA&pass=123456 的数据形式，我们得去除{}和"，利用replace()去除。去除后得到 user:AAAA,pass:123456，与user=AAAA&pass=123456进行对比发现，这里只是将=换成：、&换成，。到这里问题就变的非常简单，利用querystring.parse相应参数设置，就可以对数据进行解析。

后台代码：

const http=require('http');
const mysql=require('mysql');
const fs=require('fs');
const url=require('url');
const zlib=require('zlib');
const crypto=require('crypto');
const querystring=require('querystring');
 
const _key='sadfslekrtuew5iutoselgdtjiypoydse4ufhs.edtyo;s8te4arfeliawkfhtsie5tlfia;sefdshroiupeoutwyeli5gurse;ihf';
 
function md5(str){
  let obj=crypto.createHash('md5');
 
  obj.update(str);
 
  return obj.digest('hex');
}
 
function md5_2(str){
  return md5(md5(str)+_key);
}
 
let db=mysql.createPool({host: 'localhost', port: 3306, user: 'root', password: '', database: 'a'});
 
let server=http.createServer((req, res)=>{
 
  
  res.writeHead(200,{
    'Access-Control-Allow-Origin': '*',
	'Access-Control-Allow-Headers':'content-type'
    });
	
  let {pathname, query}=url.parse(req.url, true);
 
  console.log('1',query);
  let str='';
  req.on('data',data=>{
	  console.log('str0:',str);
	  str+=data;
	 
  });
  console.log('str2:',str); 
  req.on('end', ()=>{
	//去除{}、"
	str=str.replace('{','');
	str=str.replace('}','');
	str=str.replace(/"/g,'');
	console.log('str3:',str);
	//解析数据
    let post=querystring.parse(str,',',':');
	
	let {user, pass}=str?post:query;
	console.log(user);
  switch(pathname){
    //接口
    case '/reg':
      //校验
      if(!user){
        res.write('{"err": 1, "msg": "username can\'t be null"}');
        res.end();
      }else if(!pass){
        res.write('{"err": 1, "msg": "password can\'t be null"}');
        res.end();
      }else if(!/^\w{4,16}$/.test(user)){
        res.write('{"err": 1, "msg": "username is invaild"}');
        res.end();
      }else if(/['|"]/.test(pass)){
        res.write('{"err": 1, "msg": "password is invaild"}');
        res.end();
      }else{
        db.query(`SELECT * FROM usertable WHERE username='${user}'`, (err, data)=>{
          if(err){
            res.write('{"err": 1, "msg": "database error"}');
            res.end();
          }else if(data.length>0){
            res.write('{"err": 1, "msg": "this username exsits"}');
            res.end();
          }else{
            db.query(`INSERT INTO usertable (ID,username,password) VALUES(0,'${user}','${md5_2(pass)}')`, (err, data)=>{
              if(err){
                res.write('{"err": 1, "msg": "database error"}');
                res.end();
              }else{
                res.write('{"err": 0, "msg": "success"}');
                res.end();
              }
            });
          }
        });
      }
      break;
    case '/login':
      //校验
      if(!user){
        res.write('{"err": 1, "msg": "username can\'t be null"}');
        res.end();
      }else if(!pass){
        res.write('{"err": 1, "msg": "password can\'t be null"}');
        res.end();
      }else if(!/^\w{4,16}$/.test(user)){
        res.write('{"err": 1, "msg": "username is invaild"}');
        res.end();
      }else if(/['|"]/.test(pass)){
        res.write('{"err": 1, "msg": "password is invaild"}');
        res.end();
      }else{
        db.query(`SELECT * FROM usertable WHERE username='${user}'`, (err, data)=>{
          if(err){
            res.write('{"err": 1, "msg": "database error"}');
            res.end();
          }else if(data.length==0){
            res.write('{"err": 1, "msg": "no this user"}');
            res.end();
          }else if(data[0].password!=md5_2(pass)){
            res.write('{"err": 1, "msg": "username or password is incorrect"}');
            res.end();
          }else{
            res.write('{"err": 0, "msg": "success"}');
            res.end();
          }
        });
      }
      break;
    default:
      //缓存      TODO
      //静态文件
      let rs=fs.createReadStream(`www${pathname}`);
      let gz=zlib.createGzip();
 
      res.setHeader('content-encoding', 'gzip');
      rs.pipe(gz).pipe(res);
 
      rs.on('error', err=>{
        res.writeHeader(404);
        res.write('Not Found');
        res.end();
      });
  }
  });
});
server.listen(8081);

这里的前台就不引用qs模块了。

数据库表格：
在这里插入图片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

【工作笔记0023】Vue 中使用 axios 对 http 请求进行封装

將以下代碼放入 vue 項目結構中的 utils 文件夾 http.js 文件中： 'use strict' import axios from 'axios' import qs from 'qs' //import storage

adamlevine7 2020-06-15 05:00:52

axios上传图片后台出现the request was rejected because no multipart boundary was found

//使用formdata上傳 不需要進行序列化 qs.stringify(params) export function uploadImg(params) { return service({ url: 'm

原創 2021-01-30 09:32:42

Axios--基础知识

下載使用方式： npm: $ npm install axios cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 案例（GET以及POST請求

GQ_cyan 2020-07-08 11:50:38

Axios--post请求 后台接受不到数据 解决方案

直奔主題   經常會有同學說格式寫的非常正確，變量名也無偏差，可後臺就是獲取不到數據。文檔中的post請求是這樣的，傳參是以對象的形式 axios.post('url', { firstName: 'Fred',

周士森 2020-07-01 19:12:56

Axios学习(2)---axios常用请求方法

Axios學習(2)—axios常用請求方法 一、axios常用的請求方法 方法列舉：get, post, put, patch, delete get：一般用戶獲取數據 post：一般用於表單提交與文件上傳 patch：更新數

ZYN5431 2020-06-21 23:12:13

Axios学习(3)---axio实例

Axios學習(3)—axio實例 一、axios實例的創建 比如：後端接口地址有多個（www.test.com、www.example.com），並且超時時長不同（1000ms、2000ms），這個時候，我們可以創建實例。 思路

ZYN5431 2020-06-21 23:12:12

Axios学习(4)---axios拦截器、错误处理与取消请求

Axios學習(4)—axios攔截器、錯誤處理與取消請求 一、攔截器 什麼攔截器？ 在請求前或響應被處理前攔截他們，分爲兩種：請求攔截器與響應攔截器 攔截器的使用方法 請求攔截器 // 請求攔截器

ZYN5431 2020-06-21 23:12:12

Axios学习(1)---介绍与使用

一、Axios介紹 1、Axios是什麼？ Axios是一個基於promise的HTTP庫，類似於jQuery的ajax，用於http請求。可以應用於瀏覽器端和node.js，既可以用於客戶端，也可以用於node.js編寫的服務端。 2、

ZYN5431 2020-06-21 23:12:12

Axios学习(5)---axios请求的封装与使用

文章目錄Axios學習(5)---axios請求的封裝與使用思路分析第一步：新建 *src/service/contactApi.js* 文件第二步：新建 *src/service/http.js* 文件第三步：在入口文件中導入

ZYN5431 2020-06-21 23:12:08

Axios使用手册

簡介 Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。 Features 從瀏覽器中創建 XMLHttpRequests 從 node.js 創建 http 請求 支持 Pro

echone_wenqian 2020-06-19 21:24:56

Axios 使用简介

原文地址：https://www.jianshu.com/p/27a5626973e4 Axios是一個基於promise的HTTP庫，可以用在瀏覽器和Node.js中。axios具有特徵： 從瀏覽器中創建 XMLHttpRequest

匠心精神 2020-06-14 04:52:28

BFF HTTP框架选型

小肥马 2020-05-21 20:13:11

Flask+Axios+jQuery构建前后端通信的小例子

王大鱼 2020-05-10 19:05:50

axios get post请求 传递参数

CodeFarmer___ 2020-04-30 13:11:29

Vue基于Axios网络请求封装

CodeFarmer___ 2020-04-30 13:11:29