1b9119e606
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 42s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 3s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
3.5 KiB
3.5 KiB
วันที่บันทึกปฏิบัติงาน * 18/02/2026
องค์ความรู้ที่ได้รับ *
- การใช้งาน Nuxt 3 Routing (useRoute, useRouter) ในการจัดการ Query Parameters
- การเชื่อมโยง State กับ URL เพื่อสร้าง Deep Linking ให้แชร์ลิงก์หมวดหมู่ได้
- การใช้งาน Vue 3 Composition API (Script Setup) แทน Options API เพื่อความเป็นระเบียบและลดความซับซ้อน
- การตกแต่ง UI ด้วย Tailwind CSS ขั้นสูง (Gradients, Glow Effects, Backdrop Filters) เพื่อให้ได้ธีม Premium/Clean
- การจัดการ Event Listener ใน Vue Component (onMounted, onUnmounted) เพื่อป้องกัน Memory Leak
รายละเอียด *
- พัฒนาระบบ Filter หมวดหมู่คอร์สเรียน เชื่อมโยงหน้าแรก (Home) กับหน้าค้นหา (Browse)
- ปรับแก้โครงสร้าง Code ในหน้า
index.vueให้ใช้ Script Setup ทั้งหมดเพื่อลดความซับซ้อนและแก้ปัญหาการเรียกใช้ตัวแปร - ปรับดีไซน์ส่วน Call to Action (CTA) ในหน้า
browse/index.vueและbrowse/recommended.vueให้ดูสว่างและทันสมัยขึ้นโดยใช้แสงและเงา (Blue Glow)
ปัญหาและอุปสรรค *
- พบปัญหาการทำงานร่วมกันระหว่าง Options API และ Script Setup ในไฟล์
index.vueทำให้ฟังก์ชันบางตัวเรียกใช้ไม่ได้ - ระบบ Filter เดิมไม่ทำงานเมื่อกดย้อนกลับ (Back Button) เนื่องจากไม่ได้ Watch การเปลี่ยนแปลงของ URL Query
- การดึงข้อมูลคอร์สเริ่มต้นได้ไม่ครบเนื่องจาก API มีการกำหนด Limit ไว้
รายละเอียด *
- แก้ไขโดยการยุบรวม Code ทั้งหมดให้เป็นรูปแบบ Script Setup มาตรฐานเดียว
- เพิ่ม
watch(() => route.query.category)ในหน้า Browse เพื่อให้อัปเดตข้อมูลทุกครั้งที่ URL เปลี่ยน - เพิ่มพารามิเตอร์
limit: 1000ในการเรียก API เพื่อดึงข้อมูลคอร์สทั้งหมดมาแสดง
หลักฐานการปฏิบัติงาน (เฉพาะไฟล์ JPG, JPEG, PNG, PDF.)
- แก้ไขไฟล์
pages/index.vue(เพิ่ม goBrowse, ย้าย Logic) - แก้ไขไฟล์
pages/browse/index.vue(เพิ่ม Query Watcher, ปรับ UI) - แก้ไขไฟล์
pages/browse/recommended.vue(ปรับ UI ส่วน CTA) - แก้ไขไฟล์
components/layout/LandingHeader.vue(แก้ Memory Leak)