Vue中axiosフォームPOST提出
5666 ワード
Vueを使い始めたばかりで、中の穴が次から次へと続いていて、今日はaxios POSTパスの問題に遭遇しました.
バックエンドの要求はフォームで提出された形式で彼にデータを与えるため、
リクエストにパラメータを渡し、公式ドキュメントのフォーマットで操作を開始する必要があります.コードは次のとおりです.
注意:ここは公式の例です:クリックしてリンクを開きます
コンソールを開けて、400を報告して、エラーメッセージは:伝達するパラメータは存在しないで、しかし要求の中でパラメータを見て、ただパラメータのフォーマットはRequest Payloadで、具体的に何を理解していないで、要するにパラメータのフォーマットが間違っていることを知っていて、資料を調べて2つの解決方法を見つけて、コードは以下の通りです:
1.es 6表記
2.
参照先:https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
テストした結果,この2つの方法はいずれも可能である.
この問題が解決したばかりで、楽屋は私に1つの問題を投げて、私のパラメータの中で配列を伝えなければならなくて、私は直接上のやり方で1馬平川に着くことができると思って、しかし現実は残酷で、崩壊します!公式ドキュメントを表示すると、qsのメソッドでindicesをfalseに設定するだけで、この解決も非常に簡単です.
qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
詳細qs機能リファレンス:https://www.npmjs.com/package/qs
vueフレームワークではaxiosを使用してajaxリクエストを送信することをお勧めします.前に、vueコンポーネントでaxiosを使用する方法を説明するブログを書きました.しかし、以前はgetリクエストで遊んでいたが、今は自分でブログを作るときにpostメソッドを使っていたので、バックグラウンド(node.js)にはフロントからのパラメータが全く取れないことに気づいた.それから探求して、やっと問題の所在を発見しました.
post提出データの4種類の符号化方式1.アプリケーション/x-www-form-urlencodedこれは最も一般的なpost符号化方式であり、一般的なフォームコミットはデフォルトでこの方式でコミットされます.ほとんどのサーバ言語は、この方法をサポートしています.PHPでは、$POST["key"]でkeyの値を取得し、nodeでquerystringミドルウェアを使用してパラメータを分離できます.
2.multipart/form-dataこれも比較的一般的なpostデータフォーマットで、フォームでファイルをアップロードするときは、formフォームのenctype属性またはajaxのcontentTypeパラメータをmultipart/form-dataに等しくする必要があります.この符号化フォーマットを使用すると、バックグラウンドに送信されるデータは、このような異なるフィールドで始まり、次にコンテンツ記述情報、最後にフィールドの具体的な内容である.ファイルが転送されている場合は、ファイル名とファイルタイプ情報も含まれます.
3.アプリケーション/json axiosのデフォルトコミットでは、このフォーマットが使用されます.この符号化方式を用いると,バックグラウンドに渡されるのはシーケンス化されたjson文字列である.アプリケーション/jsonとアプリケーション/x-www-form-urlencodedが送信したデータを比較することができます.まずアプリケーション/jsonです.次にアプリケーション/x-www-form-urlencodedです.ここではアプリケーション/x-www-form-urlencodedがバックグラウンドにアップロードされたデータがkey-value形式で組織されていることが明らかになります.アプリケーション/jsonは直接json文字列です.アプリケーション/jsonを処理するときにバックグラウンドがアプリケーション/x-www-form-urlencodedに対処する方法を採用している場合、問題が発生します.例えばバックグラウンドnode.jsは依然としてアプリケーション/x-www-form-urlencodedに対処する方法を採用しており、querystring.parse(decodeURIComponent(data))の後に得られたデータはこのような時にまたquerystring.parse(decodeURIComponent(data)).keyはundefinedしか取得できません
4.text/xml残りの符号化フォーマットはtext/xmlで、このフォーマットはあまり使ったことがありません.
解決策axios postメソッドがapplication/jsonフォーマットでデータを符号化するのがデフォルトであることを知っている以上、解決策は2つあります.1つはバックグラウンドで受信パラメータを変更する方法であり、もう1つはaxios postメソッドの符号化フォーマットをapplication/x-www-form-urlencodedに変更することであり、バックグラウンドで何の変更も必要ありません.まず、第1の解決策vueコンポーネントにおいて、axiosがpost要求を送信するコードは以下の通りである.
このときコンソールNetwork Headersの中の情報はこのようなバックグラウンド受信データがbody-parserミドルウェアに依存する必要があるので、事前に組み立てておき、バックグラウンドコードでbody-parserという断面図を引用し、機能するコードはconst bodyParser=require(「body-parser」)にすぎない.次にルーティングでbody-parserを使用します
このとき、現局がpost要求を送信と、バックグラウンドコンソールにreqが印刷する.bodyこのときreq.body.名前またはreq.body.passwordは対応する値を得ることができます.この方法は比較的簡単で、フロントであまり修正する必要もないので、この方法をお勧めします.
第2の解決方法は、具体的には以下のようなフロントエンドである.
その中で重要な役割を果たしているのはheadersとtransformRequestです.headersは、送信されるカスタムリクエストヘッダを設定します.TransformRequestでは、サーバに送信する前にリクエストデータを変更できます.このように操作すると、バックグラウンドquerystring.parse(decodeURIComponent(data))は{name:'w',password:'w'}のようなオブジェクトを取得します.バックグラウンドコードは次のとおりです.
この方法は明らかに最初の方法より少し面倒だが、バックグラウンドであまり処理する必要はない.だから具体的な操作はやはり実際の状況によって決定しなければならない.
バックエンドの要求はフォームで提出された形式で彼にデータを与えるため、
リクエストにパラメータを渡し、公式ドキュメントのフォーマットで操作を開始する必要があります.コードは次のとおりです.
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});注意:ここは公式の例です:クリックしてリンクを開きます
コンソールを開けて、400を報告して、エラーメッセージは:伝達するパラメータは存在しないで、しかし要求の中でパラメータを見て、ただパラメータのフォーマットはRequest Payloadで、具体的に何を理解していないで、要するにパラメータのフォーマットが間違っていることを知っていて、資料を調べて2つの解決方法を見つけて、コードは以下の通りです:
1.es 6表記
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url,
};
axios(options);2.
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);参照先:https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
テストした結果,この2つの方法はいずれも可能である.
この問題が解決したばかりで、楽屋は私に1つの問題を投げて、私のパラメータの中で配列を伝えなければならなくて、私は直接上のやり方で1馬平川に着くことができると思って、しかし現実は残酷で、崩壊します!公式ドキュメントを表示すると、qsのメソッドでindicesをfalseに設定するだけで、この解決も非常に簡単です.
qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
詳細qs機能リファレンス:https://www.npmjs.com/package/qs
vueフレームワークではaxiosを使用してajaxリクエストを送信することをお勧めします.前に、vueコンポーネントでaxiosを使用する方法を説明するブログを書きました.しかし、以前はgetリクエストで遊んでいたが、今は自分でブログを作るときにpostメソッドを使っていたので、バックグラウンド(node.js)にはフロントからのパラメータが全く取れないことに気づいた.それから探求して、やっと問題の所在を発見しました.
post提出データの4種類の符号化方式1.アプリケーション/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に等しくする必要があります.この符号化フォーマットを使用すると、バックグラウンドに送信されるデータは、このような異なるフィールドで始まり、次にコンテンツ記述情報、最後にフィールドの具体的な内容である.ファイルが転送されている場合は、ファイル名とファイルタイプ情報も含まれます.
3.アプリケーション/json axiosのデフォルトコミットでは、このフォーマットが使用されます.この符号化方式を用いると,バックグラウンドに渡されるのはシーケンス化されたjson文字列である.アプリケーション/jsonとアプリケーション/x-www-form-urlencodedが送信したデータを比較することができます.まずアプリケーション/jsonです.次にアプリケーション/x-www-form-urlencodedです.ここではアプリケーション/x-www-form-urlencodedがバックグラウンドにアップロードされたデータがkey-value形式で組織されていることが明らかになります.アプリケーション/jsonは直接json文字列です.アプリケーション/jsonを処理するときにバックグラウンドがアプリケーション/x-www-form-urlencodedに対処する方法を採用している場合、問題が発生します.例えばバックグラウンドnode.jsは依然としてアプリケーション/x-www-form-urlencodedに対処する方法を採用しており、querystring.parse(decodeURIComponent(data))の後に得られたデータはこのような時にまたquerystring.parse(decodeURIComponent(data)).keyはundefinedしか取得できません
4.text/xml残りの符号化フォーマットはtext/xmlで、このフォーマットはあまり使ったことがありません.
解決策axios postメソッドがapplication/jsonフォーマットでデータを符号化するのがデフォルトであることを知っている以上、解決策は2つあります.1つはバックグラウンドで受信パラメータを変更する方法であり、もう1つはaxios postメソッドの符号化フォーマットをapplication/x-www-form-urlencodedに変更することであり、バックグラウンドで何の変更も必要ありません.まず、第1の解決策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.名前またはreq.body.passwordは対応する値を得ることができます.この方法は比較的簡単で、フロントであまり修正する必要もないので、この方法をお勧めします.
第2の解決方法は、具体的には以下のようなフロントエンドである.
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);
});
});この方法は明らかに最初の方法より少し面倒だが、バックグラウンドであまり処理する必要はない.だから具体的な操作はやはり実際の状況によって決定しなければならない.