Vue3 + laravel10でSPA作成　②DB連携 #初心者

はじめに

本記事はVue3 + laravel10でSPA作成　①環境構築の続きになります。
今回の目標はトップページ作成とaxiosを使用したDB連携までとなります。

トップページ作成

１．App.vueの編集

resources\views\App.vueを作成します。各タグの説明は以下になります。
・v-app：このタグの中のみVuetifyが有効になります。
・topHeader：ヘッダーを読み込みます。
・router-view：URLに応じてrouter.jsで定義されたテンプレートが返されます。

App.vue

<template>
    <v-app>
        <topHeader></topHeader>
        <v-main>
            <router-view></router-view>
        </v-main>
    </v-app>
</template>
<script setup>
import topHeader from "./TopHeader.vue"
</script>

２．トップヘッダー部品の作成

resources\views\TopHeader.vueを作成します。

TopHeader.vue

<template>
    <v-app-bar color="blue-grey-lighten-3" density="compact">
        <v-toolbar-title>Todoアプリ</v-toolbar-title>
    </v-app-bar>
</template>

３．トップページの中身を作成

resources\views\Home.vueを作成します。

Home.vue

<template>
    <v-container fluid>
        <h4 class="mb-5">ToDo一覧</h4>
        <div class="table-list">
            <v-table density="compact">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>タイトル</th>
                        <th>ステータス</th>
                        <th>作成日</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in todoList" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.TODO_NAME }}</td>
                        <td>{{ item.STATUS }}</td>
                        <td>{{ item.CREATE_DATE }}</td>
                        <td>
                            <v-btn @click="moveTodoDetail(item.TODO_ID)" density="compact" class="mx-4"
                                color="green">更新</v-btn>
                            <v-btn @click="deleteTodo" density="compact" color="red">削除</v-btn>
                        </td>
                    </tr>
                </tbody>
            </v-table>
        </div>
        <div class="mt-5">
            <v-row>
                <v-col cols="10"></v-col>
                <v-col cols="1">
                    <v-btn @click="createTodo" color="blue-accent-2">新規作成</v-btn>
                </v-col>
            </v-row>
        </div>
    </v-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 一覧取得
const todoList = ref([])
onMounted(async () => {
    var res = await axios.get('getTodoList')
    todoList.value = res.data
})

// 詳細に遷移(更新モード)
const router = useRouter()
const moveTodoDetail = (todoId) => {
    router.push({ name: 'detail', params: { todoId: todoId } })
}

// 詳細に遷移(新規モード)
const createTodo = () => {
    router.push({ name: 'detail' })
}

</script>

４．ルーティング部品の作成

resources\js\router.jsを作成します。

import { createRouter, createWebHistory } from "vue-router";
import home from "../views/Home.vue"

const routes = [
    {
        path: "/",
        component: home,
        name: "home"
    },
]

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: routes
})

export default router

５．app.jsの編集

手順４で作成したルーディング部品を使用するようにresources\js\app.jsを編集します。
※「：」は前後にあるコードの省略を表しています。

app.js

：
import 'vuetify/dist/vuetify.min.css'
+ import router from './router'
：
app.use(vuetify) 
+ app.use(router) 
：

６．axios部品の作成

axiosと呼ばれるwebサーバ側とのHttp通信を行うライブラリを使用します。
resources\js\axios.jsを作成します。

import axios from "axios";

const axiosInstance = axios.create({
    baseURL: 'http://localhost:8000/api/',
    headers: {
        "Content-type": "application/json",
    },
})

export default axiosInstance

７．bootstrap.jsの編集

resources\js\bootstrap.jsを編集します。

- import axios from 'axios';
+ import axios from './axios';
window.axios = axios;

- window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

８．api.phpの編集

サーバ側の処理を記述します。
web.phpとapi.phpどちらも使用できますが、今回はapi.phpを使用します。
api.phpを使用する場合には、IPアドレスとルーティング識別文字列の間に/apiが付与されるため、手順６で共通で/apiを付与してアクセスするよう指定しております。
routes\api.phpを編集します。

api.php

：
use Illuminate\Support\Facades\Route;
+ use App\Http\Controllers\API\TodoController;
：
+ Route::get('getTodoList',[TodoController::class,'getTodoList']);
：

９．コントローラの作成

app\Http\ControllersにAPIフォルダを作成し、フォルダの中にTodoController.phpを作成します。

TodoController.php

<?php

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;

class TodoController extends Controller
{
    public function getTodoList() {
        $sql = 'SELECT * FROM TODO_LIST';
        $items = DB::select($sql);
        return $items;
    }
}

１０．設定ファイルの編集

.envを編集します。

- DB_DATABASE=laravel
+ DB_DATABASE=TODO

DB作成

xamppの「Admin」ボタンからphpMyAdminを起動します。

データベースを作成します。

テーブル作成を行います。

TODO_LIST.sql

CREATE TABLE TODO_LIST(
    TODO_ID INT AUTO_INCREMENT ,
    TODO_NAME VARCHAR(100) ,
    STATUS VARCHAR(5),
    CREATE_DATE DATE,
    PRIMARY KEY (TODO_ID));

動作確認

テーブルに適当なデータを入力し、画面表示時に入力したデータが表示されることを確認します。

Vue3 + laravel10でSPA作成 ②DB連携