はじめに
本記事はVue3 + laravel10でSPA作成 ①環境構築の続きになります。
今回の目標はトップページ作成とaxiosを使用したDB連携までとなります。
トップページ作成
１．App.vueの編集
resources\views\App.vueを作成します。各タグの説明は以下になります。
・v-app：このタグの中のみVuetifyが有効になります。
・topHeader：ヘッダーを読み込みます。
・router-view：URLに応じてrouter.jsで定義されたテンプレートが返されます。
<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を作成します。
<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を作成します。
<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を編集します。
※「：」は前後にあるコードの省略を表しています。
：
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を編集します。
：
use Illuminate\Support\Facades\Route;
+ use App\Http\Controllers\API\TodoController;
：
+ Route::get('getTodoList',[TodoController::class,'getTodoList']);
：
９．コントローラの作成
app\Http\ControllersにAPIフォルダを作成し、フォルダの中に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を起動します。
データベースを作成します。
テーブル作成を行います。
CREATE TABLE TODO_LIST(
TODO_ID INT AUTO_INCREMENT ,
TODO_NAME VARCHAR(100) ,
STATUS VARCHAR(5),
CREATE_DATE DATE,
PRIMARY KEY (TODO_ID));
動作確認
テーブルに適当なデータを入力し、画面表示時に入力したデータが表示されることを確認します。
