概要

今回は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

リポートページ
フォームページ

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

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

概要

コントローラを作成

Laravel側のラウトを設定

POST送信のためCSRF_TOKENを設定

各VueコンポーネントでAxiosを設定

結果確認