ごちゃlab

laravelとvue.jsと雑記と

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

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

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

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

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

順番にやっていきます。

DBの作成

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

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

f:id:sorani33:20180514214200p:plainf:id:sorani33:20180514214203p:plain

routeの作成

\routes\web.php

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

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

modelの作成

\app\Drink.php

\app\Food.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Drink extends Model{
    //
}

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

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では1つだけのデータなので、そのまま→使えばOK。 Foodは、全部のデータを持ってきたので、foreachで回しています。

html表示

http://localhost:8080/laravel/public/test f:id:sorani33:20180514214642p:plain

ってな感じでしょうか。

ここまでのまとめ

ここまで図解するとこんな感じです。 f:id:sorani33:20180514214844p:plain

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