How to Develop a CRUD Application with Nuxt.js?

ภาพรวม ในคู่มือนี้ คุณจะได้ค้นพบวิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ทำงานได้อย่างเต็มรูปแบบโดยใช้ nuxt js เราจะใช้ back4app เป็นบริการแบ็กเอนด์ของเราเพื่อจัดการการจัดเก็บและการจัดการข้อมูลได้อย่างง่ายดาย คู่มือนี้ครอบคลุมฟังก์ชัน crud ที่สำคัญ โดยอธิบายวิธีการตั้งค่าโครงการ back4app สร้างโมเดลข้อมูลที่หลากหลาย และรวมการดำเนินการ crud กับแอปพลิเคชัน nuxt js ของคุณ ในตอนแรก คุณจะกำหนดค่าโครงการ back4app ที่ชื่อว่า basic crud app nuxt ซึ่งมีสภาพแวดล้อมการจัดเก็บข้อมูล nosql ที่ทรงพลัง คุณจะกำหนดโครงสร้างข้อมูลของคุณโดยการสร้างคลาสและฟิลด์ด้วยตนเองหรือผ่านตัวแทน ai อัจฉริยะของ back4app ถัดไป คุณจะจัดการแบ็กเอนด์ของคุณโดยใช้ back4app admin app ซึ่งเป็นอินเทอร์เฟซที่ใช้งานง่ายแบบลากและวางสำหรับการดำเนินการข้อมูลที่มีประสิทธิภาพ สุดท้าย คุณจะเชื่อมต่อแอปพลิเคชัน nuxt js ของคุณกับ back4app โดยใช้การเรียก rest api เพื่อดำเนินการ crud ที่ปลอดภัย เมื่อสิ้นสุดคู่มือนี้ คุณจะได้สร้างแอปพลิเคชัน nuxt js ที่พร้อมใช้งานในผลิตภัณฑ์ซึ่งสามารถจัดการการดำเนินการ crud พื้นฐานพร้อมกับการตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัยและการจัดการข้อมูล จุดสำคัญ เรียนรู้วิธีการสร้างแอปพลิเคชัน crud ด้วย nuxt js ที่มีแบ็กเอนด์ที่มีประสิทธิภาพสูง เข้าใจขั้นตอนการออกแบบแบ็กเอนด์ที่สามารถขยายได้และเชื่อมโยงกับฟรอนต์เอนด์ nuxt js ของคุณ สำรวจวิธีที่ back4app’s admin app ทำให้การดำเนินการข้อมูลเช่น สร้าง, อ่าน, อัปเดต และลบ ง่ายขึ้น รับข้อมูลเชิงลึกเกี่ยวกับวิธีการปรับใช้รวมถึงการทำให้เป็นคอนเทนเนอร์ docker สำหรับการเปิดตัวผลิตภัณฑ์ที่ราบรื่น ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโปรเจกต์ที่ตั้งค่าใหม่แล้ว หากคุณต้องการความช่วยเหลือ โปรดดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนาสำหรับ nuxt js ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง node js และตั้งค่า ide หรือโปรแกรมแก้ไขข้อความที่คุณเลือก ความรู้พื้นฐานเกี่ยวกับ nuxt js, vue js, และ rest apis โปรดดูที่ เอกสาร nuxt js https //nuxtjs org/docs หากคุณต้องการทบทวน ขั้นตอนที่ 1 – การเริ่มต้นโปรเจกต์ การตั้งค่าโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ เลือกตัวเลือก “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app nuxt และทำตามคำแนะนำในการตั้งค่า สร้างโปรเจกต์ใหม่ หลังจากที่โปรเจกต์ถูกสร้างขึ้น มันจะปรากฏในแดชบอร์ดของคุณ พร้อมสำหรับการกำหนดค่าด้านหลังเพิ่มเติม ขั้นตอนที่ 2 – การสร้างโมเดลข้อมูล การสร้างโครงสร้างข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะตั้งค่าหลายคลาส (หรือคอลเลกชัน) ภายในโปรเจกต์ back4app ของคุณ ด้านล่างนี้เป็นตัวอย่างของคลาสหลักและฟิลด์ที่จำเป็นสำหรับฟังก์ชัน crud พื้นฐาน 1\ คอลเลกชันรายการ คอลเลกชันนี้เก็บรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภท คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างโดยระบบ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่ทำเครื่องหมายการสร้างรายการ อัปเดตเมื่อ วันที่ เวลาที่ทำเครื่องหมายการอัปเดตครั้งล่าสุด 2\ การรวบรวมผู้ใช้ คอลเลกชันนี้จัดการรายละเอียดผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภท คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสเพื่อการตรวจสอบสิทธิ์ที่ปลอดภัย สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการแก้ไขบัญชี คุณสามารถกำหนดคอลเลกชันและฟิลด์เหล่านี้ด้วยตนเองในแดชบอร์ด back4app สร้างคลาสใหม่ คุณเพิ่มฟิลด์โดยการเลือกประเภทข้อมูลที่เหมาะสม ตั้งชื่อฟิลด์ ตั้งค่าค่าปริยายได้ตามต้องการ และระบุว่าฟิลด์นั้นเป็นฟิลด์บังคับหรือไม่ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent เป็นเครื่องมือที่สะดวกภายในแดชบอร์ดของคุณที่สามารถสร้าง schema ของคุณโดยอัตโนมัติจากคำอธิบายที่ให้ไว้ ฟีเจอร์นี้ช่วยเร่งกระบวนการตั้งค่าและทำให้แน่ใจว่าโมเดลข้อมูลของคุณได้รับการปรับให้เหมาะสมสำหรับการดำเนินการ crud วิธีการใช้ ai agent เปิด ai agent เข้าถึงได้จากการตั้งค่าโปรเจกต์ของคุณในแดชบอร์ด back4app อธิบาย schema ของคุณ ให้รายละเอียดเกี่ยวกับคลาสและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน 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) ฟีเจอร์อัจฉริยะนี้ช่วยประหยัดเวลาและทำให้โครงสร้างข้อมูลของคุณถูกตั้งค่าอย่างสม่ำเสมอเพื่อการดำเนินการ crud ที่ดีที่สุด ขั้นตอนที่ 3 – เปิดใช้งาน admin app & จัดการการดำเนินการ crud ภาพรวมของ admin app back4app admin app ให้การจัดการข้อมูลด้านหลังที่ไม่มีโค้ด อินเทอร์เฟซที่ใช้งานง่ายช่วยให้คุณสามารถดำเนินการ crud เช่น การเพิ่ม แก้ไข ดู และลบระเบียนได้อย่างง่ายดาย การเปิดใช้งาน admin app ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “admin app” และคลิกที่ “เปิดใช้งาน admin app ” ตั้งค่าบัญชีผู้ดูแลระบบของคุณ โดยการสร้างข้อมูลรับรองเริ่มต้น ขั้นตอนนี้จะสร้างบทบาทระบบเช่น b4aadminuser และกำหนดค่าคอลเลกชันระบบที่สำคัญ เปิดใช้งาน admin app เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบ admin app เพื่อจัดการข้อมูลของแอปพลิเคชันของคุณได้อย่างง่ายดาย แดชบอร์ดแอปผู้ดูแลระบบ การใช้แอปผู้ดูแลระบบสำหรับการดำเนินการ crud ภายในแอปผู้ดูแลระบบ คุณสามารถ เพิ่มรายการใหม่ ใช้ปุ่ม “เพิ่มบันทึก” ในคอลเลกชัน (เช่น รายการ) เพื่อแทรกข้อมูล ดูและแก้ไข คลิกที่บันทึกใด ๆ เพื่อตรวจสอบรายละเอียดหรือทำการแก้ไข ลบบันทึก ลบบันทึกที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยให้การจัดการข้อมูลสำหรับแอปพลิเคชันของคุณเป็นไปอย่างราบรื่น ขั้นตอนที่ 4 – เชื่อมต่อแอปพลิเคชัน nuxt js ของคุณกับ back4app เมื่อคุณมีแบ็คเอนด์แล้ว งานถัดไปคือการรวมแอป nuxt js ของคุณเข้ากับ back4app การใช้ rest api calls เนื่องจาก parse sdk ไม่ได้ถูกใช้บ่อยนักกับ nuxt js คุณจะทำการดำเนินการ crud โดยใช้การเรียก rest api การตั้งค่า api requests ใน nuxt js ติดตั้ง axios หากยังไม่ได้ติดตั้ง ให้เพิ่ม axios ลงในโปรเจกต์ nuxt js ของคุณ npm install @nuxtjs/axios กำหนดค่าโมดูล axios ในไฟล์ nuxt config js , ให้รวมโมดูล axios และตั้งค่าคอนฟิกพื้นฐาน export default { modules \['@nuxtjs/axios'], axios { baseurl 'https //parseapi back4app com' } } การดำเนินการ crud สร้างบริการ (เช่น services/items js ) เพื่อจัดการการเรียก api ด้านล่างนี้คือตัวอย่างวิธีการดึง สร้าง อัปเดต และลบรายการ // services/items js export default { async fetchitems() { try { const response = await this $axios $get('/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response results; } catch (error) { console error('เกิดข้อผิดพลาดในการดึงรายการ ', error); return \[]; } }, async additem(title, description) { try { const response = await this $axios $post('/classes/items', { title, description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response; } catch (error) { console error('เกิดข้อผิดพลาดในการสร้างรายการ ', error); } }, async updateitem(objectid, newtitle, newdescription) { try { const response = await this $axios $put(`/classes/items/${objectid}`, { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response; } catch (error) { console error('เกิดข้อผิดพลาดในการอัปเดตรายการ ', error); } }, async removeitem(objectid) { try { const response = await this $axios $delete(`/classes/items/${objectid}`, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response; } catch (error) { console error('เกิดข้อผิดพลาดในการลบรายการ ', error); } } } รวมวิธีการ api เหล่านี้เข้ากับหน้าเว็บหรือส่วนประกอบของ nuxt js ของคุณเพื่อเปิดใช้งานฟังก์ชัน crud แบบเต็มรูปแบบ ขั้นตอนที่ 5 – การเพิ่มความปลอดภัย การใช้ access control lists (acls) รักษาความปลอดภัยข้อมูลของคุณโดยการตั้งค่า acl สำหรับวัตถุแต่ละรายการ ตัวอย่างเช่น คุณสามารถจำกัดรายการเพื่อให้เฉพาะผู้สร้างเท่านั้นที่สามารถดูหรือแก้ไขได้ async function createprivateitem(title, description, userid) { try { const acl = { " " { "read" false, "write" false }, \[userid] { "read" true, "write" true } }; const response = await this $axios $post('/classes/items', { title, description, acl acl }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); console log('private item created ', response); } catch (error) { console error('error creating private item ', error); } } การตั้งค่าการอนุญาตระดับคลาส (clps) ในแดชบอร์ด back4app ของคุณ ให้กำหนดค่า clps เพื่อบังคับใช้นโยบายการเข้าถึงเริ่มต้น โดยมั่นใจว่าเฉพาะผู้ใช้ที่ผ่านการตรวจสอบแล้วเท่านั้นที่สามารถโต้ตอบกับคอลเลกชันเฉพาะได้ ขั้นตอนที่ 6 – การใช้การตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ back4app ใช้คอลเลกชันผู้ใช้ที่สร้างขึ้นในตัวเพื่อจัดการการตรวจสอบสิทธิ์ ในแอป nuxt js ของคุณ ให้ดำเนินการลงทะเบียนและการเข้าสู่ระบบโดยใช้การเรียก rest api ตัวอย่าง การลงทะเบียนผู้ใช้และการเข้าสู่ระบบ export default { async registeruser(username, password, email) { try { const response = await this $axios $post('/users', { username, password, email }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); console log('user registered ', response); return response; } catch (error) { console error('registration error ', error); } }, async loginuser(username, password) { try { const response = await this $axios $get('/login', { params { username, password }, headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); console log('user logged in ', response); return response; } catch (error) { console error('login error ', error); } } } วิธีนี้สนับสนุนการจัดการเซสชัน การกู้คืนรหัสผ่าน และฟีเจอร์การตรวจสอบสิทธิ์เพิ่มเติม ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน nuxt js ของคุณ back4app ทำให้กระบวนการปรับใช้ง่ายขึ้น คุณสามารถปรับใช้แอป nuxt js ของคุณโดยใช้วิธีการต่างๆ รวมถึงการสร้าง docker 7 1 การสร้างโปรเจกต์ nuxt js ของคุณ สร้างแอปพลิเคชัน รันคำสั่งต่อไปนี้เพื่อสร้างการผลิต npm run build เริ่มแอปพลิเคชัน ทดสอบการผลิตของคุณในเครื่องโดยใช้ npm run start 7 2 การจัดระเบียบโครงสร้างโปรเจกต์ของคุณ โครงสร้างโปรเจกต์ nuxt js แบบทั่วไปอาจมีลักษณะดังนี้ basic crud app nuxt/ \| assets/ \| components/ \| layouts/ \| pages/ \| plugins/ \| services/ \| | items js \| | auth js \| static/ \| nuxt config js \| package json \| dockerfile 7 3 การสร้าง docker สำหรับแอป nuxt js ของคุณ หากคุณชอบการใช้คอนเทนเนอร์ ให้รวม dockerfile ที่รากของโปรเจกต์ของคุณ \# use a node js image as the base from node 16 alpine \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application copy \# build the application run npm run build \# expose the port (adjust if necessary) expose 3000 \# start the application cmd \["npm", "run", "start"] 7 4 การปรับใช้ผ่าน back4app web deployment เชื่อมต่อที่เก็บของคุณ ตรวจสอบให้แน่ใจว่าโปรเจกต์ nuxt js ของคุณโฮสต์อยู่บน github กำหนดค่าการปรับใช้ ในแดชบอร์ด back4app ของคุณ ให้ไปที่ web deployment ส่วน เชื่อมโยงที่เก็บของคุณ (เช่น basic crud app nuxt ) และเลือกสาขาที่เหมาะสม ตั้งค่าคำสั่งสร้าง กำหนดคำสั่งสร้าง (เช่น npm run build ) และระบุไดเรกทอรีผลลัพธ์ ปรับใช้ คลิก deploy และติดตามบันทึกจนกว่าแอปพลิเคชันของคุณจะออนไลน์ ขั้นตอนที่ 8 – สรุปและขั้นตอนในอนาคต ทำได้ดีมาก! ตอนนี้คุณได้สร้างแอปพลิเคชัน crud ด้วย nuxt js ที่เชื่อมต่อกับ back4app แล้ว คุณได้สร้างโปรเจกต์ชื่อ basic crud app nuxt , ออกแบบคอลเลกชันสำหรับ items และ users และจัดการข้อมูลของคุณผ่าน back4app admin app นอกจากนี้ คุณได้เชื่อมต่อแอป nuxt js ของคุณผ่านการเรียก rest api และดำเนินการมาตรการด้านความปลอดภัยที่เข้มงวด ต่อไปคืออะไร การขยายฟีเจอร์ พิจารณาเพิ่มฟังก์ชันการทำงาน เช่น ตัวกรองการค้นหาขั้นสูง, การดูรายละเอียดรายการ, หรือการอัปเดตแบบเรียลไทม์ การปรับปรุงด้านหลัง พิจารณาฟังก์ชันคลาวด์, การรวมกับ api ภายนอก, หรือการอนุญาตตามบทบาท การเรียนรู้เพิ่มเติม สำรวจ เอกสาร back4app https //www back4app com/docs และคู่มือเพิ่มเติมเพื่อเพิ่มประสิทธิภาพแอปพลิเคชันของคุณ ขอให้สนุกกับการเขียนโค้ดและเพลิดเพลินกับการสร้างด้วย nuxt js และ back4app!