Laravel7.x에 Vue-Router를 구현하여 SPA를 구축해보십시오 (2)

개요

이번에는 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

리포트 페이지

양식 페이지

컨트롤러에서 데이터를 검색하고 있는지 확인했습니다!

Reference

이 문제에 관하여(Laravel7.x에 Vue-Router를 구현하여 SPA를 구축해보십시오 (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Paka_0601/items/707b06491c3e82d28304

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다