Laravel7.xにVue-Routerを実装してSPAを構築してみる (2)

# 概要
今回はLaravel側のコントローラと通信してデータ取得できるように構成するのが目標
POSTメソッドを使用してみる

# コントローラを作成

指定した配列を返す簡単なコントローラを作成

```php: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」の方が正しいー

```php:routes/web.php
// ページの表示処理を行う
Route::prefix('pages')->group(function () {
    Route::any('report', 'PageController@report');
    Route::any('form', 'PageController@form');
});
```

# POST送信のためCSRF_TOKENを設定

ヘッダにCSRF_TOKENのメタデータを追加

```php:resources/views/welcome.blade.php
<head>
    ……
    <meta name="csrf-token" content="{{ csrf_token() }}">
    ……
</head>
```

Axios通信でCSRF_TOKENを設定するコードを追加

```php: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を設定

リポートページ

```vue: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>
```

フォームページ

```vue: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のみ

# 結果確認

```bash
npm run dev
php artisan serve
```
* リポートページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208640/8d9cae4f-0295-8aab-fe6f-745144d914c9.png)

* フォームページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208640/329fd392-db9a-a128-5cc4-c771ea5fd321.png)

コントローラからデータを取得していることを確認した！