はじめに
LaravelとVue.jsを使ってREST APIを作って叩いてみました。
※LaravelとVue.jsの環境は既にできている前提で書いています。
- 第1弾 LaravelのコントローラーとルーティングのみでAPI
- 第2弾 Laravelのみでデータベースから値を取得して返すAPI
- 第3弾 Laravelに加えてVue.jsを使ってAPI
という流れで進めています。
環境
- Mac(docker環境)
- Laravel 6系
- Vue.js 2系
第1弾 LaravelのコントローラーとルーティングのみでAPI
手始めにLaravelのコントローラーとルーティングだけでAPIを叩いてみます。
①コントローラー(testController)の作成
$ php artisan make:controller Api/testController
②JSONで返す値をコントローラーに準備
class testController extends Controller
{
public function index() {
$memberList = [
['id' => 1, 'name' => 'hoge'],
['id' => 2, 'name' => 'fuga'],
['id' => 3, 'name' => 'piyo'],
];
return $memberList;
}
}
JSONで$memberListの値を返すAPIにしています。
③ルーティングの処理を追加
api.phpに下記を追加。(web.phpではないので注意)
Route::resource('members', 'Api\testController');
④/localhost/Api/membersへアクセス
無事APIを叩いてレスポンスが返ってきました！
第2弾 Laravelのみでデータベースから値を取得して返すAPI
次にMemberというテーブルを作成して、その中に登録されているデータを返却するAPIを作成します。
①モデルを作成
$ php artisan make:model Models/Member -m
mオプションをつけてマイグレーションのファイルも同時に準備しておきます。モデルは/app/Models/Member.phpが作られていればOKです。
②マイグレーションファイル修正
マイグレーションファイルはidとnameのカラムが欲しいので下記のように修正しておきます。
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateMembersTable extends Migration
{
public function up()
{
Schema::create('members', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->timestamps();
});
}
public function down() {
Schema::dropIfExists('members');
}
}
③テーブルの作成
マイグレーションファイルを修正したらmigrateを実行します。
$ php artisan migrate;
これによりデータベースにmembersテーブルが作成されます。
④データの流し込み
テーブルを作成できたら、表示させるためのデータを予め登録しておきます。私はdockerを使っているのでmysqlのコンテナに入って直接SQLを叩いてインサートしています。
上記のようなコラムがあるので、下記のようにINSERT文を流し込みました。
INSERT INTO members values(1,'hoge',NOW(),NOW()),(2, 'fuga',NOW(),NOW()),(3, 'piyo',NOW(),NOW());
⑤コントローラーの修正
第１弾で使った部分をコメントアウトしつつ、useを使ってモデルを使えるようにしておきます。
use App\Models\Member; //←モデルを呼び出すために追加
class testController extends Controller
{
public function index()
{
// 第1弾で呼び出した部分はコメントアウト
// $memberList = [
// ['id' => 1, 'name' => 'hoge'],
// ['id' => 2, 'name' => 'fuga'],
// ['id' => 3, 'name' => 'piyo'],
// ];
// 第2弾では下記を追加
$members = new Member();
$memberList = $members->get();
return $memberList;
}
⑥/localhost/Api/membersへアクセス
第1弾ではidとnameだけでしたが、今回はデータベースに入っている全てのカラムを取り出したのでcreated_atとupdate_atのカラムも取得されています。
第3弾 Laravelに加えてVue.jsを使ってAPI
①web.phpにルーティング追加
httpでアクセスがあった時のルーティングを追加します。
Route::get('/testApi', 'testApiController@index');
②Laravelのbladeを表示するためのコントローラーを追加
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class testApiController extends Controller
{
public function index()
{
return view('testApi');
}
}
③Laravelのbladeを準備
LaravelのbladeからVueテンプレートを呼び出します。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
// 略
<title>Laravel</title>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="title m-b-md">
testAPI
</div>
<div id="app">
<api-retturn></api-retturn> //Vueのtemplate呼び出し
</div>
</div>
</div>
</body>
</html>
④APIの処理をVueテンプレートに準備
APIリクエストを送って、レスポンスを受け取る処理をVueテンプレートに書きます。
<template>
<div>
<table class="table table-striped">
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr v-for="(item, index) in responseData" :key="index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
responseData: [],
}
},
methods: {
getData() {
axios.get('/api/members', {})
.then(response => {
this.responseData = response.data;
})
.catch(error => {
alert('API ERROR');
})
.finally()
}
},
mounted() {
this.getData();
},
}
</script>
axiosというJavaScriptのライブラリを使えばAPIにて対して、データの送受信をすることができます。
④APIのルーティングを追加
APIリクエストを受け受け取るためのルーティングを追加します。
Route::resource('members', 'Api\testController');
⑤API側のコントローラーの修正
api.phpから受け取ったリクエストはコントローラーへ送られ、データベースから取得したmemberのデータをレスポンスとして返します。
(第2弾でコントローラーを修正した場合、第2弾のまま修正不要です。)
use App\Models\Member; //←モデルを呼び出すために追加
class testController extends Controller
{
public function index()
{
$members = new Member();
$memberList = $members->get();
return $memberList;
}
}
⑤/localhost/testApiにてアクセス
DBの情報を表示するだけだと簡単ですね！！