การจัดการประเภทข้อมูลใน React กับ Parse SDK

การวิเคราะห์ประเภทข้อมูลในคอมโพเนนต์ react บทนำ ในหัวใจของฟีเจอร์ parse core คือการจัดการวัตถุข้อมูล parse อนุญาตให้คุณจัดเก็บและค้นหาข้อมูลได้อย่างตรงไปตรงมาโดยใช้ sdk หรือ api (rest หรือ graphql) ของตน ฟีเจอร์วัตถุข้อมูลทั้งหมดถูกสร้างขึ้นโดยใช้ parse object parse object คลาส ซึ่งฟิลด์อาจมีคู่คีย์ ค่า ของประเภทข้อมูลที่เข้ากันได้กับ json หลายประเภท ประเภทข้อมูลหลักที่สามารถกำหนดให้กับฟิลด์ของวัตถุได้มีดังนี้ หมายเลข หมายเลข จำนวนเต็ม (42) หรือจำนวนทศนิยม (42 5) ตราบใดที่ ‘ ’ เป็นตัวแบ่งทศนิยม; บูลีน บูลีน ค่าจริงหรือเท็จ; สตริง สตริง สตริงที่สามารถยาวได้ถึง 2147483647 ตัวอักษร โปรดทราบว่าค่าที่มีขนาดใหญ่นี้จะทำให้การดำเนินการข้อมูลช้าลง; วันที่และเวลา วันที่และเวลา วันที่และเวลา วันที่และเวลา วัตถุที่จัดเก็บในรูปแบบ utc เป็นค่าเริ่มต้น หากคุณต้องการใช้เขตเวลาอื่น การแปลงจะต้องทำด้วยตนเอง; อาร์เรย์ อาร์เรย์ อาร์เรย์ที่มีข้อมูลในรูปแบบที่เข้ากันได้กับ parse ใด ๆ วัตถุ วัตถุ json ที่มีข้อมูล parse ใด ๆ เมื่อมีใน sdk การเรียก include() include() จะนำรายละเอียดจากคุณสมบัติของวัตถุ เมื่อคุณเลือกใช้ประเภท array เราขอแนะนำให้เก็บวัตถุในอาร์เรย์ให้มีขนาดเล็ก เนื่องจากอาจส่งผลต่อประสิทธิภาพโดยรวมของการดำเนินการข้อมูลของคุณ คำแนะนำของเราคือการใช้ประเภท array หากไม่เกิน 20 องค์ประกอบและไม่เติบโตขึ้นตามเวลา แทนที่จะใช้ประเภท array คุณสามารถใช้ประเภท pointer และ relations เป็นทางเลือกได้。 ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการจัดเก็บข้อมูลในแต่ละประเภทข้อมูลพื้นฐานที่ระบุไว้ข้างต้น คุณจะสร้างส่วนประกอบการลงทะเบียนผลิตภัณฑ์บน react ซึ่งจะแสดงให้คุณเห็นวิธีการจัดรูปแบบ แปลง และบันทึกข้อมูลไปยัง parse server ของคุณใน react parse ยังมีประเภทข้อมูล geopoint geopoint เพื่อใช้พลังของทรัพยากรการระบุตำแหน่งทางภูมิศาสตร์ และข้อมูลเชิงสัมพันธ์เฉพาะของ parse โดยใช้ประเภท pointer pointer หรือ relation relation คุณจะเห็นทั้งสองอย่างนี้ในคู่มือต่อไป ข้อกำหนดเบื้องต้น ในการทำตามบทแนะนำนี้ คุณจะต้องมี แอป react ที่สร้างขึ้นและ https //www back4app com/docs/react/quickstart หากคุณต้องการทดสอบ/ใช้เลย์เอาต์หน้าจอที่จัดเตรียมโดยคู่มือนี้ คุณควรตั้งค่า https //ant design/docs/react/introduce เป้าหมาย เพื่อทำความเข้าใจประเภทข้อมูลพื้นฐานที่เข้ากันได้กับ parse และเพื่อจัดเก็บแต่ละประเภทข้อมูลบน parse จากคอมโพเนนต์ react 1 คอมโพเนนต์การสร้างผลิตภัณฑ์ เรามาสร้างโครงสร้างของคอมโพเนนต์กันก่อน มาทำให้มันง่ายและสร้างหน้าฟอร์มที่มีการป้อนข้อความหนึ่งสำหรับแต่ละประเภทข้อมูล, ช่องทำเครื่องหมายหนึ่งช่อง, และปุ่มส่งเพื่อบันทึกวัตถุ ข้อมูลเหล่านี้จะเก็บค่าฟิลด์ของคุณ ชื่อ ( ผลิตภัณฑ์ ผลิตภัณฑ์ ) , จำนวน ( สตริง สตริง ) , ราคา ( หมายเลข หมายเลข ) , ที่มีอยู่ ( หมายเลข หมายเลข ) , วันหมดอายุ ( วันที่และเวลา วันที่และเวลา ) , และหมวดหมู่( อาเรย์ อาเรย์ ) นอกจากนี้ คุณจะบันทึกฟิลด์ประเภท วัตถุ วัตถุ เพิ่มเติมในวิธีการบันทึกของคุณด้วย แต่ฟิลด์นี้จะไม่ต้องการฟิลด์การป้อนข้อมูล สร้างคอมโพเนนต์แยกต่างหากในไฟล์ที่เรียกว่า productcreation js/productcreation tsx productcreation js/productcreation tsx รวมถึงโค้ดต่อไปนี้ หรือเพิ่มลงในไฟล์แอปพลิเคชันหลักของคุณ ( app js/app tsx app js/app tsx ) คุณสามารถใช้เลย์เอาต์นี้พร้อมสไตล์ที่สมบูรณ์โดยใช้ ant design ant design และเพิ่มโค้ด css ลงใน app css app css ของคุณหรือจัดตั้งฟอร์มที่กำหนดเอง productcreation js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, checkbox, input } from 'antd'; 5 import { plusoutlined } from '@ant design/icons'; 6 7 export const productcreation = () => { 8 // state variables 9 const \[productname, setproductname] = usestate(''); 10 const \[productquantity, setproductquantity] = usestate(''); 11 const \[productprice, setproductprice] = usestate(''); 12 const \[productavailable, setproductavailable] = usestate(false); 13 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 14 const \[productcategories, setproductcategories] = usestate(''); 15 16 return ( 17 \<div> 18 \<div classname="header"> 19 \<img 20 classname="header logo" 21 alt="back4app logo" 22 src={ 23 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 24 } 25 /> 26 \<p classname="header text bold">{'react on back4app'}\</p> 27 \<p classname="header text">{'product creation'}\</p> 28 \</div> 29 \<div classname="container"> 30 {/ product field inputs /} 31 \<div classname="flex between"> 32 \<h2 classname="list heading">available?\</h2> 33 \<checkbox 34 onchange={(e) => setproductavailable(e target checked)} 35 >\</checkbox> 36 \</div> 37 \<div classname="form wrapper"> 38 \<input 39 classname="form input" 40 value={productname} 41 onchange={(event) => setproductname(event target value)} 42 placeholder="name" 43 size="large" 44 /> 45 \<input 46 classname="form input" 47 value={productquantity} 48 onchange={(event) => setproductquantity(event target value)} 49 placeholder="quantity" 50 size="large" 51 /> 52 \<input 53 classname="form input" 54 value={productprice} 55 onchange={(event) => setproductprice(event target value)} 56 placeholder="price" 57 size="large" 58 /> 59 \<input 60 classname="form input" 61 value={productexpirationdate} 62 onchange={(event) => setproductexpirationdate(event target value)} 63 placeholder="expiration date (mm/dd/yyyy)" 64 size="large" 65 /> 66 \<input 67 classname="form input" 68 value={productcategories} 69 onchange={(event) => setproductcategories(event target value)} 70 placeholder="categories (separated by comma)" 71 size="large" 72 /> 73 {/ add product button /} 74 \<button 75 type="primary" 76 classname="form button" 77 color={'#208aec'} 78 size={'large'} 79 onclick={createproduct} 80 icon={\<plusoutlined />} 81 > 82 create product 83 \</button> 84 \</div> 85 \</div> 86 \</div> 87 ); 88 }; productcreation tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, checkbox, input } from 'antd'; 4 import { plusoutlined } from '@ant design/icons'; 5 const parse = require('parse/dist/parse min js'); 6 7 export const productcreation fc<{}> = () reactelement => { 8 // state variables 9 const \[productname, setproductname] = usestate(''); 10 const \[productquantity, setproductquantity] = usestate(''); 11 const \[productprice, setproductprice] = usestate(''); 12 const \[productavailable, setproductavailable] = usestate(false); 13 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 14 const \[productcategories, setproductcategories] = usestate(''); 15 16 const createproduct = async function () promise\<boolean> { 17 try { 18 // these values come from state variables 19 // convert data values to corresponding data types 20 const productnamevalue string = productname; 21 const productquantityvalue number = number(productquantity); 22 const productpricevalue number = number(productprice); 23 const productavailablevalue boolean = productavailable; 24 const productexpirationdatevalue date = new date(productexpirationdate); 25 const productcategoriesvalue string\[] = productcategories split(','); 26 27 // creates a new product parse object instance 28 let product parse object = new parse object('product'); 29 30 // set data to parse object 31 product set('name', productnamevalue); 32 product set('quantity', productquantityvalue); 33 product set('price', productpricevalue); 34 product set('available', productavailablevalue); 35 product set('expirationdate', productexpirationdatevalue); 36 product set('categories', productcategoriesvalue); 37 product set('completedata', { 38 name productnamevalue, 39 quantity productquantityvalue, 40 price productpricevalue, 41 available productavailablevalue, 42 expirationdate productexpirationdatevalue, 43 categories productcategoriesvalue, 44 }); 45 46 // after setting the values, save it on the server 47 try { 48 let savedproduct parse object = await product save(); 49 // success 50 alert(`success! ${json stringify(savedproduct)}`); 51 return true; 52 } catch (error) { 53 // error can be caused by lack of internet connection 54 alert(`error! ${error message}`); 55 return false; 56 } 57 } catch (error any) { 58 // error can be caused by wrong type of values in fields 59 alert(`error! ${error message}`); 60 return false; 61 } 62 }; 63 64 return ( 65 \<div> 66 \<div classname="header"> 67 \<img 68 classname="header logo" 69 alt="back4app logo" 70 src={ 71 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 72 } 73 /> 74 \<p classname="header text bold">{'react on back4app'}\</p> 75 \<p classname="header text">{'product creation'}\</p> 76 \</div> 77 \<div classname="container"> 78 {/ product field inputs /} 79 \<div classname="flex between"> 80 \<h2 classname="list heading">available?\</h2> 81 \<checkbox 82 onchange={(e) => setproductavailable(e target checked)} 83 >\</checkbox> 84 \</div> 85 \<div classname="form wrapper"> 86 \<input 87 classname="form input" 88 value={productname} 89 onchange={(event) => setproductname(event target value)} 90 placeholder="name" 91 size="large" 92 /> 93 \<input 94 classname="form input" 95 value={productquantity} 96 onchange={(event) => setproductquantity(event target value)} 97 placeholder="quantity" 98 size="large" 99 /> 100 \<input 101 classname="form input" 102 value={productprice} 103 onchange={(event) => setproductprice(event target value)} 104 placeholder="price" 105 size="large" 106 /> 107 \<input 108 classname="form input" 109 value={productexpirationdate} 110 onchange={(event) => setproductexpirationdate(event target value)} 111 placeholder="expiration date (mm/dd/yyyy)" 112 size="large" 113 /> 114 \<input 115 classname="form input" 116 value={productcategories} 117 onchange={(event) => setproductcategories(event target value)} 118 placeholder="categories (separated by comma)" 119 size="large" 120 /> 121 {/ add product button /} 122 \<button 123 type="primary" 124 classname="form button" 125 color={'#208aec'} 126 size={'large'} 127 onclick={createproduct} 128 icon={\<plusoutlined />} 129 > 130 create product 131 \</button> 132 \</div> 133 \</div> 134 \</div> 135 ); 136 }; 1 html { 2 box sizing border box; 3 outline none; 4 overflow auto; 5 } 6 7 , 8 before, 9 after { 10 margin 0; 11 padding 0; 12 box sizing inherit; 13 } 14 15 h1, 16 h2, 17 h3, 18 h4, 19 h5, 20 h6 { 21 margin 0; 22 } 23 24 p { 25 margin 0; 26 } 27 28 body { 29 margin 0; 30 background color #fff; 31 } 32 33 container { 34 width 100%; 35 max width 600px; 36 margin auto; 37 padding 20px 0; 38 } 39 40 header { 41 align items center; 42 padding 25px 0; 43 background color #208aec; 44 } 45 46 header logo { 47 height 55px; 48 margin bottom 20px; 49 object fit contain; 50 } 51 52 header text bold { 53 margin bottom 3px; 54 color rgba(255, 255, 255, 0 9); 55 font size 16px; 56 font weight bold; 57 } 58 59 header text { 60 color rgba(255, 255, 255, 0 9); 61 font size 15px; 62 } 63 64 flex between { 65 display flex; 66 align items center; 67 justify content space between; 68 } 69 70 list heading { 71 font weight bold; 72 } 73 74 form wrapper { 75 margin top 20px; 76 margin bottom 10px; 77 } 78 79 form input { 80 margin bottom 20px; 81 } 82 83 form button { 84 width 100%; 85 } หลังจากตั้งค่าหน้าจอนี้ แอปพลิเคชันของคุณควรมีลักษณะดังนี้ โปรดทราบว่าแต่ละ ผลิตภัณฑ์ ผลิตภัณฑ์ มีฟิลด์การป้อนข้อความของตนเอง ยกเว้นสำหรับการป้อนช่องทำเครื่องหมาย boolean ซึ่งหมายความว่าข้อมูลในนั้นต้องแปลงเป็นประเภทข้อมูลที่สอดคล้องกันก่อนที่จะบันทึก 2 การแปลงข้อมูลที่ป้อน ก่อนที่จะบันทึกข้อมูลของคุณไปยัง parse object parse object , คุณต้องจัดรูปแบบ หมายเลข หมายเลข , วันที่และเวลา วันที่และเวลา , และ อาร์เรย์ อาร์เรย์ ข้อมูลนำเข้า ตอนนี้เรามาสร้างฟังก์ชันการบันทึก ซึ่งจะดึงข้อมูลจากตัวแปรสถานะของคุณและใช้การแปลงข้อมูลที่เหมาะสม productcreation js 1 const createproduct = async function () { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue = productname; 6 const productquantityvalue = number(productquantity); 7 const productpricevalue = number(productprice); 8 const productavailablevalue = productavailable; 9 const productexpirationdatevalue = new date(productexpirationdate); 10 const productcategoriesvalue = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert(`error! ${error message}`); 14 return false; 15 } 16 }; productcreation tsx 1 const createproduct = async function () promise\<boolean> { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue string = productname; 6 const productquantityvalue number = number(productquantity); 7 const productpricevalue number = number(productprice); 8 const productavailablevalue boolean = productavailable; 9 const productexpirationdatevalue date = new date(productexpirationdate); 10 const productcategoriesvalue string\[] = productcategories split(','); 11 } catch (error any) { 12 // error can be caused by wrong type of values in fields 13 alert(`error! ${error message}`); 14 return false; 15 } 16 }; หมายเลข หมายเลข หมายเลข การแปลงข้อมูลจะทำการแคสต์ค่าเป็น หมายเลข หมายเลข วัตถุ javascript วันที่เวลา วันที่เวลา จะถูกแปลงโดยใช้ วันที่ วันที่ ของตัวสร้างวัตถุ javascript; อาร์เรย์ อาร์เรย์ หนึ่งจะถูกสร้างขึ้นโดยใช้ string split string split วิธีใน javascript, สร้างอาร์เรย์ที่มีแต่ละรายการของฟิลด์หมวดหมู่ที่แยกด้วยเครื่องหมายจุลภาค โปรดทราบว่าข้อมูลของคุณตอนนี้อยู่ภายในวัตถุเดียว, ซึ่งสามารถตั้งค่าใน p ใหม่ arse object arse object อินสแตนซ์เพื่อบันทึกไปยังเซิร์ฟเวอร์โดยใช้ parse object set() parse object set() วิธี, ซึ่งรับสองอาร์กิวเมนต์ ชื่อฟิลด์และค่าที่จะตั้งค่า มาตั้งฟิลด์ใหม่ที่เรียกว่า completedata completedata , ซึ่งจะเป็น วัตถุ วัตถุ ประเภทฟิลด์, โดยมอบหมายวัตถุข้อมูลเดียวกันให้กับมัน ไปข้างหน้าและทำให้เสร็จสิ้น createproduct createproduct ฟังก์ชันด้วยสิ่งต่อไปนี้ productcreation js 1 const createproduct = async function () { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue = productname; 6 const productquantityvalue = number(productquantity); 7 const productpricevalue = number(productprice); 8 const productavailablevalue = productavailable; 9 const productexpirationdatevalue = new date(productexpirationdate); 10 const productcategoriesvalue = productcategories split(','); 11 12 // creates a new product parse object instance 13 let product = new parse object('product'); 14 15 // set data to parse object 16 product set('name', productnamevalue); 17 product set('quantity', productquantityvalue); 18 product set('price', productpricevalue); 19 product set('available', productavailablevalue); 20 product set('expirationdate', productexpirationdatevalue); 21 product set('categories', productcategoriesvalue); 22 product set('completedata', { 23 name productnamevalue, 24 quantity productquantityvalue, 25 price productpricevalue, 26 available productavailablevalue, 27 expirationdate productexpirationdatevalue, 28 categories productcategoriesvalue, 29 }); 30 31 // after setting the values, save it on the server 32 try { 33 let savedproduct = await product save(); 34 // success 35 alert(`success! ${json stringify(savedproduct)}`); 36 return true; 37 } catch (error) { 38 // error can be caused by lack of internet connection 39 alert(`error! ${error message}`); 40 return false; 41 } 42 } catch (error) { 43 // error can be caused by wrong type of values in fields 44 alert(`error! ${error message}`); 45 return false; 46 } 47 }; productcreation tsx 1 const createproduct = async function () promise\<boolean> { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue string = productname; 6 const productquantityvalue number = number(productquantity); 7 const productpricevalue number = number(productprice); 8 const productavailablevalue boolean = productavailable; 9 const productexpirationdatevalue date = new date(productexpirationdate); 10 const productcategoriesvalue string\[] = productcategories split(','); 11 12 // creates a new product parse object instance 13 let product parse object = new parse object('product'); 14 15 // set data to parse object 16 product set('name', productnamevalue); 17 product set('quantity', productquantityvalue); 18 product set('price', productpricevalue); 19 product set('available', productavailablevalue); 20 product set('expirationdate', productexpirationdatevalue); 21 product set('categories', productcategoriesvalue); 22 product set('completedata', { 23 name productnamevalue, 24 quantity productquantityvalue, 25 price productpricevalue, 26 available productavailablevalue, 27 expirationdate productexpirationdatevalue, 28 categories productcategoriesvalue, 29 }); 30 31 // after setting the values, save it on the server 32 try { 33 let savedproduct parse object = await product save(); 34 // success 35 alert(`success! ${json stringify(savedproduct)}`); 36 return true; 37 } catch (error any) { 38 // error can be caused by lack of internet connection 39 alert(`error! ${error message}`); 40 return false; 41 }; 42 } catch (error any) { 43 // error can be caused by wrong type of values in fields 44 alert(`error! ${error message}`); 45 return false; 46 } 47 }; คุณสามารถทดสอบส่วนประกอบได้แล้ว โดยการแทรก createproduct createproduct ฟังก์ชันในนั้น และเรียกใช้มันภายในปุ่มส่งฟอร์มของคุณ onclick onclick คุณควรเห็นการแจ้งเตือนที่มีข้อมูลของผลิตภัณฑ์ที่สร้างขึ้น เช่นนี้ เพื่อรับรองว่าข้อมูลของคุณถูกบันทึกบนเซิร์ฟเวอร์โดยใช้ประเภทข้อมูลที่ถูกต้อง คุณสามารถดูที่แดชบอร์ด parse ของคุณ คลิกที่ ผลิตภัณฑ์ ผลิตภัณฑ์ ตารางข้อมูลและสังเกตว่าทุกคอลัมน์มีประเภทข้อมูลของมันเขียนอยู่ที่ส่วนหัว คลาสของคุณควรมีลักษณะดังนี้ บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการบันทึกประเภทข้อมูลพื้นฐานแต่ละประเภทที่มีอยู่ใน parse โดยใช้คอมโพเนนต์ react ในคู่มือต่อไป คุณจะได้เรียนรู้เกี่ยวกับข้อมูลเชิงสัมพันธ์ใน parse