Template
56 lines
1.7 KiB
Vue
56 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
const { data: notes, refresh } = await useFetch("/api/notes");
|
|
|
|
const title = ref("");
|
|
const body = ref("");
|
|
|
|
async function addNote() {
|
|
await $fetch("/api/notes", {
|
|
method: "POST",
|
|
body: { title: title.value, body: body.value },
|
|
});
|
|
title.value = "";
|
|
body.value = "";
|
|
await refresh();
|
|
}
|
|
|
|
const cacheKey = ref("greeting");
|
|
const cacheValue = ref("");
|
|
const cacheResult = ref("");
|
|
|
|
async function saveCacheValue() {
|
|
await $fetch(`/api/cache/${cacheKey.value}`, {
|
|
method: "PUT",
|
|
body: { value: cacheValue.value },
|
|
});
|
|
}
|
|
|
|
async function loadCacheValue() {
|
|
const res = await $fetch(`/api/cache/${cacheKey.value}`);
|
|
cacheResult.value = res.value ?? "(nothing cached yet)";
|
|
}
|
|
</script>
|
|
|
|
<template lang="pug">
|
|
main.mx-auto.max-w-xl.p-8.space-y-8
|
|
h1.text-2xl.font-bold Nuxt Boilerplate
|
|
|
|
section.space-y-2
|
|
h2.text-lg.font-semibold Notes (MySQL via Drizzle)
|
|
ul.list-disc.list-inside
|
|
li(v-for="note in notes" :key="note.id") {{ note.title }} - {{ note.body }}
|
|
form.flex.gap-2(@submit.prevent="addNote")
|
|
input.border.rounded.px-2.py-1(v-model="title" placeholder="Title")
|
|
input.border.rounded.px-2.py-1(v-model="body" placeholder="Body")
|
|
button.bg-blue-600.text-white.px-3.py-1.rounded(type="submit") Add
|
|
|
|
section.space-y-2
|
|
h2.text-lg.font-semibold Cache (Redis)
|
|
.flex.gap-2
|
|
input.border.rounded.px-2.py-1(v-model="cacheKey" placeholder="Key")
|
|
input.border.rounded.px-2.py-1(v-model="cacheValue" placeholder="Value")
|
|
button.bg-green-600.text-white.px-3.py-1.rounded(type="button" @click="saveCacheValue") Save
|
|
button.bg-gray-600.text-white.px-3.py-1.rounded(type="button" @click="loadCacheValue") Load
|
|
p {{ cacheResult }}
|
|
</template>
|