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

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชันรายการสิ่งที่ต้องทำโดยใช้ nuxt js และเชื่อมต่อกับบริการแบ็กเอนด์ที่จัดการโดย back4app คู่มือนี้เหมาะสำหรับคุณหากคุณต้องการเชี่ยวชาญการดำเนินการ crud ที่สำคัญ (สร้าง, อ่าน, อัปเดต, ลบ) และสร้างอินเทอร์เฟซที่มีพลศาสตร์และตอบสนองโดยใช้ nuxt js เมื่อสิ้นสุดบทแนะนำนี้ แอปพลิเคชันของคุณจะทำงานร่วมกับแบ็กเอนด์ที่จัดการการจัดเก็บข้อมูล การตรวจสอบสิทธิ์ และอื่น ๆ ได้อย่างราบรื่น การพัฒนาแอปพลิเคชันแบบฟูลสแต็กอาจเป็นเรื่องท้าทายเนื่องจากการกำหนดค่าแบ็กเอนด์และการจัดการฐานข้อมูล เพื่อทำให้กระบวนการของคุณง่ายขึ้น เราใช้ back4app— บริการแบ็กเอนด์ที่ทรงพลัง —ช่วยให้คุณมุ่งเน้นไปที่การพัฒนาเฟรนต์เอนด์ nuxt js ที่มีฟีเจอร์มากมาย back4app ให้บริการฐานข้อมูล nosql ที่จัดการอย่างเต็มที่ การตรวจสอบสิทธิ์ผู้ใช้ cloud code สำหรับตรรกะที่กำหนดเอง และ sdk สำหรับการรวมที่ง่ายดาย สิ่งนี้ช่วยให้คุณสร้างและปรับใช้แอปพลิเคชันที่สามารถขยายได้โดยไม่ต้องจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ ข้อสรุปที่สำคัญ โดยการติดตามบทแนะนำนี้ คุณจะ เริ่มต้นโครงการ nuxt js สมัยใหม่โดยใช้ nuxt cli รวมบริการแบ็กเอนด์เพื่อจัดการข้อมูลของแอปพลิเคชันของคุณ ดำเนินการ crud ที่สำคัญสำหรับ รายการสิ่งที่ต้องทำ ที่มีพลศาสตร์ ปรับใช้แอปพลิเคชันที่ทำงานได้อย่างสมบูรณ์โดยใช้เวิร์กโฟลว์ที่บรรจุใน back4app ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี node js และ npm ติดตั้งบนเครื่องของคุณ ยืนยันการติดตั้งด้วย node v และ npm v ความรู้พื้นฐานเกี่ยวกับ nuxt js , รวมถึงคอมโพเนนต์ หน้า และการดึงข้อมูลแบบอะซิงโครนัส บัญชี back4app เพื่อจัดการบริการแบ็กเอนด์ของคุณ ลงทะเบียนที่ back4app https //www back4app com/ หากคุณยังไม่ได้ทำ เมื่อมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะเริ่มสร้างโปรเจกต์ของคุณ การตั้งค่าโปรเจกต์ เริ่มต้นด้วยการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มต้นโปรเจกต์ nuxt js ใหม่ ตรวจสอบให้แน่ใจว่าคุณมี node js (เวอร์ชัน lts) ติดตั้ง หากไม่ให้ดาวน์โหลดจาก nodejs org https //nodejs org/ สร้างโปรเจกต์ nuxt js ของคุณโดยใช้ nuxt cli npx nuxi init todo app ไปที่ไดเรกทอรีโปรเจกต์ของคุณ cd todo app ติดตั้ง dependencies ที่จำเป็น npm install เริ่มเซิร์ฟเวอร์พัฒนาเพื่อตรวจสอบการตั้งค่า npm run dev เปิด url ที่ให้มาในเบราว์เซอร์ของคุณเพื่อดูแอป nuxt js ของคุณทำงานอยู่ เมื่อส่วนหน้าของคุณพร้อมแล้ว ให้ดำเนินการสร้างส่วนหลังของคุณบน back4app การสร้าง backend todo back4app มีบริการ backend ที่จัดการอย่างเต็มที่ซึ่งขับเคลื่อนโดย parse , ซึ่งรวมถึงฐานข้อมูล nosql, การตรวจสอบสิทธิ์, cloud code, และ api ที่สร้างโดยอัตโนมัติ ทำตามขั้นตอนเหล่านี้เพื่อตั้งค่า backend ของคุณ เข้าสู่ระบบ ไปยัง แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่" ตั้งชื่อแอปของคุณ (เช่น todoapp ) และเลือก nodejs/parse เป็นประเภท backend ไปที่ "ฐานข้อมูล" > "เบราว์เซอร์" , คลิก "สร้างคลาส" , และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และตั้งค่าการอนุญาตให้สามารถอ่านและเขียนสาธารณะ (คุณสามารถปรับแต่งการตั้งค่าเหล่านี้ได้ในภายหลัง) ในคลาส task ให้เพิ่มฟิลด์ต่อไปนี้ title (string) – ชื่อของงาน description (string) – รายละเอียดเกี่ยวกับงาน completed (boolean) – สถานะการทำงานเสร็จ duedate (date) – กำหนดเวลาสำหรับงาน คลิก "บันทึก" เพื่อสร้างสคีมา การรวม back4app กับ nuxt js คุณจะใช้ parse javascript sdk เพื่อเชื่อมต่อแอป nuxt js ของคุณกับ back4app backend ติดตั้ง parse sdk npm install parse กำหนดค่า sdk โดยการสร้างโมดูลเฉพาะ สำหรับตัวอย่าง สร้าง plugins/parse client js ด้วยเนื้อหาดังต่อไปนี้ 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; export default parse; จากนั้น ลงทะเบียนปลั๊กอินนี้ใน nuxt config ts (หรือ nuxt config js ) export default { plugins \[ { src ' /plugins/parse client js', mode 'client' } ] } คุณสามารถนำเข้า parse ในหน้า หรือ คอมโพเนนต์ของคุณเพื่อโต้ตอบกับ backend การพัฒนา frontend แอปพลิเคชัน nuxt js ของคุณจะประกอบด้วยหน้าและคอมโพเนนต์เพื่อเพิ่ม แสดง อัปเดต และลบงาน ใช้การจัดการเส้นทางแบบไฟล์ของ nuxt และการดึงข้อมูลแบบอะซิงโครนัสเพื่อสร้างรายการสิ่งที่ต้องทำที่มีพลศาสตร์ การจัดโครงสร้างคอมโพเนนต์ของคุณ สร้าง components โฟลเดอร์ในโปรเจกต์ของคุณเพื่อจัดระเบียบคอมโพเนนต์ ui ของคุณ mkdir components คุณจะสร้างส่วนประกอบต่อไปนี้ taskform vue – สำหรับการเพิ่มงานใหม่ tasklist vue – เพื่อแสดงรายการงาน taskitem vue – เพื่อแสดงงานแต่ละรายการ taskform vue ส่วนประกอบนี้แสดงแบบฟอร์มที่บันทึกรายละเอียดของงานและส่งไปยัง back4app \<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', 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 $emit('refresh'); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } }; \</script> taskitem vue คอมโพเนนต์นี้แสดงถึงงานแต่ละงานและมีปุ่มเพื่อสลับสถานะการเสร็จสิ้นหรือเพื่อลบงาน \<template> \<div \ class="\['task item', { completed task completed }]"> \<div> \<h3>{{ task title }}\</h3> \<p>{{ task description }}\</p> \</div> \<div> \<button @click="togglecomplete"> {{ task completed ? 'undo' 'complete' }} \</button> \<button @click="deletetask">delete\</button> \</div> \</div> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskitem', props \['task'], methods { async togglecomplete() { 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 $emit('refresh'); } catch (error) { console error('error updating task ', error); } }, async deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this $emit('refresh'); } catch (error) { console error('error deleting task ', error); } } } }; \</script> tasklist vue คอมโพเนนต์นี้แสดงรายการงานโดยการวนซ้ำผ่านอาร์เรย์และเรนเดอร์แต่ละงานโดยใช้คอมโพเนนต์ taskitem \<template> \<div> \<p v if="tasks length === 0">no tasks available\</p> \<taskitem v for="task in tasks" \ key="task id" \ task="task" @refresh="refreshtasks" /> \</div> \</template> \<script> import taskitem from ' /taskitem vue'; export default { name 'tasklist', props \['tasks'], methods { refreshtasks() { this $emit('refresh'); } }, components { taskitem } }; \</script> การรวมหน้า ในหน้าแรกของคุณ (เช่น pages/index vue ) จัดการสถานะของงานและรวมส่วนประกอบของคุณ \<template> \<div class="container"> \<h1>to do list\</h1> \<taskform @refresh="fetchtasks" /> \<tasklist \ tasks="tasks" @refresh="fetchtasks" /> \</div> \</template> \<script> import taskform from ' /components/taskform vue'; import tasklist from ' /components/tasklist vue'; import parse from 'parse/dist/parse min js'; export default { components { taskform, tasklist }, data() { return { tasks \[] }; }, methods { async fetchtasks() { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); this tasks = results map((task) => ({ id task id, task tojson() })); } catch (error) { console error("error fetching tasks ", error); } }, }, mounted() { this fetchtasks(); } }; \</script> การจัดรูปแบบแอปพลิเคชัน สร้างไฟล์สไตล์ชีตทั่วโลก (เช่น assets/css/main css ) เพื่อเพิ่มการจัดรูปแบบพื้นฐาน container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } 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; } } รวมไฟล์สไตล์ชีตนี้ในการกำหนดค่าของ nuxt โดยการเพิ่มลงใน css อาร์เรย์ใน nuxt config ts export default { css \[' /assets/css/main css'] } การปรับใช้ frontend บน back4app web deployment back4app web deployment มีสภาพแวดล้อมที่บรรจุภัณฑ์เพื่อโฮสต์แอปพลิเคชัน nuxt js ของคุณ การกำหนดค่า nuxt js สำหรับการผลิต อัปเดต nuxt config ts ของคุณหากจำเป็นเพื่อตั้งค่าเส้นทางพื้นฐานสำหรับการปรับใช้ export default { router { base ' /' } } สร้างการผลิต npm run build npm run generate การสร้าง dockerfile สร้าง dockerfile ในรากโปรเจกต์ของคุณด้วยเนื้อหาดังต่อไปนี้ # stage 1 build the nuxt js app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build run npm run generate \# 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 ในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าแอป nuxt js ของคุณให้บริการอย่างถูกต้อง การปรับใช้ไปยัง 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 ของคุณ อนุญาตให้ back4app และเลือก การปรับใช้ dockerfile ยืนยันการตั้งค่าการสร้างและคลิก "ปรับใช้" เพื่อเริ่มการปรับใช้ การติดตามการปรับใช้ของคุณ หลังจากการปรับใช้ ใช้แดชบอร์ด back4app เพื่อ ดูบันทึกสำหรับการแก้ไขข้อผิดพลาด ติดตามประสิทธิภาพของคอนเทนเนอร์และการใช้ทรัพยากร กระตุ้นการสร้างใหม่เมื่อมีการคอมมิตใหม่ กำหนดค่าชื่อโดเมนที่กำหนดเองหากจำเป็น เข้าถึงแอปพลิเคชันสดของคุณที่ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ การทดสอบและการดีบัก หลังจากการปรับใช้ ยืนยันว่าฟรอนต์เอนด์ nuxt js ของคุณสามารถสื่อสารกับแบ็กเอนด์ back4app ได้อย่างถูกต้อง การตรวจสอบ api ใช้เครื่องมือพัฒนาในเบราว์เซอร์ของคุณ (f12 → network) เพื่อตรวจสอบการเรียก api การดำเนินการงาน เพิ่ม เสร็จสิ้น และลบงานผ่าน ui และตรวจสอบการอัปเดตใน back4app database browser การจัดการข้อผิดพลาด ตรวจสอบบันทึกคอนโซลสำหรับข้อผิดพลาดและทดสอบกรณีขอบเช่นการส่งข้อมูลว่าง การทดสอบประสิทธิภาพ จำลองสภาพเครือข่ายที่ช้าโดยใช้เครื่องมือในเบราว์เซอร์เพื่อตรวจสอบความตอบสนอง แนวทางปฏิบัติที่ดีที่สุดในการใช้ back4app กับ nuxt js เพื่อเพิ่มประสิทธิภาพแอปพลิเคชันของคุณ คำขอที่มีประสิทธิภาพ ใช้การดำเนินการแบบกลุ่มสำหรับการจัดการงานหลายรายการ const tasks = \[task1, task2, task3]; parse object saveall(tasks); การค้นหาที่ปรับให้เหมาะสม ดึงเฉพาะฟิลด์ที่จำเป็น query select('title', 'completed'); การจัดการสิ่งแวดล้อม เก็บกุญแจที่สำคัญในตัวแปรสิ่งแวดล้อม nuxt public parse app id=your app id nuxt public parse js key=your js key ความปลอดภัย ใช้ acls เพื่อจำกัดการเข้าถึง task setacl(new parse acl(parse user current())); การถ่ายโอนภาระงานไปยัง backend ใช้ cloud code สำหรับตรรกะที่ซับซ้อนเพื่อลดการเปิดเผย api บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบ full stack โดยการสร้างส่วนหน้า nuxt js รวมเข้ากับแบ็กเอนด์ของ back4app และปรับใช้โดยใช้เวิร์กโฟลว์ที่บรรจุในคอนเทนเนอร์ บทแนะนำนี้ได้แนะนำคุณผ่านทุกขั้นตอน—ตั้งแต่การพัฒนาท้องถิ่นไปจนถึงการปรับใช้ในคลาวด์—เพื่อให้แน่ใจว่ามีการโต้ตอบที่ราบรื่นระหว่าง ui ของ nuxt js และบริการแบ็กเอนด์ มองไปข้างหน้า พิจารณาการปรับปรุงเช่นการอัปเดตแบบเรียลไทม์ การปรับปรุงการตรวจสอบสิทธิ์ และการรวมระบบของบุคคลที่สาม สำหรับการเรียนรู้เพิ่มเติม โปรดเยี่ยมชม เอกสาร back4app https //www back4app com/docs และสำรวจทรัพยากรของชุมชน