Laravel7 axios(アクシオス)を使用してWebApiからデータを取得する

Laravel7 axios(アクシオス)を使用してWebApiからデータを取得する

Laravelでvueとaxiosを使用してwebapiのデータを取得するまでの手順を記述します。

環境

  • OS CentOS Linux release 8.0.1905 (Core)
  • Composer 1.10.5
  • PHP 7.4.5
  • Percona Server Ver 8.0.19-10
  • Laravel Framework 7.6.2

※CentOs8に Laravel のインストールはこちら

WebApi

今回は、ランダムで人名を返してくれる無料WebApi「RANDOM USER GENERATOR」を利用します。

Vue.js利用

下記の手順でLaravel7でvueを利用できるようにしておきます。
※Laravel7でVue.jsを使用する詳しい手順はこちら

コントローラー作成

次にコントローラーを作成します。

app/Http/Controllers/RandomuserController作成されるので、
下記の通りに編集します。

ビュー作成

次にレイアウト部であるviewを作成します。

resources\views内で「randomuser」というフォルダを作成して「index.blade.php」を下記の内容で、新たに作成します。

ルーティング追加

アクセスするURLを設定するため、ルーティングを記述します。
ここでは/randomuserに設定します。

Vueコンポーネント作成

axiosを利用するため、vue.jsのコンポーネントを作成します。

resources/js/components/RandomuserComponent.vueを下記の通りに作成します。

resources/js/app.js で作成したコンポーネントを「randomuser-component」として設定します。

実行して表示を確認してみます。

ブラウザから http://プライベートIP:8000 にアクセスするとWebApiからデータ取得され表示されていることが確認できます。