◀ 52.

【Laravel】Vue.jsと連携するSPA実行環境構築

▶

編集

ページの作成

テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例：親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例：親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

テンプレート

前提

・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 name="csrf-token" content="{{ csrf_token() }}">

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

</head>

<body>

<router-view></router-view>

</div>

<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',
];
}