การสร้างและค้นหาความสัมพันธ์ของข้อมูลใน React ด้วย Parse

ความสัมพันธ์ บทนำ ด้วย parse คุณสามารถจัดเก็บวัตถุข้อมูลที่สร้างความสัมพันธ์ระหว่างกัน เพื่อจำลองพฤติกรรมนี้ วัตถุ parseobject parseobject สามารถใช้เป็นค่าในวัตถุอื่น parseobject parseobject ภายในเฟรมเวิร์ก parse จะจัดเก็บวัตถุที่ถูกอ้างอิงไว้ในที่เดียวเพื่อรักษาความสอดคล้อง ซึ่งจะช่วยให้คุณมีพลังเพิ่มเติมเมื่อสร้างและรันคำค้นหาที่ซับซ้อน มีประเภทความสัมพันธ์หลักสามประเภท หนึ่งต่อหลาย หนึ่งต่อหลาย , ซึ่งวัตถุหนึ่งสามารถเกี่ยวข้องกับวัตถุอื่น ๆ ได้หลายวัตถุ; หลายต่อหลาย หลายต่อหลาย , ซึ่งสามารถสร้างความสัมพันธ์ที่ซับซ้อนมากมายระหว่างวัตถุหลาย ๆ วัตถุ หนึ่งต่อหนึ่ง หนึ่งต่อหนึ่ง , ซึ่งสร้างความสัมพันธ์โดยตรงระหว่างวัตถุสองวัตถุและเฉพาะพวกเขาเท่านั้น; มีสองวิธีในการสร้างความสัมพันธ์ หนึ่งต่อหลาย หนึ่งต่อหลาย ใน parse (แนะนำ) วิธีแรกคือการใช้ parse pointers parse pointers ในคลาสลูก ซึ่งเป็นวิธีที่เร็วที่สุดในการสร้างและค้นหา เราจะใช้สิ่งนี้ในคู่มือนี้ วิธีที่สองคือการใช้ อาร์เรย์ อาร์เรย์ ของ parse pointers parse pointers ในคลาสพ่อแม่ซึ่งอาจทำให้เวลาค้นหาช้า ขึ้นอยู่กับขนาดของพวกเขา เนื่องจากปัญหาด้านประสิทธิภาพนี้ เราจะใช้เพียงตัวอย่างพอยเตอร์เท่านั้น มีสามวิธีในการสร้างความสัมพันธ์ หลายต่อหลาย หลายต่อหลาย ใน parse (แนะนำ) อย่างแรกคือการใช้ parse relations parse relations , ซึ่งเป็นวิธีที่เร็วที่สุดในการสร้างและค้นหา เราจะใช้สิ่งนี้ในคู่มือนี้ อย่างที่สองคือการใช้ arrays arrays ของ parse pointers parse pointers ซึ่งอาจทำให้เวลาค้นหาช้า ขึ้นอยู่กับขนาดของมัน อย่างที่สามคือการใช้ jointable jointable ซึ่งมีแนวคิดมาจากฐานข้อมูลคลาสสิก เมื่อมีความสัมพันธ์แบบหลายต่อหลาย เราจะรวมทุก objectid objectid หรือ pointer pointer จากทั้งสองด้านเข้าด้วยกันเพื่อสร้างตารางแยกใหม่ซึ่งความสัมพันธ์จะถูกติดตาม ในคู่มือนี้ คุณจะสร้างแอปพลิเคชันการลงทะเบียนหนังสือ react ที่มีการเชื่อมโยงข้อมูลหลักสามประเภท คุณจะได้เรียนรู้วิธีการสร้างและค้นหาความสัมพันธ์ของข้อมูลโดยใช้ back4app และ react ในทุกช่วงเวลา คุณสามารถเข้าถึงโครงการนี้ได้ผ่านที่เก็บ github ของเราเพื่อตรวจสอบสไตล์และโค้ดที่สมบูรณ์ https //github com/templates back4app/react js associations https //github com/templates back4app/react ts associations ข้อกำหนดเบื้องต้น ในการทำตามบทแนะนำนี้ คุณจะต้องมี แอป react ที่สร้างขึ้นและ https //www back4app com/docs/react/quickstart หากคุณต้องการเรียกใช้โปรเจกต์ตัวอย่างในคู่มือนี้ คุณควรตั้งค่า https //ant design/ เป้าหมาย เพื่อดำเนินการและแสดงความสัมพันธ์ของฐานข้อมูลใน react โดยใช้ parse ในสถานการณ์ที่สมจริง 1 การเข้าใจคลาส book เนื่องจากในคู่มือนี้เราจะใช้ตัวอย่างแอปพลิเคชันการลงทะเบียนหนังสือ คุณต้องเข้าใจก่อนว่าความสัมพันธ์ของวัตถุถูกจัดเรียงอย่างไรในฐานข้อมูลนี้ คลาสวัตถุหลักที่คุณจะใช้คือ book book คลาส ซึ่งจะเก็บข้อมูลการลงทะเบียนหนังสือแต่ละเล่ม นี่คือคลาสวัตถุอีกสี่คลาส ผู้จัดพิมพ์ ผู้จัดพิมพ์ ชื่อผู้จัดพิมพ์หนังสือ ความสัมพันธ์แบบหนึ่งต่อหลายกับ book book ; ประเภท ประเภท ประเภทหนังสือ ความสัมพันธ์แบบหนึ่งต่อหลายกับ book book โปรดทราบว่าสำหรับตัวอย่างนี้เราจะพิจารณาว่าหนังสือสามารถมีประเภทเดียวเท่านั้น; ผู้เขียน ผู้เขียน ผู้เขียนหนังสือ ความสัมพันธ์แบบหลายต่อหลายกับ book book , เนื่องจากหนังสือสามารถมีผู้เขียนมากกว่าหนึ่งคนและผู้เขียนสามารถมีหนังสือมากกว่าหนึ่งเล่มได้เช่นกัน; isdb isdb หมายเลขระบุ isdb ของหนังสือ ความสัมพันธ์แบบหนึ่งต่อหนึ่งกับ book book , เนื่องจากหมายเลขนี้เป็นเอกลักษณ์สำหรับแต่ละเล่ม นี่คือการแสดงภาพของตารางฐานข้อมูลเหล่านี้ เพื่อความเรียบง่าย เราจะสมมติว่าแต่ละคลาสวัตถุมีเพียงประเภทสตริง ชื่อ ชื่อ คุณสมบัติ ( ชื่อเรื่อง ชื่อเรื่อง สำหรับ หนังสือ หนังสือ ), นอกเหนือจากคุณสมบัติสัมพันธ์เพิ่มเติมใด ๆ ขั้นตอนที่ 2 การสร้างความสัมพันธ์ ก่อนที่จะเข้าสู่ขั้นตอนนี้ เราขอแนะนำให้คุณโคลนและรันตัวอย่างแอป react ( https //github com/templates back4app/react js associations , https //github com/templates back4app/react ts associations ) แอปพลิเคชันนี้มีหน้าหลักสองหน้าคือ หนึ่งหน้าที่รับผิดชอบในการแสดงรายการหนังสือที่ลงทะเบียนและอีกหน้าสำหรับการสร้างหนังสือใหม่ ในแบบฟอร์มการลงทะเบียนหนังสือ จะมีลิงก์โดยตรงไปยังวัตถุที่เกี่ยวข้องอื่น ๆ และฟิลด์ป้อนข้อความที่กำหนดให้กับค่าของ isbd ของหนังสือ ซึ่งจะใช้ในการสร้างความสัมพันธ์แบบหนึ่งต่อหนึ่ง มาดูวิธีการสร้างหนังสือที่ถูกเรียกเมื่อส่งแบบฟอร์มนี้ 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 // radiogroup 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 // one to one (1 1) 26 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 27 let isbdquery = new parse query('isbd'); 28 isbdquery equalto('name', bookisbdvalue); 29 let isbdqueryresult = await isbdquery first(); 30 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 31 // if first returns a valid object instance, it means that there 32 // is at least one instance of isbd with the informed value 33 alert( 34 'error! 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 (1\ n) 47 // one to many relations can be set in two ways 48 // add direct object to field (parse will convert to pointer on save) 49 book set('publisher', bookpublisherobject); 50 // or add pointer to field 51 book set('genre', bookgenreobject topointer()); 52 53 // many to many (n\ n) 54 // create a new relation so data can be added 55 let authorsrelation = book relation('authors'); 56 // bookauthorsobjects is an array of parse objects, 57 // you can add to relation by adding the whole array or object by object 58 authorsrelation add(bookauthorsobjects); 59 60 // after setting the values, save it on the server 61 try { 62 await book save(); 63 // success 64 alert('success!'); 65 // navigate back to home screen using react router 66 history push('/'); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert(`error! ${error message}`); 71 return false; 72 } 73 } catch (error) { 74 // error can be caused by lack of value selection 75 alert( 76 'error! make sure to select valid choices in publisher, genre and author fields!', 77 ); 78 return false; 79 } 80 }; typescript 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 // one to one (1 1) 26 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 27 let isbdquery parse query = new parse query('isbd'); 28 isbdquery equalto('name', bookisbdvalue); 29 let isbdqueryresult parse object = await isbdquery first(); 30 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 31 // if first returns a valid object instance, it means that there 32 // is at least one instance of isbd with the informed value 33 alert( 34 'error! 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 (1\ n) 47 // one to many relations can be set in two ways 48 // add direct object to field (parse will convert to pointer on save) 49 book set('publisher', bookpublisherobject); 50 // or add pointer to field 51 book set('genre', bookgenreobject topointer()); 52 53 // many to many (n\ n) 54 // create a new relation so data can be added 55 let authorsrelation = book relation('authors'); 56 // bookauthorsobjects is an array of parse objects, 57 // you can add to relation by adding the whole array or object by object 58 authorsrelation add(bookauthorsobjects); 59 60 // after setting the values, save it on the server 61 try { 62 await book save(); 63 // success 64 alert('success!'); 65 // navigate back to home screen using react router 66 history push('/'); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert(`error! ${error message}`); 71 return false; 72 } 73 } catch (error) { 74 // error can be caused by lack of value selection 75 alert( 76 'error! make sure to select valid choices in publisher, genre and author fields!', 77 ); 78 return false; 79 } 80 }; ตอนนี้เรามาดูแยกกันว่าการสร้างการเชื่อมโยงสามประเภทนั้นทำอย่างไรเมื่อสร้าง หนังสือ หนังสือ วัตถุ ความสัมพันธ์แบบหนึ่งต่อหลาย สังเกตว่าการ bookpublisherobject bookpublisherobject และ bookgenreobject bookgenreobject ถูกตั้งค่าให้กับหนังสือใหม่ parse object parse object ตัวอย่าง ดูว่ามันง่ายแค่ไหนใน parse ในการสร้างความสัมพันธ์แบบหนึ่งต่อหลาย คุณสามารถกำหนดตัวอย่างวัตถุเป้าหมายหรือชี้ไปที่มันโดยใช้ parse object set parse object set วิธีการ ซึ่งรับสองอาร์กิวเมนต์ ชื่อฟิลด์และค่าที่จะตั้งค่า parse จะสร้างคอลัมน์ประเภทข้อมูลชี้และลิงก์โดยตรงในแดชบอร์ดของคุณเพื่อการเข้าถึงอย่างรวดเร็ว ความสัมพันธ์แบบหลายต่อหลาย ดูว่าการ 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 จะสร้างลิงก์เพื่อการเข้าถึงที่ง่ายไปยังตารางใหม่ในคอลัมน์ฟิลด์ในแดชบอร์ด ความสัมพันธ์แบบหนึ่งต่อหนึ่ง ดูว่า bookisbdvalue bookisbdvalue ถูกตั้งค่าเป็นหนังสือใหม่ parse objec parse objec t instance การสร้างและการบันทึกความสัมพันธ์แบบหนึ่งต่อหนึ่งและแบบหนึ่งต่อหลายใน parse เป็นกระบวนการที่คล้ายกัน ซึ่งคุณจะต้องส่ง parse object parse object instance โดยใช้ parse object set parse object set วิธีการ ซึ่งมีสองอาร์กิวเมนต์ ชื่อฟิลด์และค่าที่จะตั้งค่า สิ่งที่ต้องระวังคือ ก่อนที่จะบันทึก คุณต้องตรวจสอบว่าไม่มี isbd isbd วัตถุที่มีค่า id สตริง isbd ที่แจ้งในฐานข้อมูลของคุณ และไม่มี book book วัตถุที่เกี่ยวข้องกับมันอยู่แล้ว ส่วนที่สองจะเป็นจริงเสมอในกรณีนี้ เนื่องจากคุณกำลังสร้าง book book วัตถุใหม่ทุกครั้ง การบังคับให้ isbd isbd มีเอกลักษณ์สามารถทำได้โดยใช้คำค้นที่เน้นดังต่อไปนี้ javascript 1 let isbdquery = new parse query('isbd'); 2 isbdquery equalto('name', bookisbdvalue); 3 let isbdqueryresult = await isbdquery first(); 4 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 5 // if first returns a valid object instance, it means that there 6 // is at least one instance of isbd with the informed value 7 alert( 8 'error! there is already an isbd instance with this value!', 9 ); 10 return false; 11 } typescript 1 let isbdquery parse query = new parse query('isbd'); 2 isbdquery equalto('name', bookisbdvalue); 3 let isbdqueryresult parse object = await isbdquery first(); 4 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 5 // if first returns a valid object instance, it means that there 6 // is at least one instance of isbd with the informed value 7 alert( 8 'error! there is already an isbd instance with this value!', 9 ); 10 return false; 11 } หลังจากบันทึกวัตถุของคุณสำเร็จแล้ว parse จะสร้างคอลัมน์ประเภทข้อมูลพอยเตอร์และลิงก์โดยตรงในแดชบอร์ดของคุณด้วย 3 การสอบถามความสัมพันธ์ การสอบถามวัตถุที่เกี่ยวข้องนั้นค่อนข้างตรงไปตรงมาเนื่องจากส่วนใหญ่จะถูกจัดการโดย parse ดูฟังก์ชันการสอบถามในหน้าจอรายการหนังสือและหลังจากนั้นเราจะเน้นว่าประเภทความสัมพันธ์แต่ละประเภทถูกสอบถามอย่างไร 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(`error! ${error message}`); 49 return false; 50 } 51 }; typescript 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(`error! ${error message}`); 49 return false; 50 } 51 }; การค้นหาหนึ่งต่อหลาย ในการค้นหาหนังสือใด ๆ ที่เกี่ยวข้องกับผู้จัดพิมพ์หรือแนวเฉพาะ คุณต้องใช้ parse query equalt parse query equalt วิธีการที่ส่ง parse object parse object ตัวอย่างเป็นพารามิเตอร์ หลังจากการค้นหา parse จะเก็บตัวอย่างที่สมบูรณ์ของฟิลด์ความสัมพันธ์แบบหนึ่งต่อหลายไว้ในวัตถุที่ได้ผลลัพธ์ เพื่อดึงข้อมูลและแสดงข้อมูลจากตัวอย่างวัตถุเหล่านี้ คุณสามารถเชื่อมโยง parse object get parse object get วิธีการแบบนี้ bookparseobject get(('publisher') get('name') bookparseobject get(('publisher') get('name') การค้นหาหลายต่อหลาย ในการค้นหาหนังสือใด ๆ ที่เกี่ยวข้องกับผู้เขียนเฉพาะ คำค้นหาจะใช้เพียง parse query equalto parse query equalto วิธีการ อย่างไรก็ตาม หลังจากการค้นหา parse จะไม่เก็บ parse object parse object ตัวอย่างจากฟิลด์ความสัมพันธ์หลายต่อหลาย เพียงแค่การอ้างอิงถึงชื่อคลาสที่เกี่ยวข้อง เช่น {" type" "relation", "classname" "author"} {" type" "relation", "classname" "author"} เพื่อดึงข้อมูลและแสดงข้อมูลจากตัวอย่างวัตถุเหล่านี้ คุณต้องสร้างความสัมพันธ์และค้นหามันอีกครั้ง โดยเก็บผลลัพธ์ในอาร์เรย์วัตถุของคุณเอง การค้นหาหนึ่งต่อหนึ่ง เช่นเดียวกับก่อนหน้านี้ ในการค้นหาหนังสือใด ๆ ที่เกี่ยวข้องกับ isbd เฉพาะ คุณต้องทำการ parse query equalto parse query equalto วิธีการโดยส่ง parse object parse object ตัวอย่างเป็นพารามิเตอร์ หลังจากการค้นหา parse จะเก็บตัวอย่างที่สมบูรณ์ของฟิลด์ความสัมพันธ์หนึ่งต่อหนึ่งในวัตถุที่ได้ผลลัพธ์ เช่นเดียวกับที่ทำกับฟิลด์ความสัมพันธ์หนึ่งต่อหลาย บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการสร้างและค้นหาความสัมพันธ์ใน parse บน react ในคู่มือต่อไป เราจะแสดงให้คุณเห็นวิธีการลงทะเบียนผู้ใช้