概要
今回はLaravel側のコントローラと通信してデータ取得できるように構成するのが目標
POSTメソッドを使用してみる
コントローラを作成
指定した配列を返す簡単なコントローラを作成
app/Http/Controllers/PageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Routing\Controller as BaseController;
use Request;
class PageController extends BaseController
{
// リポートページのコントローラ
public function report(Request $request)
{
return [
'title' => 'report',
'contents' => 'report contents blahblah'
];
}
// フォームページのコントローラ
public function form(Request $request)
{
return [
'title' => 'form',
'contents' => 'form contents blahblah'
];
}
}
Laravel側のラウトを設定
PageControllerの「report() / form()」メソッドのラウトを設定するコードを追加
確認のため「Route::any」で書いているが、元々は「Route::post」の方が正しいー
routes/web.php
// ページの表示処理を行う
Route::prefix('pages')->group(function () {
Route::any('report', 'PageController@report');
Route::any('form', 'PageController@form');
});
POST送信のためCSRF_TOKENを設定
ヘッダにCSRF_TOKENのメタデータを追加
resources/views/welcome.blade.php
<head>
……
<meta name="csrf-token" content="{{ csrf_token() }}">
……
</head>
Axios通信でCSRF_TOKENを設定するコードを追加
resources/js/bootstrap.js
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};
各VueコンポーネントでAxiosを設定
リポートページ
resources/js/pages/report.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<div class="card">
<div class="card-header">{{ responseArr.title }}</div>
<div class="card-body">
{{ responseArr.contents }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
module.exports = {
data: function() {
return {
responseArr: {}
}
},
mounted() {
const self = this;
const url = '/pages/report';
axios.post(url).then(function(response){
self.responseArr = response.data;
});
}
}
</script>
フォームページ
resources/js/pages/form.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<div class="card">
<div class="card-header">{{ responseArr.title }}</div>
<div class="card-body">
{{ responseArr.contents }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
module.exports = {
data: function() {
return {
responseArr: {}
}
},
mounted() {
const self = this;
const url = '/pages/form';
axios.post(url).then(function(response){
self.responseArr = response.data;
});
}
}
</script>
- 違うのはmounted()で指定するURLのみ
結果確認
npm run dev
php artisan serve
-
リポートページ
-
フォームページ
コントローラからデータを取得していることを確認した！