How to Develop a CRUD App with Vue.js?

บทนำ ในคู่มือนี้ คุณจะได้ค้นพบวิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ทำงานได้อย่างสมบูรณ์ด้วย vue js เราจะใช้พลังของ back4app เพื่อจัดการกับแบ็กเอนด์ของคุณอย่างง่ายดาย คู่มือนี้จะพาคุณไปตั้งค่าโปรเจกต์ back4app สร้างโมเดลข้อมูลที่มีพลศาสตร์ และดำเนินการ crud ด้วย vue js ในตอนแรก คุณจะตั้งค่าโปรเจกต์ back4app ที่ชื่อ basic crud app vue , ซึ่งให้ฐานข้อมูลที่ไม่สัมพันธ์กันที่แข็งแกร่งสำหรับแอปของคุณ คุณจะออกแบบโมเดลข้อมูลของคุณโดยการกำหนดคอลเลกชันและฟิลด์ด้วยตนเองหรือโดยการใช้ ai agent อัจฉริยะของ back4app ถัดไป คุณจะจัดการข้อมูลของคุณด้วย back4app admin app—อินเทอร์เฟซที่ใช้งานง่ายแบบลากและวาง—ช่วยให้คุณสร้าง อ่าน อัปเดต และลบระเบียนได้อย่างง่ายดาย สุดท้าย คุณจะรวมฟรอนต์เอนด์ vue js ของคุณกับ back4app ผ่านการเรียก rest api (โดยใช้ axios) เพื่อดำเนินการ crud ที่ปลอดภัยและมีประสิทธิภาพ เมื่อสิ้นสุดการสอนนี้ คุณจะมีแอปพลิเคชัน vue js ที่พร้อมใช้งานในระดับการผลิต ซึ่งทำฟังก์ชัน crud ที่จำเป็นพร้อมกับการรับรองความปลอดภัยของผู้ใช้และการจัดการข้อมูล ข้อคิดสำคัญ เรียนรู้การสร้างแอป crud ที่ใช้ vue js โดยมีแบ็กเอนด์ที่สามารถขยายได้ เข้าใจวิธีการจัดโครงสร้างแบ็กเอนด์ที่ยืดหยุ่นและเชื่อมต่อกับโปรเจกต์ vue js ของคุณ ค้นพบวิธีการใช้แอปผู้ดูแลระบบที่ใช้งานง่ายของ back4app สำหรับการดำเนินการ crud ที่ราบรื่น สำรวจเทคนิคการปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker สำหรับแอปพลิเคชัน vue js ของคุณ ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี บัญชี back4app พร้อมโปรเจกต์ใหม่ที่ตั้งค่าแล้ว ต้องการความช่วยเหลือ? ดู เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา vue js ใช้ vue cli หรือ ide ที่คุณชื่นชอบเช่น vscode ความรู้พื้นฐานเกี่ยวกับ vue js, javascript สมัยใหม่ และ rest apis ทบทวน เอกสาร vue js https //vuejs org/guide/introduction html หากจำเป็น ขั้นตอนที่ 1 – การตั้งค่าโครงการ การสร้างโครงการ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโครงการของคุณ basic crud app vue และทำตามคำแนะนำเพื่อเสร็จสิ้นการตั้งค่า สร้างโครงการใหม่ หลังจากสร้างโครงการแล้ว มันจะปรากฏในแดชบอร์ดของคุณ ซึ่งเป็นการวางรากฐานสำหรับแบ็กเอนด์ของคุณ ขั้นตอนที่ 2 – การออกแบบโมเดลข้อมูล การจัดโครงสร้างข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะต้องกำหนดหลายคอลเลกชันภายในโครงการ back4app ของคุณ ตัวอย่างด้านล่างแสดงคอลเลกชันหลักและฟิลด์ที่จำเป็นสำหรับฟังก์ชัน crud 1\ คอลเลกชันรายการ คอลเลกชันนี้เก็บรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ สร้าง id ที่ไม่ซ้ำกันโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาของการอัปเดตครั้งล่าสุด 2\ การรวบรวมผู้ใช้ คอลเลกชันนี้จัดการข้อมูลประจำตัวของผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ สร้าง id ที่ไม่ซ้ำกันโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสสำหรับการเข้าสู่ระบบ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่อัปเดตบัญชีล่าสุด คุณสามารถเพิ่มคอลเลกชันและฟิลด์เหล่านี้ด้วยตนเองในแดชบอร์ด back4app สร้างชั้นเรียนใหม่ คุณสามารถเพิ่มฟิลด์ได้โดยการเลือกประเภทข้อมูล, ระบุชื่อฟิลด์, ตั้งค่าค่าปริยาย, และทำเครื่องหมายว่าจำเป็นหากจำเป็น สร้างคอลัมน์ การใช้ตัวแทน ai ของ back4app สำหรับการตั้งค่า schema ตัวแทน ai ของ back4app ที่รวมอยู่สามารถสร้าง schema ข้อมูลของคุณโดยอัตโนมัติตามคำอธิบายของคุณ เครื่องมือนี้ช่วยเร่งการตั้งค่าและทำให้แน่ใจว่าโมเดลของคุณตรงตามข้อกำหนด crud วิธีการใช้ตัวแทน ai เปิดตัวแทน ai เข้าสู่ระบบแดชบอร์ด back4app ของคุณและไปที่ตัวแทน ai ในการตั้งค่าโครงการของคุณ อธิบายโมเดลข้อมูลของคุณ ป้อนคำแนะนำที่ละเอียดซึ่งอธิบายถึงคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน เมื่อ ai agent สร้าง schema ที่เสนอ, ตรวจสอบและยืนยันเพื่อดำเนินการตั้งค่า ตัวอย่างคำสั่ง create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) วิธีการที่ขับเคลื่อนด้วย ai นี้ช่วยประหยัดเวลาและรับประกันโมเดลข้อมูลที่ได้รับการปรับให้เหมาะสมและสอดคล้องกัน ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบ & จัดการการดำเนินการ crud ภาพรวมของแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app ให้ส่วนติดต่อที่ไม่มีโค้ดสำหรับการจัดการแบ็กเอนด์ ด้วยฟีเจอร์การลากและวาง คุณสามารถทำการดำเนินการ crud ได้อย่างง่ายดาย เช่น การสร้าง การอ่าน การอัปเดต และการลบระเบียน การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบ โดยการสร้างบัญชีผู้ดูแลระบบแรกของคุณ กระบวนการนี้ยังสร้างบทบาท (เช่น b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อเริ่มจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การจัดการการดำเนินการ crud ผ่านแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบ คุณสามารถ สร้างบันทึกใหม่ คลิก “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อแทรกข้อมูลใหม่ แก้ไขหรือดูบันทึก เลือกบันทึกเพื่อดูรายละเอียดหรือแก้ไขฟิลด์ ลบบันทึก ลบบันทึกที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซนี้ทำให้การจัดการข้อมูลง่ายขึ้นและปรับปรุงประสบการณ์ผู้ใช้โดยรวม ขั้นตอนที่ 4 – เชื่อมต่อแอปพลิเคชัน vue js ของคุณกับ back4app เมื่อแบ็กเอนด์ของคุณพร้อมแล้ว ถึงเวลาที่จะเชื่อมต่อแอป vue js ของคุณกับ back4app การใช้ rest api calls กับ axios เราจะใช้ rest api calls ผ่าน axios เพื่อดำเนินการ crud ติดตั้ง axios รันคำสั่งต่อไปนี้ในไดเรกทอรีโปรเจกต์ของคุณ npm install axios ตั้งค่า axios สร้างอินสแตนซ์ axios ในไฟล์ (เช่น, api js ) // api js import axios from 'axios'; const apiclient = axios create({ baseurl 'https //parseapi back4app com', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' } }); export default apiclient; ดำเนินการวิธีการ crud ในคอมโพเนนต์ vue นี่คือตัวอย่างวิธีการดึงและสร้างรายการ // itemsservice js import apiclient from ' /api'; export default { fetchitems() { return apiclient get('/classes/items') then(response => response data results) catch(error => console error('เกิดข้อผิดพลาดในการดึงรายการ ', error)); }, additem(title, description) { return apiclient post('/classes/items', { title, description }) then(response => response data) catch(error => console error('เกิดข้อผิดพลาดในการเพิ่มรายการ ', error)); }, updateitem(objectid, title, description) { return apiclient put(`/classes/items/${objectid}`, { title, description }) then(response => response data) catch(error => console error('เกิดข้อผิดพลาดในการอัปเดตรายการ ', error)); }, deleteitem(objectid) { return apiclient delete(`/classes/items/${objectid}`) then(response => response data) catch(error => console error('เกิดข้อผิดพลาดในการลบรายการ ', error)); } }; รวมวิธีการ api เหล่านี้เข้ากับคอมโพเนนต์ vue ของคุณเพื่อจัดการข้อมูลของแอปของคุณ ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การกำหนดรายการควบคุมการเข้าถึง (acls) ปกป้องข้อมูลของคุณโดยการตั้งค่า acls สำหรับบันทึกของคุณ ตัวอย่างเช่น เพื่อสร้างรายการที่เจ้าของเท่านั้นที่สามารถดูหรือแก้ไขได้ import apiclient from ' /api'; export function createprivateitem(title, description, userid) { const acl = { " " { "read" false, "write" false }, \[userid] { "read" true, "write" true } }; return apiclient post('/classes/items', { title, description, acl acl }) then(response => response data) catch(error => console error('error creating private item ', error)); } การตั้งค่าการอนุญาตระดับคลาส (clps) ใช้แดชบอร์ด back4app ของคุณเพื่อกำหนดค่า clps เพื่อให้ผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์เท่านั้นที่สามารถเข้าถึงคอลเลกชันบางอย่างได้ ซึ่งจะช่วยให้ backend ของคุณปลอดภัยโดยค่าเริ่มต้น ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ back4app ใช้คอลเลกชันผู้ใช้ที่สร้างขึ้นในตัวสำหรับการตรวจสอบสิทธิ์ ในแอป vue js ของคุณ คุณสามารถจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้โดยใช้การเรียก rest api นี่คือวิธีการ // authservice js import apiclient from ' /api'; export default { register(username, password, email) { return apiclient post('/users', { username, password, email }) then(response => response data) catch(error => console error('registration error ', error)); }, login(username, password) { return apiclient get('/login', { params { username, password } }) then(response => response data) catch(error => console error('login error ', error)); } }; การตั้งค่านี้ยังช่วยให้คุณจัดการการจัดการเซสชัน การรีเซ็ตรหัสผ่าน และฟีเจอร์การตรวจสอบสิทธิ์เพิ่มเติมได้ ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน vue js ของคุณ back4app ทำให้กระบวนการปรับใช้ง่ายขึ้น คุณสามารถปรับใช้แอปพลิเคชัน vue js ของคุณโดยใช้วิธีการต่างๆ รวมถึงการบรรจุใน docker 7 1 การสร้างแอปพลิเคชัน vue js ของคุณ การคอมไพล์และบันเดิล ใช้ vue cli เพื่อคอมไพล์แอปของคุณ npm run build ตรวจสอบการสร้าง ยืนยันว่าโฟลเดอร์เอาต์พุต (โดยปกติคือ dist/ ) มีไฟล์ที่จำเป็นทั้งหมด 7 2 ภาพรวมโครงสร้างโปรเจกต์ โครงสร้างโปรเจกต์ vue js ทั่วไปอาจมีลักษณะดังนี้ basic crud app vue/ \| public/ \| src/ \| | components/ \| | | itemlist vue \| | | itemform vue \| | services/ \| | | api js \| | | itemsservice js \| | | authservice js \| | app vue \| | main js \| package json \| readme md 7 3 การทำให้แอป vue js ของคุณเป็น docker หากคุณต้องการการปรับใช้ในรูปแบบคอนเทนเนอร์ ให้รวม dockerfile ที่รากของโปรเจกต์ของคุณ \# use a node image for building the app from node 16 as build \# set the working directory workdir /app \# install dependencies and build the app copy package json / run npm install copy run npm run build \# use an nginx image to serve the app from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 การปรับใช้ด้วย back4app web deployment เชื่อมต่อกับ github repository ของคุณ ตรวจสอบให้แน่ใจว่าโปรเจกต์ vue js ของคุณถูกโฮสต์บน github กำหนดค่าการปรับใช้ ในแดชบอร์ด back4app ให้เลือก web deployment ตัวเลือก เชื่อมโยง repository ของคุณ (เช่น, basic crud app vue ), และเลือกสาขาที่ต้องการ ตั้งค่าคำสั่งการสร้าง ระบุคำสั่งการสร้างของคุณ (เช่น, npm run build ) และระบุโฟลเดอร์ผลลัพธ์ (เช่น, dist ) ปรับใช้ คลิก deploy และดูบันทึกจนกว่าแอปของคุณจะออนไลน์ ขั้นตอนที่ 8 – ความคิดสุดท้ายและขั้นตอนถัดไป ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud ที่ใช้ vue js ซึ่งรวมเข้ากับ back4app คุณได้ตั้งค่าโครงการชื่อ basic crud app vue , ตั้งค่าคอลเลกชันสำหรับ items และ users และใช้ back4app admin app สำหรับการจัดการข้อมูล。 นอกจากนี้ คุณได้เชื่อมต่อส่วนหน้า vue js ของคุณผ่านการเรียก rest api และตั้งค่ามาตรการด้านความปลอดภัย。 ขั้นตอนถัดไป ขยายแอปพลิเคชันของคุณ รวมฟีเจอร์เช่นการกรองขั้นสูง, การดูรายละเอียดรายการ, หรือการอัปเดตแบบสด。 ปรับปรุงฟังก์ชันการทำงานของ backend สำรวจฟังก์ชันคลาวด์, รวม api ภายนอก, หรือใช้การควบคุมการเข้าถึงตามบทบาท。 เรียนรู้ต่อไป อ้างอิงจาก เอกสาร back4app https //www back4app com/docs และแหล่งข้อมูลเพิ่มเติมเพื่อปรับปรุงแอปของคุณต่อไป。 ขอให้สนุกกับการเขียนโค้ดและเพลิดเพลินกับการสร้างแอปพลิเคชัน crud ด้วย vue js ของคุณ!