[Laravel5.5でREST API + SPA] Vue.jsでUI作成

ユーザを扱うAPIが一通りできたので、Vue.jsを使ってユーザ管理UIを作っていきます。

まずはVue.jsをインストール

laravelにはpackage.jsonに最初からVue.jsが含まれているのでそのままnpm installします。

追加で、SPA的なルーティングのためにvue-routerも入れておきます。

ベースとなるHTMLをlaravel側で出力する

laravel側のルーティングですべてのアクセスに対してひとつのviewを返すように設定します。

vue側の自動ビルドも起動しておきます。

http://127.0.0.1:8000/にアクセスすると上記HTMLが出力されるはずです。(見た目は真っ白ですが)

画面構成を決めてVue.js側でルーティング

laravel側ルーティングは共通HTMLを返すだけなので、実質のルーティングはvue-routerで行います。

/users/ でユーザ一覧を表示し、そこからリンクで各ユーザの編集画面に飛ぶことを想定したルーティングです。

APIに接続するロジックをサービスとして作成

httpサービスはapp.jsで初期化します。

 

各画面のvueコンポーネント作成

users/以下のベースになるHTML

このrouter-viewの中に以下のテンプレートがインクルードされます。

ユーザ一覧画面

ユーザ編集(追加)画面

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る