feat: lab05 done

- add Users/Create User feature
- add Pages Functions
- add d1 database

src/App.vue

@@ -21,5 +21,5 @@ router.afterEach(() => {
     </KeepAlive>
     <component :is="Component" v-if="!$route.meta.keepAlive" />
   </RouterView>
-  <Footer :visitCount="visitCount" />
+  <!-- <Footer :visitCount="visitCount" /> -->
 </template>

src/components/CreateUser/CreateForm.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { ref } from 'vue';
+
+const emit = defineEmits(['new-user']);
+
+const name = defineModel();
+
+function submit() {
+  if (!name) {
+    return;
+  }
+
+  emit('new-user', { name: name.value });
+}
+</script>
+
+<template>
+  <form @submit.prevent="submit">
+    <fieldset class="ts-fieldset">
+      <legend class="ts-legend">New User</legend>
+      <div class="ts-wrap is-vertical">
+        <div class="ts-control">
+          <div class="label">Name</div>
+          <div class="content is-fluid">
+            <div class="ts-input">
+              <input name="name" type="text" placeholder="Name" v-model="name" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ts-wrap has-top-spaced is-end-aligned">
+        <button class="ts-button" type="submit" :class="{'is-disabled': name === '' }">Submit</button>
+      </div>
+    </fieldset>
+  </form>
+</template>

src/components/Navbar.vue

@@ -1,6 +1,5 @@
-<script>
+<script setup>
 import { RouterLink } from 'vue-router';
-
 </script>
 
 <template>
@@ -9,8 +8,7 @@ import { RouterLink } from 'vue-router';
       <div class="ts-wrap">
         <RouterLink class="ts-header is-brand" to="/">網路攻防實習</RouterLink>
         <div class="ts-tab is-tall">
-          <RouterLink class="item" to="/" :class="{'is-active': $route.path == '/'}">關於</RouterLink>
-          <RouterLink class="item" to="/board" :class="{'is-active': $route.path == '/board'}">留言板</RouterLink>
+          <RouterLink class="item" :to="route.path" :class="{'is-active': $route.path == route.path}" v-for="route in $router.options.routes.filter(route => route.meta.showInNav)">{{ route.meta.navName }}</RouterLink>
         </div>
       </div>
       <div class="actions">

src/router/index.js

@@ -1,19 +1,55 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import HomeView from '../views/HomeView.vue';
 import BoardView from '../views/BoardView.vue';
+import AboutView from '../views/AboutView.vue';
+import UsersView from '../views/UsersView.vue';
+import CreateUserView from '../views/CreateUserView.vue';
 
 const routes = [
   {
     path: '/',
     name: 'Home',
-    component: HomeView
+    component: HomeView,
+    meta: {
+      showInNav: true,
+      navName: '首頁'
+    }
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: AboutView,
+    meta: {
+      showInNav: true,
+      navName: '關於'
+    }
   },
   {
     path: '/board',
     name: 'Board',
     component: BoardView,
     meta: {
-      keepAlive: true
+      keepAlive: true,
+      showInNav: true,
+      navName: '留言板'
+    }
+  },
+  {
+    path: '/users',
+    name: 'Users',
+    component: UsersView,
+    meta: {
+      showInNav: true,
+      navName: '使用者列表'
+    }
+  },
+  {
+    path: '/users/create',
+    name: 'CreateUser',
+    component: CreateUserView,
+    meta: {
+      showInNav: true,
+      navName: '新增使用者'
     }
   }
 ];

src/views/AboutView.vue

@@ -0,0 +1,19 @@
+<script setup>
+import BlankSlate from '../components/Home/BlankSlate.vue';
+</script>
+
+<template>
+  <div class="ts-container">
+    <BlankSlate />
+    <div class="ts-content is-center-aligned">
+      <p>
+        我是楊東翰，目前就讀於國立臺灣大學資訊工程學系，這是我的個人網站，歡迎來到我的小天地！
+      </p>
+      <span class="ts-icon is-envelope-icon"></span>&nbsp;&nbsp;<a href="mailto:r13922074@csie.ntu.edu.tw" class="ts-link">r13922074@csie.ntu.edu.tw</a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/CreateUserView.vue

@@ -0,0 +1,32 @@
+<script setup>
+import CreateForm from '../components/CreateUser/CreateForm.vue';
+import { ref } from 'vue';
+
+const name = ref('');
+
+const onSubmit = async () => {
+  const response = await fetch('/api/users', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      name: name.value,
+    }),
+  });
+
+  if (!response.ok) {
+    alert('Failed to create user');
+    return;
+  }
+
+  alert('User created');
+  name.value = '';
+};
+</script>
+
+<template>
+  <div class="ts-container">
+    <CreateForm v-model="name" @new-user="onSubmit" />
+  </div>
+</template>

src/views/HomeView.vue

@@ -1,19 +1,5 @@
-<script setup>
-import BlankSlate from '../components/Home/BlankSlate.vue';
-</script>
-
 <template>
   <div class="ts-container">
-    <BlankSlate />
-    <div class="ts-content is-center-aligned">
-      <p>
-        我是楊東翰，目前就讀於國立臺灣大學資訊工程學系，這是我的個人網站，歡迎來到我的小天地！
-      </p>
-      <span class="ts-icon is-envelope-icon"></span>&nbsp;&nbsp;<a href="mailto:r13922074@csie.ntu.edu.tw" class="ts-link">r13922074@csie.ntu.edu.tw</a>
-    </div>
+    Home
   </div>
-</template>
-
-<style scoped>
-
-</style>
+</template>

src/views/UsersView.vue

@@ -0,0 +1,24 @@
+<script setup>
+import CreateForm from '../components/CreateUser/CreateForm.vue';
+import { onMounted, ref } from 'vue';
+
+const users = ref([]);
+
+onMounted(async () => {
+  const response = await fetch('/api/users');
+
+  if (!response.ok) {
+    users.value = [];
+    return;
+  }
+
+  const data = await response.json();
+  users.value = data;  
+});
+</script>
+
+<template>
+  <div class="ts-container">
+    <pre>{{ users }}</pre>
+  </div>
+</template>