vue.jsとlaravelを連携してみたい。その1。
vue.jsとlaravelを連携させるやり方を、何回かに分けてやっていきます。
laravelとvue.jsのチュートリアルを一通り終えた方向けに。
まずは、復習がてらlaravelのみでデータ表示をします。 やることは以下の通り。
- DBの作成
- routeの作成
- modelの作成
- controllerの作成
- viewの作成
- 表示確認
順番にやっていきます。
DBの作成
(.env等は省略します。) migrationを利用している解説を多く見かけますが、今回phpmyadminのUIでポチポチの作成しました。
今回は例として2テーブルの作成します。drinksテーブルと、foodsテーブルを作って適当にデータもぽちぽち。 完成画面はこんな感じ。
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
ってな感じでしょうか。
ここまでのまとめ
ここまで図解するとこんな感じです。
さて、次回は、vue.jsでのデータの表示を行います。ではでは。