はじめに

前回、前々回とSPAで構築するLaravelアプリケーションということで ~~自分用の~~ アウトプットをしてきましたが、ひとまず形になったのでサンプルアプリケーションとして公開したいと思いました。

ソースコードは GitHubで。

簡単な解説

ログインはLaravel標準機能を使ってます。
ログイン画面だけはレガシーなものを流用しました。
~~APIでログイン実装するの面倒そう。~~
ログイン後はVue.jsに丸投げしてるので、画面遷移なしで操作できるようになります。
DBとの連携は行っていません。
ベストプラクティスですか？いいえ、「とりあえず動く」です。
Vue.js 側の管理ファイル app.js を次のように分割しました。
- ルーティングを管理するだけの routes.js を作成
- コンポーネントを管理するだけの myComponents.js を作成

ルートの紹介

基本的に使うルートは

/index
/login
/
/test

だけです。

全てのルートを見るには...

省略されまし

+- | Domain | Method   | URI +--------+----------+--------------- |        | GET|HEAD | _debugbar/assets/javascript |        | GET|HEAD | _debugbar/asse |        | DELETE   | _debugbar/cach |        | GET|HEAD | _debugbar/clockwork/{id} |        | GET|HEAD | _debugbar/open |        | GET|HEAD | api/logout |        | POST     | api/message |        | GET|HEAD | api/user |        | GET|HEAD | home |        | GET|HEAD | index |        | GET|HEAD | login |        | POST     | login |        | POST     | logout |        | DELETE   | oauth/authorize |        | POST     | oauth/authorize |        | GET|HEAD | oauth/authorize |        | GET|HEAD | oauth/clients |        | POST     | oauth/clients |        | PUT      | oauth/clients/{client_id} |        | DELETE   | oauth/clients/{client_id} |        | GET|HEAD | oauth/personal |        | POST     | oauth/personal |        | DELETE   | oauth/personal |        | GET|HEAD | oauth/scopes |        | POST     | oauth/token |        | POST     | oauth/token/refresh |        | GET|HEAD | oauth/tokens |        | DELETE   | oauth/tokens/{token_id} |        | POST     | password/email |        | GET|HEAD | password/reset |        | POST     | password/reset |        | GET|HEAD | password/reset/{token} |        | GET|HEAD | register |        | POST     | register |        | GET|HEAD | {any} +--------+----------+---------------

た。続きを読むにはクリックしてください。

ext"> class="bold">route

-------+----------+-----------------------------------------+-----------------------+----------------------------------------------------------------------------+----------------------------------------------+ | Name | Action | Middleware | --------------------------+-----------------------+----------------------------------------------------------------------------+----------------------------------------------+ | debugbar.assets.js | Barryvdh\Debugbar\Controllers\AssetController@js | Barryvdh\Debugbar\Middleware\DebugbarEnabled | ts/stylesheets | debugbar.assets.css | Barryvdh\Debugbar\Controllers\AssetController@css | Barryvdh\Debugbar\Middleware\DebugbarEnabled | e/{key}/{tags?} | debugbar.cache.delete | Barryvdh\Debugbar\Controllers\CacheController@delete | Barryvdh\Debugbar\Middleware\DebugbarEnabled | | debugbar.clockwork | Barryvdh\Debugbar\Controllers\OpenHandlerController@clockwork | Barryvdh\Debugbar\Middleware\DebugbarEnabled | | debugbar.openhandler | Barryvdh\Debugbar\Controllers\OpenHandlerController@handle | Barryvdh\Debugbar\Middleware\DebugbarEnabled | | | Closure | api,auth:api | | | Closure | api,auth:api | | | Closure | api,auth:api | | home | App\Http\Controllers\HomeController@index | web,auth | | | Closure | web | | login | App\Http\Controllers\Auth\LoginController@showLoginForm | web,guest | | | App\Http\Controllers\Auth\LoginController@login | web,guest | | logout | App\Http\Controllers\Auth\LoginController@logout | web | | | \Laravel\Passport\Http\Controllers\DenyAuthorizationController@deny | web,auth | | | \Laravel\Passport\Http\Controllers\ApproveAuthorizationController@approve | web,auth | | | \Laravel\Passport\Http\Controllers\AuthorizationController@authorize | web,auth | | | \Laravel\Passport\Http\Controllers\ClientController@forUser | web,auth | | | \Laravel\Passport\Http\Controllers\ClientController@store | web,auth | | | \Laravel\Passport\Http\Controllers\ClientController@update | web,auth | | | \Laravel\Passport\Http\Controllers\ClientController@destroy | web,auth | -access-tokens | | \Laravel\Passport\Http\Controllers\PersonalAccessTokenController@forUser | web,auth | -access-tokens | | \Laravel\Passport\Http\Controllers\PersonalAccessTokenController@store | web,auth | -access-tokens/{token_id} | | \Laravel\Passport\Http\Controllers\PersonalAccessTokenController@destroy | web,auth | | | \Laravel\Passport\Http\Controllers\ScopeController@all | web,auth | | | \Laravel\Passport\Http\Controllers\AccessTokenController@issueToken | throttle | | | \Laravel\Passport\Http\Controllers\TransientTokenController@refresh | web,auth | | | \Laravel\Passport\Http\Controllers\AuthorizedAccessTokenController@forUser | web,auth | | | \Laravel\Passport\Http\Controllers\AuthorizedAccessTokenController@destroy | web,auth | | password.email | App\Http\Controllers\Auth\ForgotPasswordController@sendResetLinkEmail | web,guest | | password.request | App\Http\Controllers\Auth\ForgotPasswordController@showLinkRequestForm | web,guest | | | App\Http\Controllers\Auth\ResetPasswordController@reset | web,guest | | password.reset | App\Http\Controllers\Auth\ResetPasswordController@showResetForm | web,guest | | register | App\Http\Controllers\Auth\RegisterController@showRegistrationForm | web,guest | | | App\Http\Controllers\Auth\RegisterController@register | web,guest | | | Closure | web,auth | --------------------------+-----------------------+----------------------------------------------------------------------------+----------------------------------------------+

導入手順

README.md にほぼほぼ記述されてます。
なお、事前に homestead の環境は構築されている前提で話をしています。

console

# プロジェクトのクローン
git clone https://github.com/tosite0345/vue.js-laravel-sample.git

# 以下はvagrant上で行う
vagrant ssh

cd 'project-root'

# composerで依存関係を注入する
composer install

# .env・config等の設定ファイルをキャッシュ化
php artisan config:cache

# このコマンドでサンプルユーザーを作成する
# mail : homestead@sample.com
# pass : secret
php artisan migrate
php artisan db:seed

# passportをインストール
php artisan passport:install

所感

どうやら <template> のことを盛大に勘違いしていた模様。
少しずつ分かってきた気がするので、最終的には Onsen UI と併存できるようにやっていこうかなぁ、わかんないこといっぱいだなぁ。
これをベースにカッチョよく機能強化していきたい所存。