この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:T
更新日時:2019-07-27 19:30:24

タイトル: Vue.jsと連携するSPA実行環境構築
SEOタイトル: 【Laravel】Vue.jsと連携するSPA実行環境構築

前提

・Laravelプロジェクトを作成済み (まだの場合はこちらのページを参照)

・Vue.jsとの連携とvue-routerのインストール (まだの場合はこちらのページを参照)

・SPAの実行環境を構築するだけです。SPAの様々な記述方法は他のページを参照してください。

 

サーバーサイド(Laravel)のwebルーティングの無効化

webのルーティング処理はVue.js側で行うのでLaravel側のルーティング処理は不要となる。

※APIのルーティング(routes/api.php)は使用する（後述）

全てにリクエストに対して共通のレイアウト(resources/views/layouts/app.blade.php)を返すようにする。

routes/web.php

Route::get('/{any}', function () {

    return view('app');

})->where('any', '.*');

 

共通レイアウトの作成

Veu.jsを使うための最低限の設定と必要なheadタグ内の要素を記述すればよい。

resources/views/app.blade.php

<!DOCTYPE html>

<html lang="{{ app()->getLocale() }}">

    <head>

        <meta charset="utf-8">

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <!-- CSS -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    </head>

    <body>

        <div id="app">

            <router-view></router-view>

        </div>

        <!-- Scripts -->
        <script src="{{ mix('js/app.js') }}"></script>

    </body>

</html>

 

 

サーバーサイド(Laravel)のAPIを作成

テスト用にDBから適当なデータを取得するAPIを作成する。

 

まずは適当なAPIルーティングを作成する。

routes/api.php

Route::get('articles', 'Article\ArticleController@getArticles');

 

適当なコントローラーを作成する。

app/Http/Controllers/Article/ArticleController.php

<?php
namespace App\Http\Controllers\Article;

use App\Http\Controllers\Controller;
use App\Models\Article;
use Illuminate\Http\Request;
use Log;

class ArticleController extends Controller
{    
    public function getArticles(Request $request){
        
        $articles = Article::orderBy('update_datetime', 'DESC')
                ->limit(3)
                ->get();
        
        return response()->json($articles);
    }
}
 

 

適当なモデルを作成する。(マイグレーションするなり直にcreate tableしてテーブル作成をしておく)

※titleカラムを作成しておくこと。

app/model/Article.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
    protected $table = 'article';

    protected $primaryKey = 'article_id';

    public $incrementing = 'article_id';

    protected $guarded = [
        'created_at',
        'updated_at',
    ];
}
 

 

ローカルサーバーの起動

以下の２つのコマンドをそれぞれ別窓で実行してローカルサーバーを起動する。

php artisan serve

 

npm run hot

 

Veu.jsでルーティングを作成

resources/assets/js/app.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/articles', component: require('./components/Articles.vue') },
    ]
})

const app = new Vue({
    el: '#app',
    router,
})

 

ビューの作成とAPIの呼び出し

resources/assets/js/components/Articles.vue

<template>

    <div>

        <ul>

            <li v-for="article in articles">

                {{ article.title }}

            </li>

        </ul>

    </div>

</template>

<script>

    export default {

        created() {

            this.getArticles()

        },

        data() {

            return {

                articles: []

            }

        },

        methods: {

            getArticles() {

                axios
                    .get('/api/articles')
                    .then(res =>  {
                        this.articles = res.data
                    })

            }

        }

    }

</script>

 

以上の設定で「http://localhost:8000/articles」にアクセスするとarticleテーブルのtitle一覧が表示される。