React Native
...
Data objects
N:N Relationship
8 นาที
ความสัมพันธ์แบบหลายต่อหลาย บทนำ ที่แกนกลางของแบ็คเอนด์หลายๆ ตัว คุณจะพบความสามารถในการจัดเก็บข้อมูล โดยใช้ parse คุณสามารถจัดเก็บวัตถุข้อมูลที่สร้างความสัมพันธ์ระหว่างกัน ความสัมพันธ์ของข้อมูลจะทำให้มาตรฐานว่าแต่ละวัตถุข้อมูลมีความสัมพันธ์หรือเชื่อมโยงกับวัตถุอื่นๆ อย่างไร ซึ่งสามารถให้พลังเพิ่มเติมเมื่อสร้างและรันคำค้นหาที่ซับซ้อน มีประเภทความสัมพันธ์หลักสามประเภท หนึ่งต่อหลาย หนึ่งต่อหลาย , ซึ่งวัตถุหนึ่งสามารถเชื่อมโยงกับวัตถุอื่นๆ ได้หลายวัตถุ; หนึ่งต่อหนึ่ง หนึ่งต่อหนึ่ง , สร้างความสัมพันธ์โดยตรงระหว่างสองวัตถุและเฉพาะพวกเขาเท่านั้น; หลายต่อหลาย หลายต่อหลาย , ซึ่งสามารถสร้างความสัมพันธ์ที่ซับซ้อนมากมายระหว่างวัตถุหลายๆ ตัว ในคู่มือนี้ เราจะมุ่งเน้นไปที่ความสัมพันธ์แบบหลายต่อหลาย ความสัมพันธ์เหล่านี้เป็นเรื่องปกติในแอปพลิเคชันที่มีเนื้อหาที่เขียนโดยผู้เขียน เช่น บล็อกและฟีดข่าว เพราะผู้เขียนและแท็กหมวดหมู่สามารถสลับกันได้และปรับให้เหมาะสมสำหรับการค้นหาอย่างรวดเร็ว แบ็คเอนด์การจัดเก็บข้อมูลมักจะต้องการการประกาศความสัมพันธ์เหล่านี้อย่างชัดเจนและแม้กระทั่งต้องการให้คุณสร้างตารางความสัมพันธ์ด้วยตัวเองเพื่อจัดการการเชื่อมโยงของพวกเขา parse ทำให้มันเป็นอัตโนมัติสำหรับคุณ โดยการกำจัดความเป็นไปได้ของข้อผิดพลาดในขณะที่สร้างความสัมพันธ์ข้อมูลของคุณและเร่งกระบวนการสร้างโมเดลแอปพลิเคชันของคุณ มีสองวิธีในการสร้างความสัมพันธ์แบบหลายต่อหลายใน parse วิธีแรกใช้ parse object parse object ความสัมพันธ์ ซึ่งเป็นวิธีที่เร็วที่สุดในการสร้างและค้นหา วิธีที่สองคือการใช้ arrays ซึ่งอาจทำให้เวลาค้นหาช้า ขึ้นอยู่กับขนาดของมัน ด้วยเหตุนี้เราจะใช้เฉพาะตัวอย่างความสัมพันธ์ตั้งแต่นี้เป็นต้นไป ในคู่มือนี้ คุณจะสร้างแอปพลิเคชันการลงทะเบียนหนังสือด้วย react native ที่มีการเชื่อมโยงข้อมูลหลักสามประเภท คุณจะได้เรียนรู้วิธีการสร้างและค้นหาความสัมพันธ์ข้อมูลแบบหลายต่อหลายโดยใช้ back4app และ react native ในทุกช่วงเวลา คุณสามารถเข้าถึงโครงการนี้ได้ผ่านทาง github repositories ของเราเพื่อตรวจสอบสไตล์และโค้ดที่สมบูรณ์ ที่เก็บตัวอย่าง javascript ที่เก็บตัวอย่าง typescript ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป react native ที่สร้างขึ้นและ เชื่อมต่อกับ back4app หากคุณต้องการทดสอบ/ใช้เลย์เอาต์หน้าจอที่จัดเตรียมโดยคู่มือนี้ คุณควรตั้งค่า react native paper react native paper ไลบรารี เป้าหมาย เพื่อดำเนินการและแสดงความสัมพันธ์ฐานข้อมูลแบบหลายต่อหลายใน react native โดยใช้ parse ในสถานการณ์ที่สมจริง 1 การเข้าใจคลาส book เนื่องจากในคู่มือนี้เราจะใช้ตัวอย่างแอปพลิเคชันการลงทะเบียนหนังสือ คุณต้องเข้าใจก่อนว่าความสัมพันธ์ของวัตถุถูกจัดเรียงอย่างไรในฐานข้อมูลนี้ คลาสวัตถุหลักที่คุณจะใช้คือ หนังสือ หนังสือ คลาส ซึ่งจะเก็บข้อมูลการลงทะเบียนหนังสือแต่ละเล่ม นี่คือคลาสวัตถุอีกสี่คลาส ผู้จัดพิมพ์ ผู้จัดพิมพ์ ชื่อผู้จัดพิมพ์หนังสือ ความสัมพันธ์แบบหนึ่งต่อหลายกับ หนังสือ หนังสือ ประเภท ประเภท ประเภทหนังสือ ความสัมพันธ์แบบหนึ่งต่อหลายกับ หนังสือ หนังสือ โปรดทราบว่าสำหรับตัวอย่างนี้เราจะพิจารณาว่าหนังสือสามารถมีประเภทเดียวเท่านั้น; ผู้เขียน ผู้เขียน ผู้เขียนหนังสือ ความสัมพันธ์แบบหลายต่อหลายกับ หนังสือ หนังสือ , เนื่องจากหนังสือสามารถมีผู้เขียนมากกว่าหนึ่งคนและผู้เขียนสามารถมีหนังสือมากกว่าหนึ่งเล่มได้เช่นกัน; isdb isdb หมายเลขระบุ isdb ของหนังสือ ความสัมพันธ์แบบหนึ่งต่อหนึ่งกับ หนังสือ หนังสือ , เนื่องจากหมายเลขนี้เป็นเอกลักษณ์สำหรับแต่ละเล่ม นี่คือการแสดงภาพของตารางฐานข้อมูลเหล่านี้ เพื่อความเรียบง่าย เราจะสมมติว่าแต่ละคลาสวัตถุมีเพียงประเภทสตริง ชื่อ ชื่อ คุณสมบัติ ( ชื่อเรื่อง ชื่อเรื่อง สำหรับ หนังสือ หนังสือ ), นอกเหนือจากคุณสมบัติสัมพันธ์เพิ่มเติมใดๆ 2 การสร้างความสัมพันธ์แบบหนึ่งต่อหลาย ก่อนที่จะไปยังขั้นตอนนี้ เราขอแนะนำให้คุณโคลนและรันแอปตัวอย่าง react native library ( ที่เก็บตัวอย่าง javascript , ที่เก็บตัวอย่าง typescript ) แอปพลิเคชันนี้มีหน้าหลักสองหน้าคือ หนึ่งหน้าที่รับผิดชอบในการแสดงรายการหนังสือที่ลงทะเบียนและอีกหน้าสำหรับการสร้างหนังสือใหม่ ในแบบฟอร์มการลงทะเบียนหนังสือ จะมีลิงก์โดยตรงไปยังวัตถุที่เกี่ยวข้องอื่นๆ ดังนั้นเมื่อผู้ใช้เลือกตัวเลือกผู้จัดพิมพ์หรือตัวเลือกประเภท ฟิลด์ในแบบฟอร์มจะเก็บ parse object parse object อินสแตนซ์ มาดูวิธีการสร้างหนังสือที่ถูกเรียกเมื่อส่งแบบฟอร์มนี้ javascript 1 const createbook = async function () { 2 try { 3 // these values come from state variables linked to 4 // the screen form fields, retrieving the user choices 5 // as a complete parse object, when applicable; 6 const booktitlevalue = booktitle; 7 const bookisbdvalue = bookisbd; 8 // for example, bookpublisher holds the value from 9 // radiobutton group field with its options being every 10 // publisher parse object instance saved on server, which is 11 // queried on screen load via useeffect 12 const bookpublisherobject = bookpublisher; 13 const bookgenreobject = bookgenre; 14 // bookauthors can be an array of parse objects, since the book 15 // may have more than one author 16 const bookauthorsobjects = bookauthors; 17	 18 // creates a new parse object instance 19 let book = new parse object('book'); 20	 21 // set data to parse object 22 // simple title field 23 book set('title', booktitlevalue); 24	 25 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 26 let isbdquery = new parse query('isbd'); 27 isbdquery equalto('name', bookisbdvalue); 28 let isbdqueryresult = await isbdquery first(); 29 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 30 // if first returns a valid object instance, it means that there 31 // is at least one instance of isbd with the informed value 32 alert alert( 33 'error!', 34 'there is already an isbd instance with this value!', 35 ); 36 return false; 37 } else { 38 // create a new isbd object instance to create a one to one relation on saving 39 let isbd = new parse object('isbd'); 40 isbd set('name', bookisbdvalue); 41 isbd = await isbd save(); 42 // set the new object to the new book object isbd field 43 book set('isbd', isbd); 44 } 45	 46 // one to many relations can be set in two ways 47 // add direct object to field (parse will convert to pointer on save) 48 book set('publisher', bookpublisherobject); 49 // or add pointer to field 50 book set('genre', bookgenreobject topointer()); 51	 52 // many to many relation 53 // create a new relation so data can be added 54 let authorsrelation = book relation('authors'); 55 // bookauthorsobjects is an array of parse objects, 56 // you can add to relation by adding the whole array or object by object 57 authorsrelation add(bookauthorsobjects); 58	 59 // after setting the values, save it on the server 60 try { 61 await book save(); 62 // success 63 alert alert('success!'); 64 navigation goback(); 65 return true; 66 } catch (error) { 67 // error can be caused by lack of internet connection 68 alert alert('error!', error message); 69 return false; 70 } 71 } catch (error) { 72 // error can be caused by lack of value selection 73 alert alert( 74 'error!', 75 'make sure to select valid choices in publisher, genre and author fields!', 76 ); 77 return false; 78 } 79 }; todolist tsx 1 const createbook = async function () promise\<boolean> { 2 try { 3 // these values come from state variables linked to 4 // the screen form fields, retrieving the user choices 5 // as a complete parse object, when applicable; 6 const booktitlevalue string = booktitle; 7 const bookisbdvalue string = bookisbd; 8 // for example, bookpublisher holds the value from 9 // radiobutton group field with its options being every 10 // publisher parse object instance saved on server, which is 11 // queried on screen load via useeffect 12 const bookpublisherobject parse object = bookpublisher; 13 const bookgenreobject parse object = bookgenre; 14 // bookauthors can be an array of parse objects, since the book 15 // may have more than one author 16 const bookauthorsobjects \[parse object] = bookauthors; 17	 18 // creates a new parse object instance 19 let book parse object = new parse object('book'); 20	 21 // set data to parse object 22 // simple title field 23 book set('title', booktitlevalue); 24	 25 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 26 let isbdquery parse query = new parse query('isbd'); 27 isbdquery equalto('name', bookisbdvalue); 28 let isbdqueryresult parse object = await isbdquery first(); 29 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 30 // if first returns a valid object instance, it means that there 31 // is at least one instance of isbd with the informed value 32 alert alert( 33 'error!', 34 'there is already an isbd instance with this value!', 35 ); 36 return false; 37 } else { 38 // create a new isbd object instance to create a one to one relation on saving 39 let isbd parse object = new parse object('isbd'); 40 isbd set('name', bookisbdvalue); 41 isbd = await isbd save(); 42 // set the new object to the new book object isbd field 43 book set('isbd', isbd); 44 } 45	 46 // one to many relations can be set in two ways 47 // add direct object to field (parse will convert to pointer on save) 48 book set('publisher', bookpublisherobject); 49 // or add pointer to field 50 book set('genre', bookgenreobject topointer()); 51	 52 // many to many relation 53 // create a new relation so data can be added 54 let authorsrelation = book relation('authors'); 55 // bookauthorsobjects is an array of parse objects, 56 // you can add to relation by adding the whole array or object by object 57 authorsrelation add(bookauthorsobjects); 58	 59 // after setting the values, save it on the server 60 try { 61 await book save(); 62 // success 63 alert alert('success!'); 64 navigation goback(); 65 return true; 66 } catch (error) { 67 // error can be caused by lack of internet connection 68 alert alert('error!', error message); 69 return false; 70 } 71 } catch (error) { 72 // error can be caused by lack of value selection 73 alert alert( 74 'error!', 75 'make sure to select valid choices in publisher, genre and author fields!', 76 ); 77 return false; 78 } 79 }; ดูว่าผู้ bookauthorsobjects bookauthorsobjects ถูกตั้งค่าให้กับหนังสือใหม่ parse object parse object ตัวอย่างอย่างไร เพื่อสร้างความสัมพันธ์แบบหลายต่อหลาย คุณต้องสร้าง parse object relation parse object relation ใหม่ก่อน จากนั้นเพิ่มวัตถุที่เกี่ยวข้องเข้าไปทีละตัวหรือโดยการส่งอาร์เรย์ของ parse object parse object โดยใช้ parse object relation add parse object relation add วิธีการ parse จะสร้างคอลัมน์ประเภทความสัมพันธ์และยังสร้างตารางความสัมพันธ์ในฐานข้อมูลของคุณ parse จะสร้างลิงก์เพื่อการเข้าถึงที่ง่ายไปยังตารางใหม่ในคอลัมน์ฟิลด์ในแดชบอร์ดนี้ด้วย โปรดทราบว่าคุณยังสามารถจัดการวัตถุและเพิ่มวัตถุใหม่ลงในความสัมพันธ์ของคุณผ่านแดชบอร์ดเมื่อมันถูกสร้างขึ้น ดังนั้นโปรดจำทางลัดนี้เมื่อพัฒนาสิ่งที่คุณต้องการ 3 การสอบถามความสัมพันธ์แบบหลายต่อหลาย การดึงผลลัพธ์จากการค้นหาวัตถุที่มีความสัมพันธ์แบบหลายต่อหลายต้องใช้ขั้นตอนเพิ่มเติมเมื่อเปรียบเทียบกับการค้นหาปกติ ลองดูฟังก์ชันการค้นหาในหน้าจอรายการทะเบียนหนังสือ javascript 1 const querybooks = async function () { 2 // these values come from state variables linked to 3 // the screen query radiobutton group fields, with its options being every 4 // parse object instance saved on server from the referred class, which is 5 // queried on screen load via useeffect; these variables retrievie the user choices 6 // as a complete parse object; 7 const querypublishervalue = querypublisher; 8 const querygenrevalue = querygenre; 9 const queryauthorvalue = queryauthor; 10 const queryisbdvalue = queryisbd; 11	 12 // reading parse objects is done by using parse query 13 const parsequery = new parse query('book'); 14	 15 // one to many queries 16 if (querypublishervalue !== '') { 17 parsequery equalto('publisher', querypublishervalue); 18 } 19 if (querygenrevalue !== '') { 20 parsequery equalto('genre', querygenrevalue); 21 } 22	 23 // one to one query 24 if (queryisbdvalue !== '') { 25 parsequery equalto('isbd', queryisbdvalue); 26 } 27	 28 // many to many query 29 // in this case, we need to retrieve books related to the chosen author 30 if (queryauthorvalue !== '') { 31 parsequery equalto('authors', queryauthorvalue); 32 } 33	 34 try { 35 let books = await parsequery find(); 36 // many to many objects retrieval 37 // in this example we need to get every related author parse object 38 // and add it to our query result objects 39 for (let book of books) { 40 // this query is done by creating a relation and querying it 41 let bookauthorsrelation = book relation('authors'); 42 book authorsobjects = await bookauthorsrelation query() find(); 43 } 44 setqueriedbooks(books); 45 return true; 46 } catch (error) { 47 // error can be caused by lack of internet connection 48 alert alert('error!', error message); 49 return false; 50 } 51 }; todolist tsx 1 const querybooks = async function () promise\<boolean> { 2 // these values come from state variables linked to 3 // the screen query radiobutton group fields, with its options being every 4 // parse object instance saved on server from the referred class, which is 5 // queried on screen load via useeffect; these variables retrievie the user choices 6 // as a complete parse object; 7 const querypublishervalue parse object = querypublisher; 8 const querygenrevalue parse object = querygenre; 9 const queryauthorvalue parse object = queryauthor; 10 const queryisbdvalue parse object = queryisbd; 11	 12 // reading parse objects is done by using parse query 13 const parsequery parse query = new parse query('book'); 14	 15 // one to many queries 16 if (querypublishervalue !== '') { 17 parsequery equalto('publisher', querypublishervalue); 18 } 19 if (querygenrevalue !== '') { 20 parsequery equalto('genre', querygenrevalue); 21 } 22	 23 // one to one query 24 if (queryisbdvalue !== '') { 25 parsequery equalto('isbd', queryisbdvalue); 26 } 27	 28 // many to many query 29 // in this case, we need to retrieve books related to the chosen author 30 if (queryauthorvalue !== '') { 31 parsequery equalto('authors', queryauthorvalue); 32 } 33	 34 try { 35 let books \[parse object] = await parsequery find(); 36 // many to many objects retrieval 37 // in this example we need to get every related author parse object 38 // and add it to our query result objects 39 for (let book of books) { 40 // this query is done by creating a relation and querying it 41 let bookauthorsrelation = book relation('authors'); 42 book authorsobjects = await bookauthorsrelation query() find(); 43 } 44 setqueriedbooks(books); 45 return true; 46 } catch (error) { 47 // error can be caused by lack of internet connection 48 alert alert('error!', error message); 49 return false; 50 } 51 }; ในกรณีนี้ เพื่อค้นหาหนังสือใด ๆ ที่เกี่ยวข้องกับผู้เขียนเฉพาะ คุณต้องดำเนินการ parse query equalto parse query equalto โดยส่ง parse object parse object เป็นพารามิเตอร์ หลังจากการค้นหา parse จะไม่เก็บ parse object parse object จากฟิลด์ความสัมพันธ์แบบหลายต่อหลาย แต่จะเก็บเพียงการอ้างอิงถึงชื่อคลาสที่เกี่ยวข้อง เช่น {" type" "relation", "classname" "author"} {" type" "relation", "classname" "author"} เพื่อดึงข้อมูลและแสดงข้อมูลจากอ็อบเจ็กต์เหล่านี้ คุณต้องสร้างความสัมพันธ์และค้นหามันอีกครั้ง โดยเก็บผลลัพธ์ในอาร์เรย์อ็อบเจ็กต์ของคุณเอง หลังจากนั้น คุณสามารถวนซ้ำผ่านอาร์เรย์อ็อบเจ็กต์และใช้ parse object get parse object get เพื่อดึงชื่อผู้เขียน นี่คือวิธีที่หน้ารายการดูเหมือนเมื่อใช้ขั้นตอนเหล่านี้ บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการสร้างและค้นหาความสัมพันธ์แบบหลายต่อหลายใน parse บน react native ในคู่มือต่อไป เราจะแสดงให้คุณเห็นวิธีการทำการค้นหาและความสัมพันธ์แบบหนึ่งต่อหนึ่ง