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