JavaScript
Database Operations
18 นาที
การดำเนินการฐานข้อมูลแบบไม่มีเซิร์ฟเวอร์ บทนำ ส่วนนี้อธิบายวิธีการดำเนินการ crud (สร้าง, อ่าน, อัปเดต และลบ) ในสภาพแวดล้อม javascript ผ่าน back4app มันยังมีโค้ดตัวอย่างและสภาพแวดล้อมออนไลน์เพื่อดำเนินการและทดสอบโค้ดของคุณโดยไม่ต้องตั้งค่าในเครื่อง ดูเพิ่มเติมเกี่ยวกับ parse sdk ที่ https //parseplatform org/parse sdk js/api/4 3 1/ และ https //docs parseplatform org/js/guide/ ข้อกำหนดเบื้องต้น ไม่มีข้อกำหนดเพิ่มเติมนอกเหนือจากการมีความรู้พื้นฐานเกี่ยวกับ javascript ตัวเลือก เพื่อทำตามบทเรียนนี้โดยใช้แอปของคุณเอง คุณจะต้อง แอปที่สร้างและกำหนดค่าไว้สำหรับ javascript ที่ back4app หมายเหตุ ติดตาม https //www back4app com/docs/javascript/parse javascript sdk เพื่อเรียนรู้วิธีการทำเช่นนั้น 1 ตั้งค่าสภาพแวดล้อม คู่มือนี้ใช้ https //jsbin com/ เป็นแพลตฟอร์มสำหรับแก้ไขโค้ด。 มันใช้งานง่ายมาก สิ่งที่คุณต้องทำคือเปิดหน้าหลักและคลิกที่ html html , javascript javascript และ console console ปุ่มต่างๆ ขั้นตอนแรกในการเริ่มเขียนโค้ดคือการรวม parse api และเพิ่มคีย์ของแอปของคุณ สำหรับบทเรียนนี้ แอป back4app สาธารณะได้ถูกสร้างขึ้นเพื่อให้คุณสามารถตรวจสอบการเปลี่ยนแปลงของคุณในฐานข้อมูลโดยไม่ต้องสร้างแอปของคุณเอง ตัวเลือก ในการตรวจสอบฐานข้อมูล parse สำหรับตัวอย่างนี้ คุณต้องสร้างแอปของคุณเองและเข้าถึง parse dashboard parse dashboard ตัวเลือก ในการรวม parse api ในแอปของคุณ ให้เพิ่มบรรทัดโค้ดต่อไปนี้ภายใน html html ’s head tag จากนั้นเพิ่มข้อมูลประจำตัวของคุณที่จุดเริ่มต้นของ javascript javascript ไฟล์ คีย์เริ่มต้นคือคีย์ที่เกี่ยวข้องกับแอปสาธารณะของเรา //paste your application key and javascript key, respectively parse initialize("your application id", "your javascript key"); parse serverurl = "https //parseapi back4app com/"; ในบทเรียนนี้ เราจะสร้าง crud operations ตามคลาส pet ที่มีฟิลด์ชื่อและอายุ ซึ่งชื่อเป็นสตริงและอายุเป็นตัวเลข ด้วยเหตุนี้ โค้ดควรเริ่มต้นด้วยการสร้างซับคลาสของคลาส pet เพื่อให้สามารถใช้งานในฟังก์ชันของเราได้ในภายหลัง ตามที่แสดงด้านล่าง var pet = parse object extend("pet"); การดำเนินการพื้นฐานทั้งหมดจะต้องการให้ผู้ใช้บอกว่าชื่อ pet ที่ต้องการคืออะไร ด้วยเหตุนี้ ให้สร้างตัวแปรทั่วโลก “textname” นอกจากนี้ยังเป็นความคิดที่ดีในการสร้าง “textage” ซึ่งจะถูกใช้ในวิธีการสร้างและอัปเดต var textname = "myname"; var textage = 10; 2 สร้าง ฟังก์ชัน create create จะสร้างสัตว์เลี้ยงใหม่ที่มีชื่อและอายุที่คุณระบุในตัวแปร “textname” และ “textage” ในการสร้างฟังก์ชันนั้น ให้ทำตามขั้นตอนเหล่านี้ สร้างอินสแตนซ์ใหม่ของคลาส pet ของ parse ด้วยคำสั่ง ใช้ฟังก์ชัน set set เพื่อกำหนดพารามิเตอร์สำหรับวัตถุนี้ เรียกใช้ฟังก์ชัน save save ซึ่งจะลงทะเบียนสัตว์เลี้ยงในฐานข้อมูลของคุณใน parse dashboard parse dashboard คุณสามารถเปิด https //jsbin com/bozuguh/edit?html,js,console เพื่อดูโค้ดที่ได้ถูกนำไปใช้แล้ว โค้ดสำหรับฟังก์ชัน create create ถูกเขียนไว้ด้านล่าง create js create(); function create() { mypet = new pet(); mypet set("name", textname); mypet set("agepet", textage); mypet save() then(function(pet){ console log('pet created successful with name ' + pet get("name") + ' and age ' + pet get("agepet")); }) catch(function(error){ console log('error ' + error message); }); } เพื่อทดสอบมัน ให้วางโค้ดนี้ในไฟล์ javascript ใน https //jsbin com/?html,js,output , คลิกที่ run run ปุ่มในส่วนคอนโซลและรอผลลัพธ์。 มันควรพิมพ์ว่าการสร้างสัตว์เลี้ยงสำเร็จแล้ว。 เพื่อยืนยันว่าอ็อบเจ็กต์ใหม่อยู่ในฐานข้อมูล คุณสามารถเข้าถึง parse dashboard parse dashboard หรือคุณสามารถเขียนฟังก์ชัน read read 3 อ่าน ฟังก์ชัน read read มีหน้าที่ในการค้นหาฐานข้อมูลและส่งคืนอ็อบเจ็กต์ที่ตรงกับเกณฑ์การค้นหาของคุณ มันยังสามารถใช้เพื่อตรวจสอบการมีอยู่ของอ็อบเจ็กต์ได้。 นี่คือคู่มือทีละขั้นตอนสำหรับการสร้างฟังก์ชัน read read ของคุณเอง สร้างอินสแตนซ์ของคลาส query ของ parse เพิ่มข้อจำกัดในคำค้นของคุณเพื่อลดการค้นหา ตัวเลือกข้อจำกัดเพิ่มเติมสามารถพบได้ใน http //docs parseplatform org/js/guide/#query constraints ทำการค้นหาด้วยวิธีการค้นหาของ query ในบทเรียนนี้จะใช้ query first query first เพื่อรับเฉพาะองค์ประกอบแรกที่ตรงกับเกณฑ์ของคุณ หากการดำเนินการสำเร็จ อ็อบเจ็กต์สัตว์เลี้ยงจะถูกส่งคืน หากไม่พบอ็อบเจ็กต์ ค่าที่ส่งคืนจะเป็น undefined คุณสามารถเปิด https //jsbin com/roziroy/edit?html,js,output เพื่อดูโค้ดที่ได้ถูกนำไปใช้แล้ว โค้ดสำหรับ อ่าน อ่าน ฟังก์ชันคือดังนี้ read js read(); function read() { query = new parse query(pet); query equalto("name", textname); query first() then(function(pet){ if(pet){ console log('pet found successful with name ' + pet get("name") + ' and age ' + pet get("agepet")); } else { console log("nothing found, please try again"); } }) catch(function(error){ console log("error " + error code + " " + error message); }); } เพื่อทดสอบ อ่าน อ่าน ฟังก์ชัน ให้วางโค้ดในไฟล์ javascript ของคุณใน jsbin เมื่อโค้ดทำงาน มันจะพิมพ์อายุของสัตว์เลี้ยงที่พบ (ถ้าพบ) หรือจะพิมพ์ว่าไม่พบสัตว์เลี้ยง หากในขณะที่ทดสอบ อายุที่พิมพ์ไม่ตรงกับอายุของวัตถุของคุณ หมายความว่ามี วัตถุอื่นที่มีชื่อเดียวกัน แต่การค้นหาของคุณจะคืนค่ามาเพียงหนึ่งในนั้น ดังนั้นเพื่อทดสอบ อ่าน อ่าน ฟังก์ชันอย่างแท้จริง ให้สร้างวัตถุที่มีชื่ออื่นที่ยังไม่มีใครสร้าง จากนั้นเรียกใช้ฟังก์ชัน ซึ่งจะพิมพ์อายุของวัตถุได้อย่างถูกต้อง 4 อัปเดต สำหรับ อัปเดต อัปเดต ฟังก์ชัน สัตว์เลี้ยงจะถูกส่งเป็นพารามิเตอร์และฟังก์ชันจะเปลี่ยนอายุของมันเป็นอายุที่คุณให้ในตัวแปร “textage” เพื่อค้นหาสัตว์เลี้ยงที่จะถูกส่ง เราจะใช้เวอร์ชันที่ปรับปรุงของ อ่าน อ่าน ฟังก์ชัน ด้านล่างนี้คือขั้นตอนในการสร้าง อัปเดต อัปเดต ฟังก์ชันของคุณเอง เขียนฟังก์ชันอ่านที่ปรับปรุงแล้วชื่อ readthenupdate readthenupdate , ซึ่งเรียกฟังก์ชัน อัปเดต อัปเดต เมื่อมันพบสัตว์เลี้ยงสำเร็จ ในฟังก์ชัน อัปเดต อัปเดต ใช้ฟังก์ชัน ตั้งค่า ตั้งค่า เพื่อปรับเปลี่ยนพารามิเตอร์ของสัตว์เลี้ยงของคุณ เรียกฟังก์ชัน บันทึก บันทึก สำหรับสัตว์เลี้ยงนี้เพื่อผลักดันการเปลี่ยนแปลงไปยังฐานข้อมูล คุณสามารถเปิด https //jsbin com/jidinim/edit?html,js,output เพื่อดูโค้ดที่ได้ถูกนำไปใช้แล้ว นี่คือโค้ดสำหรับ readthenupdate readthenupdate ฟังก์ชันและ update update ฟังก์ชัน update js readthenupdate(); function readthenupdate() { query = new parse query(pet); query equalto("name", textname); query first() then(function (pet) { if (pet) { console log('pet found with name ' + pet get("name") + ' and age ' + pet get("agepet")); update(pet); } else { console log("nothing found, please try again"); } }) catch(function (error) { console log("error " + error code + " " + error message); }); } function update(foundpet) { textname = "mynameupdated"; textage = 20; console log(textage); foundpet set('name', textname); foundpet set('agepet', textage); foundpet save() then(function (pet) { console log('pet updated! name ' + pet get("name") + ' and new age ' + pet get("agepet")); }) catch(function(error) { console log('error ' + error message); }); } เพื่อยืนยันว่าฟังก์ชัน update update ทำงานได้ ให้วางโค้ดด้านบนลงในไฟล์ javascript ในหน้า jsbin ใช้ชื่อที่ไม่ซ้ำกันสำหรับวัตถุของคุณเพื่อไม่ให้เกิดความขัดแย้งกับผู้ใช้อื่น จากนั้นทำตามขั้นตอนเหล่านี้ 1\ สร้างวัตถุด้วยชื่อที่คุณต้องการ 2\ ตรวจสอบว่าวัตถุถูกสร้างขึ้นด้วยฟังก์ชัน read read ของคุณ 3\ เรียกฟังก์ชัน readthenupdate readthenupdate ที่สร้างขึ้นในหัวข้อนี้ด้วยอายุที่แตกต่างจากอายุเดิม 4\ ตรวจสอบว่าอายุของสัตว์เลี้ยงได้เปลี่ยนแปลงโดยการเรียกฟังก์ชัน read read ของคุณอีกครั้ง 5 ลบ ฟังก์ชัน ลบ ลบ จะลบสัตว์เลี้ยงที่ได้รับจากฟังก์ชัน อ่าน อ่าน นี่เป็นการกระทำที่ไม่สามารถย้อนกลับได้ ซึ่งหมายความว่าคุณควรระมัดระวังขณะใช้งาน โดยเฉพาะเพราะฟังก์ชัน อ่าน อ่าน ของคุณอาจคืนค่ามากกว่าวัตถุที่คุณต้องการลบจริงๆ ด้วยเหตุนี้จึงแนะนำให้ลบเพียงวัตถุเดียวในแต่ละครั้ง ขั้นตอนในการเขียนฟังก์ชัน ลบ ลบ ของคุณเองสามารถดูได้ด้านล่าง ในตอนท้ายของความสำเร็จของฟังก์ชัน “อ่าน” ของคุณ ( readthendelete readthendelete ) ให้เรียกฟังก์ชัน ลบ ลบ ในฟังก์ชัน deletepet deletepet ให้เรียกใช้เมธอด destroy บนวัตถุที่ได้รับ “foundpet” คุณสามารถเปิด https //jsbin com/vubiqoq/edit?html,js,output เพื่อดูโค้ดที่ได้ถูกนำไปใช้แล้ว นี่คือโค้ดสำหรับ readthendelete readthendelete ฟังก์ชันและ deletepet deletepet ฟังก์ชัน delete js readthendelete(); function readthendelete() { query = new parse query(pet); query equalto("name", textname); query first() then(function (pet) { if (pet) { console log('pet found with name ' + pet get("name") + ' and age ' + pet get("agepet")); deletepet(pet); } else { console log("nothing found, please try again"); return null; } }) catch(function (error) { console log("error " + error code + " " + error message); return null; }); } function deletepet(foundpet) { foundpet destroy() then(function(response) { console log('pet '+ foundpet get("name") + ' erased successfully'); }) catch(function(response, error) { console log('error '+ error message); }); } ในการทดสอบ แนะนำให้สร้างวัตถุที่มีชื่อแปลกๆ เช่นเดียวกับฟังก์ชันอื่นๆ เพื่อ ไม่ให้เกิดความขัดแย้งกับวัตถุจากผู้ใช้อื่นๆ เพียงแค่วางโค้ดใน jsbin และรันโค้ดด้วยชื่อของวัตถุของคุณและวัตถุที่จะถูกลบ จากนั้นคุณสามารถเรียกใช้ read read ฟังก์ชันเพื่อยืนยันว่าไม่มีวัตถุที่มีชื่อนั้น หากการอ่านคืนค่ามาวัตถุ ซึ่งไม่ควรจะเป็นเช่นนั้น แสดงว่าคุณอาจมีวัตถุมากกว่าหนึ่งที่มีชื่อเดียวกันและมันคืนค่าหนึ่งในนั้นเป็น delete delete ฟังก์ชันเพียงลบวัตถุเดียว คุณสามารถตรวจสอบวัตถุของคุณได้โดยการเข้าถึง parse dashboard parse dashboard เสร็จเรียบร้อย! ในจุดนี้ คุณได้เรียนรู้วิธีการทำการดำเนินการ crud พื้นฐานด้วย javascript