ホームページ >ウェブフロントエンド >Vue.js >vuejs はどのようにしてバックエンド インターフェイスをリクエストしますか?
vuejs はどのようにしてバックエンド インターフェイスをリクエストしますか?
- 藏色散人オリジナル
- 2021-11-02 14:51:3710303ブラウズ
vuejs がバックグラウンド インターフェイスをリクエストする方法: 1. axios をインストールして導入します; 2. get または post リクエストを使用します; 3. vue-resource をインストールして導入します; 4. vue-resource を使用して送信しますクロスドメインリクエスト。
この記事の動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
vuejs はどのようにしてバックグラウンド インターフェイスをリクエストしますか?
vue リクエストのバックグラウンド インターフェイス メソッド:
ue は、AJAX リクエストの直接送信をサポートしていないため、vue-resource などのプラグインを使用して実装する必要があります。そしてアクシオス。
1. axios を使用して AJAX リクエストを送信します:
1. axios をインストールして導入します:
1) npm install axios -S (axios コンポーネントを直接ダウンロードします。ダウンロードが完了すると、axios .js はnode_modules\axios\dist に保存されます)、最初に main.js に axios を導入します。axios コマンドを他のコンポーネントで使用できない場合は、「axios」からインポート axios をこのファイルに追加します。 axios を Vue のプロトタイプ属性として書き換えることができます: Vue.prototype.$http=axios. これらの 2 行のコードを main.js に追加した後、コンポーネントのメソッドで this.$http コマンドを直接使用できます。
2) axios.min.js ファイルをインターネットから直接ダウンロードし、スクリプト src
2 を通じてファイルを導入します。リクエストを送信します:
1) リクエストの形式を取得します:
a: axios([options]) (この形式では、すべてのデータが直接オプションに書き込まれます。オプションは実際には辞書です)
b: axios.get(url[,options] );
<script>
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
},
methods:{
send(){
axios({//格式a
method:'get',
url:'http://www.baidu.com?name=tom&age=23'
}).then(function(resp){
console.log(resp.data);
}).catch(resp => {
console.log('请求失败：'+resp.status+','+resp.statusText);
});
},
sendGet(){//格式b
axios.get('server.php',{
params:{
name:'alice',
age:19
}
})
.then(resp => {
console.log(resp.data);
}).catch(err => { //
console.log('请求失败：'+err.status+','+err.statusText);
});
},
}
});
</script>2) 投稿リクエストの形式:
a: axios.post(url,data,[options]);
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
},
methods:{
sendPost(){
// axios.post('server.php',{
// name:'alice',
// age:19
// }) //该方式发送数据是一个Request Payload的数据格式，一般的数据格式是Form Data格式，所有发送不出去数据
// axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据
axios.post('server.php',this.user,{ //方式2通过transformRequest方法发送数据，本质还是将数据拼接成字符串
transformRequest:[
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&';
}
return params;
}
]
})
.then(resp => {
console.log(resp.data);
}).catch(err => {
console.log('请求失败：'+err.status+','+err.statusText);
});
},
}
});3) クロスドメイン リクエストの送信:
a: 注: axios 自体はクロスドメイン リクエストの送信をサポートしておらず、対応する API も提供していません。作者は axios でクロスドメイン リクエストの送信のサポートを追加する予定はないため、3 番目のリクエストのみを使用できます。 -party library
b: vue-resource を使用してクロスドメインリクエストを送信する
c: vue-resource をインストールして
npm info vue-resource #查看vue-resource 版本信息 cnpm install vue-resource -S #等同于cnpm install vue-resource -save
d を導入する: 基本的な使い方 (これを使用します。 $http でリクエストを送信します)
this.$http.get(url, [options]) this.$http.head(url, [options]) this.$http.delete(url, [options]) this.$http.jsonp(url, [options]) this.$http.post(url, [body], [options]) this.$http.put(url, [body], [options]) this.$http.patch(url, [body], [options])
2. vue-resource がリクエストを送信します:
1. vue-resource メソッドをインストールして導入します:
1) npm install axios - S (axios コンポーネントを直接ダウンロードします。ダウンロードは完了します。その後、axios.js は、node_modules\axios\dist に格納されます)、ルーティングを変更することで導入されます。index.js: add import VueResource from 'vue-resource' と Vue. use(VueResource) toindex.js
2) axios.min.js ファイルをインターネットから直接ダウンロードし、スクリプト src
2 を通じてファイルを導入します。ポスト リクエスト メソッド:
1) this.$http({ method:'POST',
url:'/a/b', //接口路径 data:{'a':'123124'}, //参数
headers: {"X-Requested-With": "XMLHttpRequest"},
}).then((res) => { if(res.body.code == "0") {
this.data= res.body.result;
} else {
this.warnMessage = "获取班级失败";
this.colorMessage = "red"
}
}).catch(err => {
this.warnMessage = "访问接口失败";
this.colorMessage = "red"
})
2）this.$http.post('../a/b/c', {}, {
header: {},
emulateJSON: true
}).then((res) => {
if(res.body.code == "0") {
this.data= res.body.result;
} else {
this.warnMessage = "获取班级失败";
this.colorMessage = "red"
}
}).catch(err => {
this.warnMessage = "访问接口失败";
this.colorMessage = "red"
})2. Get リクエストのメソッドは post と同じで、上記の post を get
に変更するだけです。 推奨: "最新の 5 vue.js ビデオ チュートリアル セレクション "
以上がvuejs はどのようにしてバックエンド インターフェイスをリクエストしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。