laravelでAPI作って、フロントはvue.js＋axios(非同期なajax)で、SPAなCRUDアプリを作ってみた(後編)

API作成とVUEの結合

1, DBは、MySQLではなくSQLite

# SQLiteの下準備は、空ファイルを作成するだけ
touch database/database.sqlite

.envのDB接続設定をmysqlからsqliteにする

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=homestead
# DB_USERNAME=homestead
# DB_PASSWORD=secret

DB_CONNECTION=sqlite

# DB_HOST=127.0.0.1

# DB_PORT=3306

# DB_DATABASE=homestead

# DB_USERNAME=homestead

# DB_PASSWORD=secret

これだけでDB(sqlite)が使えるようになる！
php artisan migrate

# たまにmysqlのキャッシュが残っている事があるのでクリアしておく
php artisan config:cache

2, モデル・テーブル・コントローラー・シーダーを一気に作成

php artisan make:model Task --all

Model created successfully.
Factory created successfully.
Created Migration: 2020_08_21_033554_create_tasks_table
Seeder created successfully.
Controller created successfully.

php artisan make:model Task --all

Model created successfully.

Factory created successfully.

Created Migration: 2020_08_21_033554_create_tasks_table

Seeder created successfully.

Controller created successfully.

3, テーブル定義
database/migration/2020_08_21_033554_create_tasks_table.php

Schema::create('tasks', function (Blueprint $table) {
    $table->id();
    $table->string('title', 100);
    $table->string('content', 100);
    $table->string('person_in_charge', 100);
    $table->timestamps();
});

Schema::create('tasks', function (Blueprint $table) {

$table->id();

$table->string('title', 100);

$table->string('content', 100);

$table->string('person_in_charge', 100);

$table->timestamps();

});

4, Taskモデルは、idカラム以外は自由に修正出来るようにする。

class Task extends Model
{
    protected $guarded = ['id'];
}

class Task extends Model

{

protected $guarded = ['id'];

}

5, シーダーで適当なレコード生成
database/seeds/TaskSeeder.php

public function run()
{
   for ($i = 1; $i <= 10; $i++) {
       Task::create([
           'title' => 'title' . $i,
           'content' => 'content' . $i,
           'person_in_charge' => 'person_in_charge' . $i,
       ]);
   }
}

public function run()

{

for ($i = 1; $i <= 10; $i++) {

Task::create([

'title' => 'title' . $i,

'content' => 'content' . $i,

'person_in_charge' => 'person_in_charge' . $i,

]);

}

database/seeds/DatabaseSeeder.phpで読み込む

public function run()
{
    // $this->call(UserSeeder::class);
    $this->call(TaskSeeder::class);
}

public function run()

{

// $this->call(UserSeeder::class);

$this->call(TaskSeeder::class);

}

6, APIのルーティング
routes/api.php

// TaskのAPI
Route::group(['middleware' => ['api']], function(){
    Route::resource('task', 'TaskController');
});

// TaskのAPI

Route::group(['middleware' => ['api']], function(){

Route::resource('task', 'TaskController');

});

これで、自動的にRESTful APIのルーティングが完了する。

php artisan route:list
+--------+-----------+----------------------+--------------+---------------------------------------------+------------+
| Domain | Method    | URI                  | Name         | Action                                      | Middleware |
+--------+-----------+----------------------+--------------+---------------------------------------------+------------+
|        | GET|HEAD  | api/task             | task.index   | App\Http\Controllers\TaskController@index   | api        |
|        | POST      | api/task             | task.store   | App\Http\Controllers\TaskController@store   | api        |
|        | GET|HEAD  | api/task/create      | task.create  | App\Http\Controllers\TaskController@create  | api        |
|        | GET|HEAD  | api/task/{task}      | task.show    | App\Http\Controllers\TaskController@show    | api        |
|        | PUT|PATCH | api/task/{task}      | task.update  | App\Http\Controllers\TaskController@update  | api        |
|        | DELETE    | api/task/{task}      | task.destroy | App\Http\Controllers\TaskController@destroy | api        |
|        | GET|HEAD  | api/task/{task}/edit | task.edit    | App\Http\Controllers\TaskController@edit    | api        |
|        | GET|HEAD  | api/user             |              | Closure                                     | api        |
|        |           |                      |              |                                             | auth:api   |
|        | GET|HEAD  | {any}                |              | Closure                                     | web        |
+--------+-----------+----------------------+--------------+---------------------------------------------+------------+

php artisan route:list

+--------+-----------+----------------------+--------------+---------------------------------------------+------------+

+--------+-----------+----------------------+--------------+---------------------------------------------+------------+

| | GET|HEAD | api/task/{task} | task.show | App\Http\Controllers\TaskController@show | api |

| | PUT|PATCH | api/task/{task} | task.update | App\Http\Controllers\TaskController@update | api |

| | DELETE | api/task/{task} | task.destroy | App\Http\Controllers\TaskController@destroy | api |

| | GET|HEAD | api/task/{task}/edit | task.edit | App\Http\Controllers\TaskController@edit | api |

| | GET|HEAD | {any} | | Closure | web |

+--------+-----------+----------------------+--------------+---------------------------------------------+------------+

7, TaskController.phpでAPI処理内容を記述。スゴいシンプル！

<?php
namespace App\Http\Controllers;
use App\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function index()
    {
        return Task::all();
    }
    public function show(Task $task)
    {
        return $task;
    }
    public function store(Request $request)
    {
        return Task::create($request->all());
    }
    public function update(Request $request, Task $task)
    {   
        $task->update($request->all());
        return $task; //更新したデータを返す。
    }
    public function destroy(Task $task)
    {    
        $task->delete();
        return $task; //削除したデータを返す。
    }
}

<?php

namespace App\Http\Controllers;

use App\Task;

use Illuminate\Http\Request;

class TaskController extends Controller

{

public function index()

{

return Task::all();

}

public function show(Task $task)

{

return $task;

}

public function store(Request $request)

{

return Task::create($request->all());

}

public function update(Request $request, Task $task)

{

$task->update($request->all());

return $task; //更新したデータを返す。

}

public function destroy(Task $task)

{

$task->delete();

return $task; //削除したデータを返す。

}

8, 試しにコマンドラインから、CRUDのAPIを叩いてみる

# 全部GET
curl http://localhost:8000/api/task 

# 指定IDのレコードだけGET
curl http://localhost:8000/api/task/3

# レコード作成＆更新(Win10だとうまく行かなかったので、Advanced Rest Clientで確認したら動作した)
curl -X POST -H "Content-Type: application/json" http://localhost:8000/api/task -d "{\"title\": \"ppp\",\"content\": \"テスト\",\"person_in_charge\": \"person_in_chargeテスト\"}"
curl -X PUT -H 'Content-Type: application/json' http://localhost:8000/api/task/11 -d '{"title": "ttt","content": "Test Message"}'

# 削除はWin10でもOK
curl -X DELETE http://localhost:8000/api/task/11

# 全部GET

curl http://localhost:8000/api/task

# 指定IDのレコードだけGET

curl http://localhost:8000/api/task/3

# レコード作成＆更新(Win10だとうまく行かなかったので、Advanced Rest Clientで確認したら動作した)

curl -X POST -H "Content-Type: application/json" http://localhost:8000/api/task -d "{\"title\": \"ppp\",\"content\": \"テスト\",\"person_in_charge\": \"person_in_chargeテスト\"}"

curl -X PUT -H 'Content-Type: application/json' http://localhost:8000/api/task/11 -d '{"title": "ttt","content": "Test Message"}'

# 削除はWin10でもOK

curl -X DELETE http://localhost:8000/api/task/11

9, フロントエンドのvue.js・バックエンドのlaravel apiを、axios(ajax)で結びつける

タスク一覧をAPIで取得
resources/js/components/TaskListComponent.vue

<tr v-for="(task, index) in tasks" :key="index">
    <th scope="row">{{ task.id }}</th>
    <td>{{ task.title }}</td>
    <td>{{ task.content }}</td>
    <td>{{ task.person_in_charge }}</td>
    <td>
        <router-link v-bind:to="{name: 'task.show', params: {taskId: task.id }}">
            <button class="btn btn-primary">Show</button>
        </router-link>
    </td>
    <td>
        <router-link v-bind:to="{name: 'task.edit', params: {taskId: task.id }}">
            <button class="btn btn-success">Edit</button>
        </router-link>
    </td>
    <td>
        <button class="btn btn-danger">Delete</button>
    </td>
</tr>


<script>
    export default {   
        // tasks配列は、最初は空
        data: function () {
            return {
                tasks: []
            }
        },
        methods: {
            // API経由で全タスクを取得
            getTasks() {
                axios.get('/api/task')
                    .then((res) => {
                        this.tasks = res.data;
                    });
            }
        },
        //マウントし終わったらAPIでタスク取得する。
        mounted() {
            this.getTasks();
        }
    }
</script>

<td>{{ task.title }}</td>

<td>{{ task.content }}</td>

<td>{{ task.person_in_charge }}</td>

<td>

<router-link v-bind:to="{name: 'task.show', params: {taskId: task.id }}">

</router-link>

</td>

<td>

<router-link v-bind:to="{name: 'task.edit', params: {taskId: task.id }}">

</router-link>

</td>

<td>

<button class="btn btn-danger">Delete</button>

</td>

</tr>

export default {

// tasks配列は、最初は空

data: function () {

return {

tasks: []

}

methods: {

// API経由で全タスクを取得

getTasks() {

axios.get('/api/task')

.then((res) => {

this.tasks = res.data;

});

}

//マウントし終わったらAPIでタスク取得する。

mounted() {

this.getTasks();

}

</script>

タスク詳細ページ
resources/js/components/TaskShowComponent.vue

v-model="task.title"> のように動的データバインディングを行う。

<script>
    export default {
        props: {
            taskId: String
        },
        data: function () {
            return {
                task: {}
            }
        },
        methods: {
            getTask() {
                axios.get('/api/task/' + this.taskId)
                    .then((res) => {
                        this.task = res.data;
                    });
            }
        },
        mounted() {
            this.getTask();
        }
    }

</script>

v-model="task.title"> のように動的データバインディングを行う。

export default {

props: {

taskId: String

data: function () {

return {

task: {}

}

methods: {

getTask() {

axios.get('/api/task/' + this.taskId)

.then((res) => {

this.task = res.data;

});

}

mounted() {

this.getTask();

}

</script>

ハリボテだったタスク登録画面
resources/js/components/TaskCreateComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-6">
                <form v-on:submit.prevent="submit">
                    <div class="form-group row">
                        <label for="title" class="col-sm-3 col-form-label">Title</label>
                        <input type="text" class="col-sm-9 form-control" id="title" v-model="task.title">
                    </div>
                    <div class="form-group row">
                        <label for="content" class="col-sm-3 col-form-label">Content</label>
                        <input type="text" class="col-sm-9 form-control" id="content" v-model="task.content">
                    </div>
                    <div class="form-group row">
                        <label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label>
                        <input type="text" class="col-sm-9 form-control" id="person-in-charge" v-model="task.person_in_charge">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                task: {}
            }
        },
        methods: {
            submit() {
                axios.post('/api/task', this.task)
                    .then((res) => {
                        this.$router.push({name: 'task.list'});
                    });
            }
        }
    }
</script>

<label for="title" class="col-sm-3 col-form-label">Title</label>

</div>

<label for="content" class="col-sm-3 col-form-label">Content</label>

</div>

<label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</template>

export default {

data: function () {

return {

task: {}

}

methods: {

submit() {

axios.post('/api/task', this.task)

.then((res) => {

this.$router.push({name: 'task.list'});

});

}

</script>

同じくハリボテだったタスク更新画面
resources/js/components/TaskEditComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-6">
                <form v-on:submit.prevent="submit">
                    <div class="form-group row">
                        <label for="id" class="col-sm-3 col-form-label">ID</label>
                        <input type="text" class="col-sm-9 form-control-plaintext" readonly id="id" v-model="task.id">
                    </div>
                    <div class="form-group row">
                        <label for="title" class="col-sm-3 col-form-label">Title</label>
                        <input type="text" class="col-sm-9 form-control" id="title" v-model="task.title">
                    </div>
                    <div class="form-group row">
                        <label for="content" class="col-sm-3 col-form-label">Content</label>
                        <input type="text" class="col-sm-9 form-control" id="content"  v-model="task.content">
                    </div>
                    <div class="form-group row">
                        <label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label>
                        <input type="text" class="col-sm-9 form-control" id="person-in-charge" v-model="task.person_in_charge">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            taskId: String
        },
        data: function () {
            return {
                task: {}
            }
        },
        methods: {
            getTask() {
                axios.get('/api/task/' + this.taskId)
                    .then((res) => {
                        this.task = res.data;
                    });
            },
            submit() {
                axios.put('/api/task/' + this.taskId, this.task)
                    .then((res) => {
                        this.$router.push({name: 'task.list'})
                    });
            }
        },
        mounted() {
            this.getTask();
        }
    }
</script>

</div>

<label for="title" class="col-sm-3 col-form-label">Title</label>

</div>

<label for="content" class="col-sm-3 col-form-label">Content</label>

</div>

<label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</template>

export default {

props: {

taskId: String

data: function () {

return {

task: {}

}

methods: {

getTask() {

axios.get('/api/task/' + this.taskId)

.then((res) => {

this.task = res.data;

});

submit() {

axios.put('/api/task/' + this.taskId, this.task)

.then((res) => {

this.$router.push({name: 'task.list'})

});

}

mounted() {

this.getTask();

}

</script>

最後に削除ボタン。画面遷移を伴わないのでスムーズな動作(画面のDOMを削除して、裏でAPI経由でレコード削除)
scriptタグに追加

methods: {
    // API経由で全タスクを取得
    getTasks() {
        axios.get('/api/task')
            .then((res) => {
                this.tasks = res.data;
            });
    },
    // API経由で指定IDのタスクを削除
    deleteTask(id) {
        axios.delete('/api/task/' + id)
            .then((res) => {
                this.getTasks();
            });
    }
},

methods: {

// API経由で全タスクを取得

getTasks() {

axios.get('/api/task')

.then((res) => {

this.tasks = res.data;

});

// API経由で指定IDのタスクを削除

deleteTask(id) {

axios.delete('/api/task/' + id)

.then((res) => {

this.getTasks();

});

}

関連記事