ทำส่วน Layout และ Login

ทำ LoginView

สิ่งที่จะทำ

• เพิ่ม form สำหรับกรอก email, password มา
• ตอนกด Login ให้เข้าไปหน้าด้านในได้
• (optional) เพิ่ม validate email เข้ามาว่ากรอก email ต้องถูกต้อง

<script setup>
import { RouterLink } from 'vue-router';
</script>

<template>
  <div class="min-h-screen bg-base-200 flex items-center">
    <div class="card mx-auto w-full max-w-2xl shadow-xl">
      <div class="py-24 px-10">
        <h2 class="text-2xl font-semibold mb-2 text-center">Login</h2>
        <div class="mb-4">
          <div class="form-control w-full mt-4">
            <label class="label"
              ><span class="label-text text-base-content undefined"
                >Email Id</span
              ></label
            ><input
              type="emailId"
              placeholder=""
              class="input input-bordered w-full"
              value=""
            />
          </div>
          <div class="form-control w-full mt-4">
            <label class="label"
              ><span class="label-text text-base-content undefined"
                >Password</span
              ></label
            ><input
              type="password"
              placeholder=""
              class="input input-bordered w-full"
              value=""
            />
          </div>
        </div>
        <p class="text-center text-error mt-8"></p>
        <RouterLink to="/admin/dashboard" class="btn mt-2 w-full btn-primary"
          >Login</RouterLink
        >
      </div>
    </div>
  </div>
</template>

ผลลัพธ์ของหน้า Login

ทำ AdminLayout

เราจะสร้าง Layout ใหญ่สำหรับคุม style และ sidebar ของทุกหน้า admin โดย สิ่งที่เราจะทำกัน

• เริ่มทำ sidebar สำหรับเลือก Menu ของ Admin โดยเมนูจะประกอบด้วย
  • /admin/dashboard = หน้า Dashboard สำหรับสรุปสถิติรวม
  • /admin/products = หน้า Product Management สำหรับจัดการ product
  • /admin/orders = หน้า Order Management สำหรับจัดการ order และตรวจสอบ order
  • /admin/users = หน้า User Management สำหรับจัดการ user
  • /admin/login = เมนู Logout (ปุ่มสำหรับกลับไปหน้า Login)
• เพิ่ม <slot></slot> ตรงกลางสำหรับให้ใส่ component ในแต่ละหน้า
• ทำ style ของ sidebar (ใช้ menu ของ daisyUI)

<script setup>
import { RouterLink } from 'vue-router'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const pageData = [
  {
    name: 'Dashboard',
    route: '/admin/dashboard',
  },
  {
    name: 'Product',
    route: '/admin/products',
  },
  {
    name: 'Order',
    route: '/admin/orders',
  },
  {
    name: 'User',
    route: '/admin/users',
  },
  {
    name: 'Logout',
    route: '/admin/login',
  },
]

const currentPath = ref('')
currentPath.value = route.path
</script>

<template>
  <div class="drawer drawer-open">
    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content p-4">
      <slot></slot>
    </div>
    <div class="drawer-side">
      <label for="my-drawer-2" class="drawer-overlay"></label>
      <ul class="menu p-4 w-60 h-full bg-base-200 text-base-content">
        <!-- Sidebar content here -->
        <li class="mb-2 font-semibold text-2xl">
          <div>Admin {{ pageName }}</div>
        </li>
        <li v-for="page in pageData">
          <RouterLink :to="page.route" :class="currentPath === page.route ? 'active' : ''">
            {{ page.name }}
          </RouterLink>
        </li>
      </ul>
    </div>
  </div>
</template>

ผลลัพธ์