การสร้างตารางแสดงข้อมูลจาก API ด้วย Vue 3

แนะนำเนื้อหาในบทความ

จากบทความ ทดลองใช้งาน Angular, React, Vue และ Svelte ในการสร้างตารางแสดงข้อมูลที่ได้รับจาก API บทความนี้จะลงรายละเอียดในส่วนของ Vue 3 ครับ

เริ่มติดตั้งและสร้างโปรเจ็ค

ติดตั้ง Vue CLI โดยใช้คำสั่งด้านล่างนี้

npm install -g @vue/cli

ทำการสร้าง app ชื่อว่า my-table ซึ่งสำหรับ Vue สามารถใช้ Command หรือ UI ก็ได้

กรณีใช้ UI ให้ใช้คำสั่ง

vue ui

จากนั้นระบบจะเปิด Browser และเราสามารถใช้งานเมนูในหน้าเว็บเพื่อทำการสร้างโปรเจ็คได้ โดยให้เลือก Create แล้ว พิมพ์ชื่อโปรเจ็คว่า my-table โดยในตัวอย่างนี้้เลือกใช้ vue 3

เมื่อสร้างโปรเจ็คเสร็จ สามารถเลือกเมนู Serve และกด Run task ดังภาพด้านล่าง

หรือสามารถคำสั่งด้านล่างนี้

vue create my-table

เมื่อสร้างเรียบร้อยแล้ว เข้าไปยัง Folder ของ app และใช้คำสั่งด้านล่างนี้เพื่อดูผลลัพธ์

cd my-table
npm run serve

จากนั้น ให้เปิด Browser โดยใช้ URL: http://localhost:8080/ เพื่อแสดงหน้าจอเริ่มต้น

สร้างหน้าจอที่จะแสดงผลตาราง

ภายใต้ Folder: src/components ให้ทำการสร้างไฟล์ Table.vue ซึ่ง Folder Structure ของ Vue ในตัวอย่างนี้ จะเป็นดังภาพด้านล่างนี้

เพิ่มโค้ดพื้นฐานของ Component ในไฟล์ Table.vue ตามโค้ดด้านล่างนี้

การแสดงผลหน้าจอ table ให้แก้ไขไฟล์ App.vue ดังโค้ดด้านล่างนี้

โดยจุดที่เปลี่ยนแปลงจากโค้ดเดิม คือ บรรทัดที่ 1–3 ซึ่งทำการอ้างถึง Table ที่มาจากการ Import ในบรรทัดที่ 6 และแก้ไขในบรรทัดที่ 11 อีกจุดหนึ่ง

ถึงจุดนี้เมื่อเราทำการแก้ไขไฟล์และ Save หน้าจอที่ปรากฏบน Browser จะเกิดการ Refresh อัตโนมัติ หรือเรียกว่า Live Reload และแสดงผลลัพธ์หน้าจอ Component Table ซึ่งตอนนี้จะไม่มีอะไรนอกจากข้อความ Table

เรียกใช้ข้อมูลจาก API

ให้เพิ่มโค้ดที่ไฟล์ Table.vue ตามโค้ดด้านล่างนี้

บรรทัดที่ 9–10 จะเป็นของ data ที่จะ return ข้อมูล

บรรทัดที่ 13–27 ในส่วนของ mounted หมายถึงเมื่อมีการโหลดหน้าจอนี้แล้วจะทำการ fetch ข้อมูลจาก API

ซึ่งเมื่อถึงขั้นตอนนี้หากตรวจสอบที่ Browser ในส่วนของ console ซึ่งเป็นผลมาจากโค้ดในบรรทัดที่ 22 จะพบว่ามีข้อมูลมาพร้อมให้แสดงแล้ว นอกจากนี้ยังสามารถใช้ vue devtools เพื่อการตรวจสอบรายละเอียดได้ ดังภาพ

จากนั้นให้แก้ไขไฟล์ Table.vue เพิ่มเติม เพื่อนำข้อมูลใส่ไปในตารางเพื่อแสดงผล โดยใช้โค้ดด้านล่างนี้

ซึ่งเมื่อถึงจุดนี้จะได้ตารางหน้าตาปกติ ดังภาพ

การใช้งานร่วมกับ Bootstrap Framework

เพิ่มโค้ดเพื่ออ้างถึงไฟล์ css ของ bootstrap ที่ไฟล์ index.html ซึ่งอยู่ภายใต้ Folder:public ได้เลย ดังโค้ดในบรรทัดที่ 8–13 ด้านล่างนี้

ถึงจุดนี้ตารางจะแสดงผลตามรูปแบบของ Bootstrap Framework แล้ว ดังภาพ

การ Build สำหรับ Production

ให้สร้างไฟล์ชื่อว่า vue.config.js ที่ภายใต้ Folder หลักของโปรเจ็ค จากนั้นเพิ่มโค้ดด้านล่างนี้

จากนั้นสามารถเลือกเมนู build จาก vue ui และกด Run task ดังภาพด้านล่าง

หรือจะใช้คำสั่ง npm run build ก็ได้ ระบบจะทำการสร้าง Folder: dist พร้อมไฟล์ต่างๆ ให้ เป็นแบบ Static ซึ่งสามารถทำการ Upload ไฟล์ดังกล่าวไปยัง Hosting ได้เลย

โค้ดทั้งหมดของบทความนี้อยู่ที่ https://github.com/wutthiponghub/table-vue