Типы данных в Parse для компонентов React: руководство для DevOps

парсинг типов данных в компоненте react введение в сердце функции parse core находится управление объектами данных parse позволяет вам хранить и запрашивать свои данные просто, используя его sdk или api (rest или graphql) все функции объектов данных построены с использованием класса parse object parse object , поля которого могут содержать пары ключ значение нескольких совместимых с json типов данных основные типы данных, которые могут быть назначены полям объекта, следующие число число целые (42) или числа с плавающей запятой (42 5), при условии, что ‘ ’ является десятичным разделителем; логическое логическое значения true или false; строка строка строка, длина которой может составлять до 2147483647 символов имейте в виду, что такие большие значения замедляют операции с данными; datetime datetime datetime datetime объекты, хранящиеся в формате 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 и подключенное к back4app если вы хотите протестировать/использовать макет экрана, предоставленный этим руководством, вам следует настроить ant design ant design библиотеку цель понять основные типы данных, совместимые с 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 } после настройки этого экрана ваше приложение должно выглядеть так обратите внимание, что каждый атрибут продукта атрибут продукта имеет свое текстовое поле ввода, за исключением булевого поля ввода с флажком, что означает, что данные в них необходимо преобразовать в соответствующий тип данных перед сохранением 2 преобразование входных данных перед сохранением ваших данных в parse object parse object , вам нужно правильно отформатировать число число , datetime datetime , и массив массив входных данных давайте теперь создадим функцию сохранения, которая будет извлекать данные из ваших переменных состояния и применять соответствующее преобразование данных 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