1.タスク一覧コンポーネント実装
タスク一覧コンポーネントを追加します。
resources/js/components/TaskListComponent.vue
<template>
<div class="container">
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col">Person In Charge</th>
<th scope="col">Show</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="task in tasks">
<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" v-on:click="deleteTask(task.id)">
Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data: function () {
return {
tasks: []
}
},
methods: {
getTasks() {
axios.get('/api/tasks')
.then((res) => {
this.tasks = res.data;
});
},
deleteTask(id) {
axios.delete('/api/tasks/' + id)
.then((res) => {
this.getTasks();
});
}
},
mounted() {
this.getTasks();
}
}
</script>
■追加したタスク一覧コンポーネントをVue Routerに登録します。
resources/js/app.js
import VueRouter from 'vue-router';
import HeaderComponent from "./components/HeaderComponent";
import TaskListComponent from "./components/TaskListComponent";
import TaskCreateComponent from "./components/TaskCreateComponent";
import TaskShowComponent from "./components/TaskShowComponent";
import TaskEditComponent from "./components/TaskEditComponent";
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue').default;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
Vue.component('example-component',
require('./components/ExampleComponent.vue').default);
Vue.component('header-component', HeaderComponent);
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/tasks',
name: 'task.list',
component: TaskListComponent
},
{
path: '/tasks/create',
name: 'task.create',
component: TaskCreateComponent
},
{
path: '/tasks/:taskId',
name: 'task.show',
component: TaskShowComponent,
props: true
},
{
path: '/tasks/:taskId/edit',
name: 'task.edit',
component: TaskEditComponent,
props: true
},
]
});
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
router
});
2.タスク詳細コンポーネント実装
resources/js/components/TaskShowComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-6">
<form>
<div class="form-group row border-bottom">
<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 border-bottom">
<label for="title" class="col-sm-3 col-form-label">
Title</label>
<input type="text" class="col-sm-9 form-control-plaintext"
readonly id="title"
v-model="task.title">
</div>
<div class="form-group row border-bottom">
<label for="content" class="col-sm-3 col-form-label">
Content</label>
<input type="text" class="col-sm-9 form-control-plaintext"
readonly id="content"
v-model="task.content">
</div>
<div class="form-group row border-bottom">
<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-plaintext"
readonly id="person-in-charge"
v-model="task.person_in_charge">
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
taskId: String
},
data: function () {
return {
task: {}
}
},
methods: {
getTask() {
axios.get('/api/tasks/' + this.taskId)
.then((res) => {
this.task = res.data;
});
}
},
mounted() {
this.getTask();
}
}
</script>
3.タスク登録コンポーネント実装
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/tasks', this.task)
.then((res) => {
this.$router.push({name: 'task.list'});
});
}
}
}
</script>
4.タスク編集コンポーネント実装
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/tasks/' + this.taskId)
.then((res) => {
this.task = res.data;
});
},
submit() {
axios.put('/api/tasks/' + this.taskId, this.task)
.then((res) => {
this.$router.push({name: 'task.list'})
});
}
},
mounted() {
this.getTask();
}
}
</script>
5.API実装
■routes/api.php
Route::get('/tasks', 'App\Http\Controllers\TaskController@index');
Route::post('/tasks', 'App\Http\Controllers\TaskController@store');
Route::get('/tasks/{task}', 'App\Http\Controllers\TaskController@show');
Route::put('/tasks/{task}', 'App\Http\Controllers\TaskController@update');
Route::delete('/tasks/{task}', 'App\Http\Controllers\TaskController@destroy');
■app/Http/Controllers/TaskController.php
<?php
namespace App\Http\Controllers;
use App\Models\Task;
use Illuminate\Http\Request;
class TaskController extends Controller
{
public function index()
{
return Task::all();
}
public function store(Request $request)
{
return Task::create($request->all());
}
public function show(Task $task)
{
return $task;
}
public function update(Request $request, Task $task)
{
$task->update($request->all());
return $task;
}
public function destroy(Task $task)
{
$task->delete();
return $task;
}
}
6．静的ページとAPIとつなぐ
- タスク一覧
- タスク詳細
- タスク登録
- タスク編集
のページと、
- タスク一覧取得API
- タスク詳細取得API
- タスク登録API
- タスク更新API
- タスク削除API
をつなぐ
