Laravel × Vue.js × axiosでTODOリストを作るよ! その2

Laravel × Vue × axiosで作るTODOリスト

前回の記事→Laravel × Vue.js × axiosでTODOリストを作るよ! その1

次回の記事→Laravel × Vue.js × axiosでTODOリストを作るよ! その3

Laravel × Vue.js × axiosでTODOリストを作るよ!

前回はLaravelのインストール・セットアップ、Vue.js・axiosのインストール、データベースの用意で止まっていたと思います。

  1. Laravelのインストール・セットアップ
  2. Vue.jsとaxiosのインストール
  3. データベースの用意
  4. Laravelのルーティング設定 ←今ココ
  5. Laravelのビュー設定
  6. Laravel・Vue.js・axiosでTODOリストのプログラム構築
  7. 完成

TODOリスト構築

Laravelのルーティング設定

今回はどんなURLに対しても、1つのビューを返します。
返すビューは「resources/views/welcome.blade.php」です。
初回のみビューファイルを返して、フロントからのリクエストは、APIサーバーで処理するようにします。

Laravelのルーティングの設定は「routes/web.php」に記述する決まりになっています。
「web.php」を開き、下記のように編集します。

//  Route::get('/', function () {  //←元々記述されているコードはコメントアウト
//    return view('welcome');
//  });

Route::get('/{app}', function () {  //←追記
  return view('welcome');
})->where('app', '.*');

正規表現でどんな文字列がきても「welcome.blade.php」のビューを返す。といった処理を記述しました。

「php artisan serve」でローカルサーバーを立ち上げているのなら、試しにテキトーにURLを入力してみてください。
どんなURLでも「welcome.blade.php」が返されるはずです。

Laravelのビュー設定

次に「welcome.blade.php」の中身を編集していきます!

一度、ターミナルへ「npm run dev」とコマンドを入力した後、「welcome.blade.php」を下記のように編集してください。

<!doctype html>
  <html lang="{{ app()->getLocale() }}">
    <head>
      <meta charset="utf-8">
      <meta name="csrf-token" content="{{ csrf_token() }}"> <!-- ←① -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <!-- ←② -->
      <title>Laravel-Vue-todo</title>
    </head>
    <body>
      <div id="app"> <!-- ←③ -->
        <div class="container">
          <div class="row">
            <div class="col-xs-12">
              <br>
            </div>
            <div class="col-xs-6">
              <table class="table">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>タスク名</th>
                    <th>完了ボタン</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>お茶を汲む</td>
                    <td><button class="btn btn-primary">完了</button></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="col-xs-6">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="タスクを入力してください">
                <span class="input-group-btn">
                  <button class="btn btn-success" type="button">タスクを登録
</button>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script src="{{ asset('js/app.js') }}"></script> <!-- ←④ -->
    </body>
</html>

そして「php artisan serve」でローカルサーバーを立ち上げると、下記のキャプチャのような画面が表示されるはずです。

「welcome.blade.php」のレイアウト

「welcome.blade.php」のレイアウト

では、「welcome.blade.php」の詳細を解説していきますね。

<meta name=”csrf-token” content=”{{ csrf_token() }}”>
Laravelでajax通信を行う際はCSRF対策のために、headに上記のコードを追記する必要があります。
LaravelのCSRF対策について詳しい解説はコチラ→Laravel 5.5 CSRF対策

<link rel=”stylesheet” href=”{{ asset(‘css/app.css’) }}”>
「npm run dev」コマンドで生成した「app.css」を読み込んでいます。
{{ asset() }}はLaravelのヘルパーです。asset()は、現在のリクエストのスキーマ(HTTPかHTTPS)を使い、アセットへのURLを生成します。
Laravelのヘルパーについて詳しい解説はコチラ→Laravel 5.5 ヘルパー

ちなみに、Laravelのpackage.jsonには、bootstrap-sassのver.3.3.7がインストールされるように記述されています。
今回のレイアウトは、このBootstrap ver.3を使いました。好みのCSSフレームワークがありましたら、ご自身で適宜インストールしてください。

<div id=”app”>
bodyタグ直下のdivタグに「#app」を付与しました。
後でこのdivタグにVue.jsでマウントし、タスクを表示してきます。

<script src=”{{ asset(‘js/app.js’) }}”></script>
「npm run dev」コマンドで生成した「app.js」を読み込んでいます。
cssと同様、asset()で読み込んでいます。

今回はここまで

これでレイアウトは作れましたね。
次回からは、どんどんロジックを書いていこうと思います!
では、また!

次回の記事→Laravel × Vue.js × axiosでTODOリストを作るよ! その3


参考資料・リンク