vue.jsとlaravelを連携してみたい。その１。

vue.jsとlaravelを連携させるやり方を、何回かに分けてやっていきます。

laravelとvue.jsのチュートリアルを一通り終えた方向けに。

まずは、復習がてらlaravelのみでデータ表示をします。 やることは以下の通り。

• DBの作成
• routeの作成
• modelの作成
• controllerの作成
• viewの作成
• 表示確認

順番にやっていきます。

DBの作成

（.env等は省略します。） migrationを利用している解説を多く見かけますが、今回phpmyadminのUIでポチポチの作成しました。

今回は例として２テーブルの作成します。drinksテーブルと、foodsテーブルを作って適当にデータもぽちぽち。 完成画面はこんな感じ。

routeの作成

\routes\web.php

Route::get('test','TestController@index');

１行追加。特に問題ないですね。

modelの作成

\app\Drink.php

\app\Food.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Drink extends Model{
    //
}

２テーブル作ったので、２ファイルの作成しました。 こちらも特に問題ないですね。

controllerの作成

\app\Http\Controllers\Testcontroller.php

use App\Drink;   //drinksテーブルを使えるようにする。
use App\Food;   //foodsテーブルを使えるようにする。

class TestController extends Controller{
    public function index() {
      $Drinks = Drink::first(); //drinksテーブルのはじめのデータだけ、変数に入れる。
      $Foods = Food::all();     //foodsテーブルの全データを、変数に入れる。
      return view('test.index', compact('Drinks', 'Foods'));
    }
}

ここでは、compactを使って、view内で変数（$Drinks、$Foods）を使えるようにしました。

viewの作成

\resources\views\test\index.blade.php

<p>飲みたいのは、{{$Drinks->name}}</p>
<p>食べたいのは、
  <?php foreach ($Foods as $Food)
    echo $Food->name."と";
   ?>
</p>

Drinksでは１つだけのデータなので、そのまま→使えばOK。 Foodは、全部のデータを持ってきたので、foreachで回しています。

html表示

http://localhost:8080/laravel/public/test

ってな感じでしょうか。

ここまでのまとめ

ここまで図解するとこんな感じです。

さて、次回は、vue.jsでのデータの表示を行います。ではでは。