Implementierung von CRUD in Parse mit React

react crud tutorial einführung das speichern von daten auf parse basiert auf der parse object parse object klasse jedes parse object parse object enthält schlüssel wert paare von json kompatiblen daten diese daten sind schemalos, was bedeutet, dass sie im voraus nicht angeben müssen, welche schlüssel in jedem parse object parse object existieren sie können einfach beliebige schlüssel wert paare festlegen, und unser backend wird sie speichern sie können auch die datentypen entsprechend den anforderungen ihrer anwendung angeben und typen wie zahl zahl , boolean boolean , string string , datetime datetime , liste liste , geopointers geopointers , und objekt objekt , indem sie sie vor dem speichern in json kodieren parse unterstützt auch das speichern und abfragen relationaler daten durch die verwendung der typen pointer pointer und relationen relationen in diesem leitfaden lernen sie, wie sie grundlegende datenoperationen durch eine crud beispielanwendung durchführen, die ihnen zeigt, wie sie daten von ihrem parse server datenbank in react erstellen, lesen, aktualisieren und löschen zuerst erstellen sie ihre komponentenfunktionen für jede crud operation und verwenden sie später in einem vollständigen bildschirmlayout, was zu einer to do listen app führt voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine react app, die erstellt und mit back4app verbunden ist wenn sie das bildschirmlayout, das in diesem leitfaden bereitgestellt wird, testen/verwenden möchten, sollten sie die ant design ant design bibliothek einrichten ziel um eine grundlegende crud anwendung in react mit parse zu erstellen 1 erstellen von datenobjekten der erste schritt, um ihre daten in ihrer parse datenbank zu verwalten, besteht darin, einige davon zu haben lassen sie uns jetzt eine createtodo createtodo funktion erstellen, die eine neue instanz von parse object parse object mit der „todo“ unterklasse erstellt die to do wird einen titel ( string string ) haben, der die aufgabe beschreibt, und ein done( boolean boolean ) feld, das angibt, ob die aufgabe abgeschlossen ist javascript 1 const createtodo = async function () { 2 // this value comes from a state variable 3 const newtodotitlevalue = newtodotitle; 4 // creates a new todo parse object instance 5 let todo = new parse object('todo'); 6 todo set('title', newtodotitlevalue); 7 todo set('done', false); 8 // after setting the to do values, save it on the server 9 try { 10 await todo save(); 11 // success 12 alert('success! to do created!'); 13 // refresh to dos list to show the new one (you will create this function later) 14 readtodos(); 15 return true; 16 } catch (error) { 17 // error can be caused by lack of internet connection 18 alert(`error! ${error message}`); 19 return false; 20 }; 21 };1 const createtodo = async function () promise\<boolean> { 2 // this value comes from a state variable 3 const newtodotitlevalue string = newtodotitle; 4 // creates a new todo parse object instance 5 let todo parse object = new parse object('todo'); 6 todo set('title', newtodotitlevalue); 7 todo set('done', false); 8 // after setting the to do values, save it on the server 9 try { 10 await todo save(); 11 // success 12 alert('success! to do created!'); 13 // refresh to dos list to show the new one (you will create this function later) 14 readtodos(); 15 return true; 16 } catch (error any) { 17 // error can be caused by lack of internet connection 18 alert(`error! ${error message}`); 19 return false; 20 }; 21 }; beachten sie, dass, wenn ihre datenbank noch keine todo todo tabelle (oder unterklasse) enthält, parse sie automatisch erstellt und auch alle spalten hinzufügt, die innerhalb der parse object parse object instanz mit der parse object set() parse object set() methode, die zwei argumente annimmt den feldnamen und den wert, der festgelegt werden soll 2 datenobjekte lesen nachdem sie einige daten in ihrer datenbank erstellt haben, kann ihre anwendung diese jetzt vom server lesen und dem benutzer anzeigen legen sie los und erstellen sie eine readtodos readtodos funktion, die eine parse query parse query , wobei das ergebnis in einer statusvariablen gespeichert wird javascript 1 const readtodos = async function () { 2 // reading parse objects is done by using parse query 3 const parsequery = new parse query('todo'); 4 try { 5 let todos = await parsequery find(); 6 // be aware that empty or invalid queries return as an empty array 7 // set results to state variable 8 setreadresults(todos); 9 return true; 10 } catch (error) { 11 // error can be caused by lack of internet connection 12 alert(`error! ${error message}`); 13 return false; 14 }; 15 };1 const readtodos = async function () promise\<boolean> { 2 // reading parse objects is done by using parse query 3 const parsequery parse query = new parse query('todo'); 4 try { 5 let todos parse object\[] = await parsequery find(); 6 // be aware that empty or invalid queries return as an empty array 7 // set results to state variable 8 setreadresults(todos); 9 return true; 10 } catch (error any) { 11 // error can be caused by lack of internet connection 12 alert(`error! ${error message}`); 13 return false; 14 }; 15 }; viele einschränkungen und anordnungen können auf ihre abfragen mit der parse query parse query klasse angewendet werden, aber vorerst werden wir uns an dieser einfachen abfrage orientieren, die jedes gespeicherte todo todo objekt abruft 3 aktualisieren von datenobjekten das aktualisieren einer parse object parse object instanz ist sehr ähnlich wie das erstellen einer neuen, mit dem unterschied, dass sie in diesem fall die zuvor erstellte objectid objectid zuweisen und dann speichern müssen, nachdem sie ihre neuen werte festgelegt haben javascript 1 const updatetodo = async function (todoid, done) { 2 // create a new todo parse object instance and set todo id 3 let todo = new parse object('todo'); 4 todo set('objectid', todoid); 5 // set new done value and save parse object changes 6 todo set('done', done); 7 try { 8 await todo save(); 9 // success 10 alert('success! to do updated!'); 11 // refresh to dos list 12 readtodos(); 13 return true; 14 } catch (error) { 15 // error can be caused by lack of internet connection 16 alert(`error! ${error message}`); 17 return false; 18 }; 19 };1 const updatetodo = async function ( 2 todoid string, 3 done boolean, 4 ) promise\<boolean> { 5 // create a new todo parse object instance and set todo id 6 let todo parse object = new parse object('todo'); 7 todo set('objectid', todoid); 8 // set new done value and save parse object changes 9 todo set('done', done); 10 try { 11 await todo save(); 12 // success 13 alert('success! to do updated!'); 14 // refresh to dos list 15 readtodos(); 16 return true; 17 } catch (error any) { 18 // error can be caused by lack of internet connection 19 alert(`error! ${error message}`); 20 return false; 21 }; 22 }; da diese beispiel app eine to do liste darstellt, nimmt ihre aktualisierungsfunktion ein zusätzliches argument, den done done wert, der darstellt, ob die spezifische aufgabe abgeschlossen ist oder nicht 4 datenobjekte löschen um ein datenobjekt zu löschen, müssen sie die destroy() destroy() methode in der parse object parse object instanz aufrufen, die es darstellt bitte seien sie vorsichtig, da dieser vorgang nicht umkehrbar ist javascript 1 const deletetodo = async function (todoid) { 2 // create a new todo parse object instance and set todo id 3 const todo = new parse object('todo'); 4 todo set('objectid', todoid); 5 // destroy should be called to delete a parse object 6 try { 7 await todo destroy(); 8 alert('success! to do deleted!'); 9 // refresh to dos list to remove this one 10 readtodos(); 11 return true; 12 } catch (error) { 13 // error can be caused by lack of internet connection 14 alert(`error ${error message}`); 15 return false; 16 }; 17 };1 const deletetodo = async function (todoid string) promise\<boolean> { 2 // create a new todo parse object instance and set todo id 3 let todo parse object = new parse object('todo'); 4 todo set('objectid', todoid); 5 // destroy should be called to delete a parse object 6 try { 7 await todo destroy(); 8 alert('success! to do deleted!'); 9 // refresh to dos list to remove this one 10 readtodos(); 11 return true; 12 } catch (error any) { 13 // error can be caused by lack of internet connection 14 alert(`error! ${error message}`); 15 return false; 16 }; 17 }; lassen sie uns nun diese vier funktionen in einer vollständigen komponente verwenden, damit sie sie testen und sicherstellen können, dass jede crud operation ordnungsgemäß funktioniert 5 verwendung von crud in einer react komponente hier ist der vollständige komponenten code, einschließlich gestalteter benutzeroberflächenelemente (unter verwendung von ant design ant design ), zustandsvariablen und aufrufen ihrer crud funktionen sie sollten eine separate komponente in einer datei namens todolist js/todolist tsx todolist js/todolist tsx in ihrem src src verzeichnis erstellen, das den folgenden code enthält, oder fügen sie ihn direkt in ihre hauptanwendungsdatei ein ( app js/app tsx app js/app tsx ) todolist js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, input, list } from 'antd'; 5 import { 6 checkoutlined, 7 closeoutlined, 8 plusoutlined, 9 redooutlined, 10 } from '@ant design/icons'; 11 12 export const todolist = () => { 13 // state variables 14 const \[readresults, setreadresults] = usestate(\[]); 15 const \[newtodotitle, setnewtodotitle] = usestate(''); 16 17 // functions used by the screen components 18 const createtodo = async function () { 19 // this value comes from a state variable 20 const newtodotitlevalue = newtodotitle; 21 // creates a new todo parse object instance 22 let todo = new parse object('todo'); 23 todo set('title', newtodotitlevalue); 24 todo set('done', false); 25 // after setting the to do values, save it on the server 26 try { 27 await todo save(); 28 // success 29 alert('success! to do created!'); 30 // refresh to dos list to show the new one (you will create this function later) 31 readtodos(); 32 return true; 33 } catch (error) { 34 // error can be caused by lack of internet connection 35 alert(`error! ${error message}`); 36 return false; 37 } 38 }; 39 40 const readtodos = async function () { 41 // reading parse objects is done by using parse query 42 const parsequery = new parse query('todo'); 43 try { 44 let todos = await parsequery find(); 45 // be aware that empty or invalid queries return as an empty array 46 // set results to state variable 47 setreadresults(todos); 48 return true; 49 } catch (error) { 50 // error can be caused by lack of internet connection 51 alert(`error! ${error message}`); 52 return false; 53 } 54 }; 55 56 const updatetodo = async function (todoid, done) { 57 // create a new to do parse object instance and set todo id 58 let todo = new parse object('todo'); 59 todo set('objectid', todoid); 60 // set new done value and save parse object changes 61 todo set('done', done); 62 try { 63 await todo save(); 64 // success 65 alert('success! to do updated!'); 66 // refresh todos list 67 readtodos(); 68 return true; 69 } catch (error) { 70 // error can be caused by lack of internet connection 71 alert(`error! ${error message}`); 72 return false; 73 } 74 }; 75 76 const deletetodo = async function (todoid) { 77 // create a new todo parse object instance and set todo id 78 let todo = new parse object('todo'); 79 todo set('objectid', todoid); 80 // destroy should be called to delete a parse object 81 try { 82 await todo destroy(); 83 alert('success! to do deleted!'); 84 // refresh to dos list to remove this one 85 readtodos(); 86 return true; 87 } catch (error) { 88 // error can be caused by lack of internet connection 89 alert(`error! ${error message}`); 90 return false; 91 } 92 }; 93 94 return ( 95 \<div> 96 \<div classname="header"> 97 \<img 98 classname="header logo" 99 alt="back4app logo" 100 src={ 101 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 102 } 103 /> 104 \<p classname="header text bold">{'react on back4app'}\</p> 105 \<p classname="header text">{'to do list'}\</p> 106 \</div> 107 \<div classname="container"> 108 \<div classname="flex between"> 109 \<h2 classname="list heading">todo list\</h2> 110 {/ to do read (refresh) button /} 111 \<button 112 type="primary" 113 shape="circle" 114 color={'#208aec'} 115 size={'default'} 116 onclick={readtodos} 117 icon={\<redooutlined />} 118 >\</button> 119 \</div> 120 \<div classname="new todo wrapper flex between"> 121 {/ todo create text input /} 122 \<input 123 value={newtodotitle} 124 onchange={(event) => setnewtodotitle(event target value)} 125 placeholder="new todo" 126 size="large" 127 /> 128 {/ todo create button /} 129 \<button 130 type="primary" 131 classname="create todo button" 132 color={'#208aec'} 133 size={'large'} 134 onclick={createtodo} 135 icon={\<plusoutlined />} 136 > 137 add 138 \</button> 139 \</div> 140 \<div> 141 {/ todo read results list /} 142 {readresults !== null && 143 readresults !== undefined && 144 readresults length > 0 && ( 145 \<list 146 datasource={readresults} 147 renderitem={(item) => ( 148 \<list item classname="todo item"> 149 \<p 150 classname={ 151 item get('done') === true 152 ? 'todo text done' 153 'todo text' 154 } 155 > 156 {item get('title')} 157 \</p> 158 \<div classname="flex row"> 159 {/ todo update button /} 160 {item get('done') !== true && ( 161 \<button 162 type="primary" 163 shape="circle" 164 classname="todo button" 165 onclick={() => updatetodo(item id, true)} 166 icon={ 167 \<checkoutlined classname="todo button icon done" /> 168 } 169 >\</button> 170 )} 171 {/ todo delete button /} 172 \<button 173 type="primary" 174 shape="circle" 175 classname="todo button" 176 onclick={() => deletetodo(item id)} 177 icon={ 178 \<closeoutlined classname="todo button icon remove" /> 179 } 180 >\</button> 181 \</div> 182 \</list item> 183 )} 184 /> 185 )} 186 \</div> 187 \</div> 188 \</div> 189 ); 190 }; todolist tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, input, list } from 'antd'; 4 import { 5 checkoutlined, 6 closeoutlined, 7 plusoutlined, 8 redooutlined, 9 } from '@ant design/icons'; 10 const parse = require('parse/dist/parse min js'); 11 12 export const todolist fc<{}> = () reactelement => { 13 // state variables 14 const initialreadresults parse object\[] = \[]; 15 const \[readresults, setreadresults] = usestate(initialreadresults); 16 const \[newtodotitle, setnewtodotitle] = usestate(''); 17 18 // functions used by the screen components 19 const createtodo = async function () promise\<boolean> { 20 // this value comes from a state variable 21 const newtodotitlevalue string = newtodotitle; 22 // creates a new todo parse object instance 23 let todo parse object = new parse object('todo'); 24 todo set('title', newtodotitlevalue); 25 todo set('done', false); 26 // after setting the to do values, save it on the server 27 try { 28 await todo save(); 29 // success 30 alert('success! to do created!'); 31 // refresh to dos list to show the new one (you will create this function later) 32 readtodos(); 33 return true; 34 } catch (error any) { 35 // error can be caused by lack of internet connection 36 alert('error!' + error message); 37 return false; 38 } 39 }; 40 41 const readtodos = async function () promise\<boolean> { 42 // reading parse objects is done by using parse query 43 const parsequery parse query = new parse query('todo'); 44 try { 45 let todos parse object\[] = await parsequery find(); 46 // be aware that empty or invalid queries return as an empty array 47 // set results to state variable 48 setreadresults(todos); 49 return true; 50 } catch (error any) { 51 // error can be caused by lack of internet connection 52 alert('error!' + error message); 53 return false; 54 } 55 }; 56 57 const updatetodo = async function (todoid string, done boolean) promise\<boolean> { 58 // create a new to do parse object instance and set todo id 59 let todo parse object = new parse object('todo'); 60 todo set('objectid', todoid); 61 // set new done value and save parse object changes 62 todo set('done', done); 63 try { 64 await todo save(); 65 // success 66 alert('success! to do updated!'); 67 // refresh todos list 68 readtodos(); 69 return true; 70 } catch (error any) { 71 // error can be caused by lack of internet connection 72 alert('error!' + error message); 73 return false; 74 } 75 }; 76 77 const deletetodo = async function (todoid string) promise\<boolean> { 78 // create a new todo parse object instance and set todo id 79 let todo parse object = new parse object('todo'); 80 todo set('objectid', todoid); 81 // destroy should be called to delete a parse object 82 try { 83 await todo destroy(); 84 alert('success! to do deleted!'); 85 // refresh to dos list to remove this one 86 readtodos(); 87 return true; 88 } catch (error any) { 89 // error can be caused by lack of internet connection 90 alert('error!' + error message); 91 return false; 92 } 93 }; 94 95 return ( 96 \<div> 97 \<div classname="header"> 98 \<img 99 classname="header logo" 100 alt="back4app logo" 101 src={ 102 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 103 } 104 /> 105 \<p classname="header text bold">{'react on back4app'}\</p> 106 \<p classname="header text">{'to do list'}\</p> 107 \</div> 108 \<div classname="container"> 109 \<div classname="flex between"> 110 \<h2 classname="list heading">todo list\</h2> 111 {/ to do read (refresh) button /} 112 \<button 113 type="primary" 114 shape="circle" 115 color={'#208aec'} 116 onclick={readtodos} 117 icon={\<redooutlined />} 118 >\</button> 119 \</div> 120 \<div classname="new todo wrapper flex between"> 121 {/ todo create text input /} 122 \<input 123 value={newtodotitle} 124 onchange={(event {target {value string}}) => setnewtodotitle(event target value)} 125 placeholder="new todo" 126 size="large" 127 /> 128 {/ todo create button /} 129 \<button 130 type="primary" 131 classname="create todo button" 132 color={'#208aec'} 133 size={'large'} 134 onclick={createtodo} 135 icon={\<plusoutlined />} 136 > 137 add 138 \</button> 139 \</div> 140 \<div> 141 {/ todo read results list /} 142 {readresults !== null && 143 readresults !== undefined && 144 readresults length > 0 && ( 145 \<list 146 datasource={readresults} 147 renderitem={(item parse object) => ( 148 \<list item classname="todo item"> 149 \<p 150 classname={ 151 item get('done') === true 152 ? 'todo text done' 153 'todo text' 154 } 155 > 156 {item get('title')} 157 \</p> 158 \<div classname="flex row"> 159 {/ todo update button /} 160 {item get('done') !== true && ( 161 \<button 162 type="primary" 163 shape="circle" 164 classname="todo button" 165 onclick={() => updatetodo(item id, true)} 166 icon={ 167 \<checkoutlined classname="todo button icon done" /> 168 } 169 >\</button> 170 )} 171 {/ todo delete button /} 172 \<button 173 type="primary" 174 shape="circle" 175 classname="todo button" 176 onclick={() => deletetodo(item id)} 177 icon={ 178 \<closeoutlined classname="todo button icon remove" /> 179 } 180 >\</button> 181 \</div> 182 \</list item> 183 )} 184 /> 185 )} 186 \</div> 187 \</div> 188 \</div> 189 ); 190 }; fügen sie auch diese css stile am ende ihrer app css app css datei hinzu 1 / / 2 / your other styles / 3 4 / back4app guide styles / 5 6 html { 7 box sizing border box; 8 outline none; 9 overflow auto; 10 } 11 12 , 13 before, 14 after { 15 margin 0; 16 padding 0; 17 box sizing inherit; 18 } 19 20 h1, 21 h2, 22 h3, 23 h4, 24 h5, 25 h6 { 26 margin 0; 27 } 28 29 p { 30 margin 0; 31 } 32 33 body { 34 margin 0; 35 background color #fff; 36 } 37 38 container { 39 width 100%; 40 max width 600px; 41 margin auto; 42 padding 20px 0; 43 } 44 45 wrapper { 46 width '90%'; 47 align self 'center'; 48 } 49 50 header { 51 align items center; 52 padding 25px 0; 53 background color #208aec; 54 } 55 56 header logo { 57 height 55px; 58 margin bottom 20px; 59 object fit contain; 60 } 61 62 header text bold { 63 margin bottom 3px; 64 color rgba(255, 255, 255, 0 9); 65 font size 16px; 66 font weight bold; 67 } 68 69 header text { 70 color rgba(255, 255, 255, 0 9); 71 font size 15px; 72 } 73 74 flex row { 75 display flex; 76 } 77 78 flex between { 79 display flex; 80 align items center; 81 justify content space between; 82 } 83 84 list heading { 85 font weight bold; 86 } 87 88 new todo wrapper { 89 margin top 20px; 90 margin bottom 10px; 91 } 92 93 new todo wrapper > input { 94 margin right 20px; 95 } 96 97 todo item { 98 border bottom width 1; 99 border bottom color 'rgba(0, 0, 0, 0 12)'; 100 } 101 102 todo text { 103 font size 15px; 104 } 105 106 todo text done { 107 color rgba(0, 0, 0, 0 3); 108 font size 15px; 109 text decoration line line through; 110 } 111 112 todo button { 113 width 32px; 114 height 32px; 115 margin left 5px; 116 background color transparent; 117 border radius 50px; 118 border none; 119 cursor pointer; 120 } 121 122 todo button\ hover, 123 todo button\ focus { 124 background color rgba(0, 0, 0, 0 1); 125 } 126 127 todo button icon done { 128 color #52c41a; 129 font size 16px; 130 } 131 132 todo button icon remove { 133 color #f5222d; 134 font size 16px; 135 } wenn ihre komponente richtig eingerichtet ist, sollten sie nach dem ausführen der app etwas wie dies sehen fügen sie einige to dos hinzu, indem sie die titel nacheinander in das eingabefeld eingeben und auf den hinzufügen hinzufügen button drücken beachten sie, dass nach jeder erfolgreichen erstellung die createtodo createtodo funktion die readtodos readtodos funktion auslöst, die ihre aufgabenliste automatisch aktualisiert sie sollten jetzt eine umfangreiche to do liste wie diese haben sie können jetzt ihre aufgaben als erledigt markieren, indem sie auf das häkchen daneben klicken, wodurch ihr erledigt erledigt wert auf wahr aktualisiert wird und sich der status des symbols links ändert die einzige verbleibende datenoperation ist jetzt das löschen, das durch drücken auf das mülleimer symbol ganz rechts in ihrem to do listenobjekt durchgeführt werden kann nach dem erfolgreichen löschen eines objekts sollten sie eine warnmeldung wie diese erhalten fazit am ende dieses leitfadens haben sie gelernt, wie man grundlegende datenoperationen (crud) in parse auf react durchführt im nächsten leitfaden zeigen wir ihnen, welche datentypen in parse unterstützt werden und wie sie sie verwenden können