วิธีสร้าง Vue Frontend และเชื่อมต่อกับ Backend

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชันรายการที่ต้องทำโดยใช้ vue และเชื่อมต่อกับบริการแบ็กเอนด์ที่จัดการได้ คู่มือนี้เหมาะสำหรับคุณหากคุณต้องการเชี่ยวชาญการดำเนินการ crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่จำเป็นและสร้างส่วนติดต่อผู้ใช้ที่เข้าใจง่าย เมื่อสิ้นสุด คุณจะสามารถทำงานร่วมกับแบ็กเอนด์ที่ขับเคลื่อนโดย back4app ได้อย่างเต็มที่ การพัฒนาแอปพลิเคชันแบบฟูลสแต็กอาจเกี่ยวข้องกับการตั้งค่าแบ็กเอนด์ที่ซับซ้อน การจัดการฐานข้อมูล และการตรวจสอบสิทธิ์ผู้ใช้ เพื่อให้คุณสามารถมุ่งเน้นไปที่การสร้างส่วนหน้า vue ที่โดดเด่น เราจะใช้ back4app เพื่อจัดการแบ็กเอนด์ได้อย่างง่ายดาย back4app มีฐานข้อมูลที่พร้อมใช้งาน การตรวจสอบสิทธิ์ cloud code สำหรับตรรกะเซิร์ฟเวอร์ที่กำหนดเอง และ sdks เพื่อรวมเข้ากับแอปของคุณ สิ่งนี้ช่วยให้คุณสามารถปรับใช้แอปพลิเคชันที่สามารถขยายได้โดยไม่ต้องยุ่งยากกับการบำรุงรักษาเซิร์ฟเวอร์ ข้อสรุปที่สำคัญ โดยการติดตามบทแนะนำนี้ คุณจะ ตั้งค่าโครงการ vue สมัยใหม่โดยใช้เครื่องมือมาตรฐานในอุตสาหกรรม รวมบริการแบ็กเอนด์เข้ากับแอปพลิเคชันของคุณเพื่อจัดการข้อมูล ดำเนินการ crud ที่จำเป็นสำหรับ รายการที่ต้องทำ ที่มีพลศาสตร์ ปรับใช้แอปพลิเคชันที่ทำงานได้อย่างสมบูรณ์ผ่านการทำงานแบบคอนเทนเนอร์บน back4app ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี node js และ npm ติดตั้งบนเครื่องของคุณ ตรวจสอบการติดตั้งด้วย node v และ npm v ความรู้พื้นฐานเกี่ยวกับ vue , รวมถึงคอมโพเนนต์ ข้อมูลเชิงตอบสนอง และการจัดการเหตุการณ์ ความคุ้นเคยกับ composition api ของ vue 3 จะเป็นประโยชน์ บัญชี back4app เพื่อจัดการบริการแบ็กเอนด์ของคุณ ลงทะเบียนที่ back4app https //www back4app com/ หากคุณยังไม่ได้ลงทะเบียน เมื่อมีสิ่งเหล่านี้แล้ว คุณก็พร้อมที่จะตั้งค่าโปรเจกต์ของคุณ การตั้งค่าโปรเจกต์ เริ่มต้นด้วยการเตรียมสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มต้นโปรเจกต์ vue ของคุณด้วย vite เพื่อประสบการณ์การสร้างที่รวดเร็วและทันสมัย ตรวจสอบว่าคุณมี node js (รุ่น lts) ติดตั้งอยู่ หากไม่ให้ดาวน์โหลดจาก nodejs org https //nodejs org/ สร้างโปรเจกต์ vue ของคุณโดยการรัน npm create vite\@latest todo app 3 เปลี่ยนไปยังไดเรกทอรีโปรเจกต์ของคุณ cd todo app 4 ติดตั้ง dependencies npm install 5 เริ่มเซิร์ฟเวอร์พัฒนาเพื่อให้แน่ใจว่าทุกอย่างทำงาน npm run dev เปิด url ที่ให้มาในเบราว์เซอร์ของคุณ เมื่อส่วนหน้า vue ของคุณพร้อมแล้ว ขั้นตอนถัดไปคือการตั้งค่าฝั่งหลังของคุณบน back4app การสร้างแบ็กเอนด์ todo back4app มีบริการแบ็กเอนด์ที่จัดการอย่างเต็มที่ซึ่งขับเคลื่อนโดย parse , พร้อมด้วยฐานข้อมูล nosql, การตรวจสอบสิทธิ์ผู้ใช้, cloud code, และการสร้าง api อัตโนมัติ ทำตามขั้นตอนเหล่านี้เพื่อสร้างแบ็กเอนด์ เข้าสู่ระบบ ไปที่ แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่" ตั้งชื่อแอปของคุณ (เช่น todoapp ) และเลือก nodejs/parse เป็นประเภทแบ็กเอนด์ ไปที่ "ฐานข้อมูล" > "เบราว์เซอร์" , คลิก "สร้างคลาส" , และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และตั้งค่าการอนุญาตให้สามารถอ่านและเขียนได้สาธารณะ (คุณสามารถปรับปรุงสิ่งเหล่านี้ได้ในภายหลัง) ในคลาส task ให้เพิ่มฟิลด์ต่อไปนี้ title (string) – ชื่อของงาน description (string) – รายละเอียดเกี่ยวกับงาน completed (boolean) – สถานะการทำงานเสร็จ duedate (date) – เมื่อใดที่งานจะครบกำหนด คลิก "บันทึก" เพื่อสร้างสคีมา การรวม back4app กับ vue คุณจะใช้ parse javascript sdk เพื่อสื่อสารระหว่างส่วนหน้า vue ของคุณและส่วนหลัง back4app ติดตั้ง parse sdk npm install parse กำหนดค่า sdk โดยการแก้ไข src/main js นำเข้า sdk และเริ่มต้นด้วย application id และ javascript key จากแดชบอร์ด back4app (พบได้ที่ app settings > security & keys ) import { createapp } from 'vue'; import app from ' /app vue'; import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; createapp(app) mount('#app'); เมื่อเชื่อมต่อกับส่วนหลังของคุณแล้ว คุณสามารถสร้างอินเทอร์เฟซ to do list และรวมการดำเนินการ crud ได้แล้ว การพัฒนาส่วนหน้า แอปพลิเคชัน vue ของคุณจะประกอบด้วยส่วนประกอบในการเพิ่ม แสดง อัปเดต และลบงาน คุณจะใช้การตอบสนองของ vue เพื่อจัดการสถานะและรับประกันการอัปเดตที่ราบรื่น การจัดโครงสร้างส่วนประกอบของคุณ สร้าง components โฟลเดอร์ภายใน src เพื่อเก็บส่วนประกอบ vue ของคุณ mkdir src/components touch src/components/taskform vue src/components/tasklist vue src/components/taskitem vue taskform vue ส่วนประกอบนี้จัดการการเพิ่มงานใหม่ มันใช้ฟอร์มที่ควบคุมเพื่อจับข้อมูลจากผู้ใช้ \<template> \<form @submit prevent="handlesubmit"> \<input type="text" placeholder="task title" v model="title" required /> \<input type="text" placeholder="description" v model="description" required /> \<button type="submit">add task\</button> \</form> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskform', props \['fetchtasks'], data() { return { title '', description '' }; }, methods { async handlesubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this fetchtasks(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } }; \</script> tasklist vue ส่วนประกอบนี้แสดงรายการงานและรวมการกระทำของงาน \<template> \<div> \<p v if="!tasks length">no tasks available\</p> \<taskitem v for="task in tasks" \ key="task id" \ task="task" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import taskitem from ' /taskitem vue'; export default { name 'tasklist', components { taskitem }, props \['tasks', 'fetchtasks'] }; \</script> taskitem vue ส่วนประกอบนี้แสดงถึงงานแต่ละงานและรวมถึงการกระทำเพื่อทำเครื่องหมายว่าเสร็จสิ้นหรือเพื่อลบ \<template> \<div \ class="\['task item', { completed task completed }]"> \<div> \<h3>{{ task title }}\</h3> \<p>{{ task description }}\</p> \</div> \<div> \<button @click="handlecomplete"> {{ task completed ? 'undo' 'complete' }} \</button> \<button @click="handledelete">delete\</button> \</div> \</div> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskitem', props \['task', 'fetchtasks'], methods { async handlecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this fetchtasks(); } catch (error) { console error('error updating task ', error); } }, async handledelete() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this fetchtasks(); } catch (error) { console error('error deleting task ', error); } } } }; \</script> การจัดการสถานะใน app vue ในส่วนประกอบหลักของคุณ คุณจะจัดการรายการงานโดยใช้ข้อมูลที่ตอบสนองของ vue และฮุควงจรชีวิต \<template> \<div class="container"> \<h1>to do list\</h1> \<taskform \ fetchtasks="fetchtasks" /> \<tasklist \ tasks="tasks" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import { ref, onmounted } from 'vue'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform vue'; import tasklist from ' /components/tasklist vue'; export default { name 'app', components { taskform, tasklist }, setup() { const tasks = ref(\[]); const fetchtasks = async () => { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } }; onmounted(fetchtasks); return { tasks, fetchtasks }; } }; \</script> การจัดรูปแบบแอปพลิเคชัน สร้างไฟล์ styles css ใน src เพื่อเพิ่มการจัดรูปแบบพื้นฐาน container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } นำเข้าไฟล์สไตล์ชีตใน main js import ' /styles css'; การปรับใช้ frontend บน back4app web deployment back4app web deployment ช่วยให้คุณสามารถบรรจุแอปพลิเคชัน vue ของคุณสำหรับการผลิตด้วย docker การกำหนดค่า vite สำหรับการผลิต ปรับ vite config js เพื่อกำหนดเส้นทางพื้นฐานให้ถูกต้องสำหรับสภาพแวดล้อมที่บรรจุในคอนเทนเนอร์ import { defineconfig } from 'vite'; import vue from '@vitejs/plugin vue'; export default defineconfig({ plugins \[vue()], base ' /', }); สร้างการสร้างสำหรับการผลิต npm run build การสร้าง dockerfile สร้าง dockerfile ในไดเรกทอรีหลัก # stage 1 build the vue app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] การทดสอบ docker container ในเครื่อง สร้างภาพ docker ของคุณ docker build t todo frontend รันคอนเทนเนอร์ docker run p 8080 80 todo frontend เยี่ยมชม http //localhost 8080 เพื่อตรวจสอบว่าแอป vue ของคุณให้บริการอย่างถูกต้อง การปรับใช้ไปยัง back4app เริ่มต้นรีโพซิทอรี git เพิ่มไฟล์ของคุณและคอมมิต git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main เข้าสู่ระบบที่ back4app web deployment https //www back4app com/containers คลิก "สร้างแอปใหม่" , ระบุชื่อโปรเจกต์และเลือก github repository อนุญาตให้ back4app เข้าถึงรีโพซิทอรีของคุณและเลือก การปรับใช้ dockerfile ยืนยันการตั้งค่าการสร้างและคลิก "ปรับใช้" เพื่อเริ่มการสร้างครั้งแรก การตรวจสอบการปรับใช้ของคุณ หลังจากการปรับใช้ ให้ใช้แดชบอร์ด back4app เพื่อ ดูบันทึกสำหรับการแก้ไขข้อผิดพลาด ตรวจสอบการใช้ทรัพยากรและการรีสตาร์ทของคอนเทนเนอร์ ปรับใช้ใหม่เมื่อมีการคอมมิตใหม่โดยใช้ "trigger build" ตัวเลือก กำหนดค่าชื่อโดเมนที่กำหนดเองหากจำเป็น เข้าถึงแอปพลิเคชันสดที่ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ การทดสอบและการแก้ไขข้อผิดพลาด หลังจากการปรับใช้ ให้แน่ใจว่าฟรอนต์เอนด์ vue ของคุณสื่อสารกับแบ็กเอนด์ back4app ได้อย่างถูกต้อง ตรวจสอบการเรียก api เปิดเครื่องมือพัฒนาในเบราว์เซอร์ของคุณ (f12 → network) เพื่อตรวจสอบคำขอ api เพิ่มและดึงงาน ใช้ส่วนติดต่อของแอปเพื่อเพิ่มงานและตรวจสอบ back4app database browser การดำเนินการ crud ทดสอบการทำงานและลบงาน จากนั้นยืนยันการเปลี่ยนแปลงในแบ็กเอนด์ กรณีขอบ ตรวจสอบข้อมูลฟอร์มและจำลองสภาพเครือข่ายที่ช้า (โดยใช้ chrome devtools) เพื่อประเมินประสิทธิภาพ การแก้ไขปัญหาทั่วไป ข้อผิดพลาด cors อัปเดต allowed headers and domains ใน back4app (dashboard > app settings > security & keys) เพื่อรวม url ด้านหน้า ข้อผิดพลาดการตรวจสอบสิทธิ์ (401) ยืนยันว่า application id และ javascript key ของคุณถูกต้อง ปัญหาการปรับใช้แบ็กเอนด์ ตรวจสอบบันทึกของคอนเทนเนอร์ใน back4app dashboard และรีสตาร์ทคอนเทนเนอร์หากจำเป็น แนวทางปฏิบัติที่ดีที่สุดในการใช้ back4app กับ vue เพื่อเพิ่มประสิทธิภาพแอปพลิเคชันของคุณ คำขอข้อมูลที่มีประสิทธิภาพ ใช้คำขอแบบกลุ่มสำหรับการดำเนินการหลายรายการ const tasks = \[task1, task2, task3]; parse object saveall(tasks); ปรับแต่งการค้นหา ขอเฉพาะฟิลด์ที่จำเป็น query select('title', 'completed'); ตัวแปรสภาพแวดล้อม เก็บคีย์ที่สำคัญใน env ไฟล์ vite parse app id=your app id vite parse js key=your js key ความปลอดภัย ใช้ acls เพื่อจำกัดการเข้าถึง task setacl(new parse acl(parse user current())); โค้ดคลาวด์ ย้ายตรรกะที่ซับซ้อนไปยังฟังก์ชันแบ็คเอนด์เพื่อลดการเปิดเผย api บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบฟูลสแต็กอย่างสำเร็จโดยการตั้งค่า vue frontend, รวมเข้ากับแบ็คเอนด์ของ back4app และปรับใช้ผ่านการทำงานแบบคอนเทนเนอร์ บทเรียนนี้แสดงให้เห็นถึงเส้นทางที่ราบรื่นจากการพัฒนาท้องถิ่นไปยังการปรับใช้ในคลาวด์ โดยมั่นใจว่ามีการโต้ตอบที่ราบรื่นระหว่าง ui vue ของคุณและบริการแบ็คเอนด์ มองไปข้างหน้า พิจารณาการปรับปรุงเช่นการจัดการผู้ใช้ขั้นสูง, การอัปเดตแบบเรียลไทม์, และการรวมบริการของบุคคลที่สาม สำหรับข้อมูลเพิ่มเติม โปรดเยี่ยมชม เอกสาร back4app https //www back4app com/docs และสำรวจทรัพยากรของชุมชน