この記事では、vue3 フロントエンド プロジェクトのデータを取得するためにバックエンド インターフェイスをリクエストする方法を説明します。比較的簡単ですが、内容は以下の通りです。
1. axios を使用してバックエンド インターフェイスをリクエストします
まず、npm で axios をインストールし、axios の依存関係を追加し、それに依存してバックエンド インターフェイスをリクエストします。これは基本的に、jquery を使用して ajax を送信するのと同じです。
# src/main.js
import axios from 'axios'
import vueAxios from 'vue-axios'
createApp(App).use(ElementPlus).use(vueAxios,axios).mount("#app");
axios は簡単に呼び出すための独立したライブラリです。ここでは vue-axios を使用して、this.axios を通じてバックエンド リクエストを開始します。バックエンドのインターフェースは図のとおりで、
axiosでデータを取得した後、それをデータdataに代入し、ページはデータデータを参照して表示します。
<script>
export default{
data(){
return {
signName: 'star',
users: []
}
},
methods:{
getUsers(){
this.axios.get('/api/getAllUsers')
.then((res)=>{
console.log(JSON.stringify(res.data.records))
this.users = res.data.records
})
.catch(function (error) {
console.log(error);
});
}
},
mounted () {
this.getUsers()
}
}
</script>
2.プロキシを設定する
リクエストを localhost:8787/getAllUsers に直接送信すると、クロスドメインの問題が発生します。通常、フロントエンドとバックエンドは別々にデプロイされます。たとえサーバー上にデプロイされていても、ポートが異なるため、クロスドメインの問題が発生します。問題 (フロントエンドの dist をバックエンドにスローすることは考慮しないでください)。サーバー内のセミデタッチ状況)。
vue.config.js ファイルでプロキシを構成し (新しいプロキシを作成する必要はありません)、ローカル パス要求をターゲット アドレスに転送することで、ブラウザの同一オリジン ポリシーを回避できます。同じオリジンはブラウザーの制限にすぎず、クロスドメイン バックエンドでもリクエスト データを受信できます。
module.exports = {
devServer: {
port: 80,
proxy: {
'/api': {
target: 'http://localhost:8787',
secure: true,
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
}
},
},
}
3. ページテーブルのレンダリング
最後にリクエストデータを表示する.vueを記述します 使用方法は前回の記事と同様です データさえあればサードパーティ製コンポーネントで簡単にページ表示が可能です ここではElement-plusを使用します
<template>
<el-table :data="users" style="width: 100%">
<el-table-column prop="id" label="编号" width="120" />
<el-table-column prop="name" label="姓名" width="120" />
<el-table-column prop="age" label="年龄" width="120" />
<el-table-column prop="city" label="城市" />
</el-table>
</template>
最終的な効果は以下の通りです この記事を参照する際に期待と齟齬がある場合は、この記事の書き方が間違っていると思われますので、各コンポーネントの公式ドキュメントも併せてご参照ください。
