④Vue.js & Laravel8 & Docker（Create…データベースに保存）

2023-04-142024-04-01

はじめに

こちらは数本の記事で構成されています

目標

データベースにデータを保存する

実装

①フロントエンドからAPIにリクエストする

<template>
  <v-card>
    <v-card-title>
      <span>タスク 登録</span>
    </v-card-title>
    <v-card-text class="px-4">
      <v-card-subtitle>タスク情報</v-card-subtitle>
      <section>
        <ul>
          <li class="mb-3">
            <v-text-field label="タスク名" :value="newTaskName" @input="onCreateName" dense outlined color="primary"></v-text-field>
          </li>
          <li class="mb-3">
            <v-textarea label="詳細" :value="newTaskDetail" @input="onCreateDetail" dense outlined color="primary"></v-textarea>
          </li>
        </ul>
      </section>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
-      <v-btn color="primary">
+      <v-btn color="primary" @click="createTask()">
        <span>登録</span>
        <v-icon>mdi-send</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>
<script>
+ import axios from "axios";
export default {
  data() {
    return {
      newTaskName: "",
      newTaskDetail: "",
    };
  },
  methods: {
    onCreateName(userName) {
      this.newTaskName = userName;
    },
    onCreateDetail(userDetail) {
      this.newTaskDetail = userDetail;
    },
+    createTask() {
+      const requestConfig = {
+        url: "http://localhost:8001/api/task",
+        method: "POST",
+        data: {
+          name: this.newTaskName,
+          detail: this.newTaskDetail,
+        },
+      };
+      axios(requestConfig)
+        .catch(() => {
+          alert("エラー");
+        });
+    },
  },
};
</script>

これで「①フロントエンドからAPIにリクエストする」が達成されました

②APIからコントローラーにリクエストを送る

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('/tasks', 'App\Http\Controllers\TaskController@getTasks');
+ Route::post('/task', 'App\Http\Controllers\TaskController@postTask');

これで「②APIからコントローラーにリクエストを送る」が達成されました

③コントローラーからデータベースにリクエストを送る

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Task;

class TaskController extends Controller
{
    public function getTasks()
    {
        $data = Task::get();
        return $data;
    }
+    public function postTask(Request $request)
+    {
+        return Task::create([
+            'task_name' => $request['name'],
+            'task_detail' => $request['detail'],
+        ]);
+    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    use HasFactory;
+    protected $fillable = [
+        'task_name',
+        'task_detail',
+    ];
}

これで「③コントローラーからデータベースにリクエストを送る」が達成されました

④通信に成功した場合のみ一覧画面に遷移する

<template>
  <v-card>
    <v-card-title>
      <span>タスク 登録</span>
    </v-card-title>
    <v-card-text class="px-4">
      <v-card-subtitle>タスク情報</v-card-subtitle>
      <section>
        <ul>
          <li class="mb-3">
            <v-text-field label="タスク名" :value="newTaskName" @input="onCreateName" dense outlined color="primary"></v-text-field>
          </li>
          <li class="mb-3">
            <v-textarea label="詳細" :value="newTaskDetail" @input="onCreateDetail" dense outlined color="primary"></v-textarea>
          </li>
        </ul>
      </section>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="primary" @click="createTask()">
        <span>登録</span>
        <v-icon>mdi-send</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      newTaskName: "",
      newTaskDetail: "",
    };
  },
  methods: {
    onCreateName(userName) {
      this.newTaskName = userName;
    },
    onCreateDetail(userDetail) {
      this.newTaskDetail = userDetail;
    },
    createTask() {
      const requestConfig = {
        url: "http://localhost:8001/api/task",
        method: "POST",
        data: {
          name: this.newTaskName,
          detail: this.newTaskDetail,
        },
      };
      axios(requestConfig)
+        .then(() => {
+          this.$router.push("/main/task")
+        })
        .catch(() => {
          alert("エラー");
        });
    },
  },
};
</script>

これで「④通信に成功した場合のみ一覧画面に遷移する」が達成されました