React et Parse : Tutoriel Technique sur le CRUD par Objet

tutoriel crud react introduction le stockage des données sur parse est construit autour de la parse object parse object classe chaque parse object parse object contient des paires clé valeur de données compatibles json ces données sont sans schéma, ce qui signifie que vous n'avez pas besoin de spécifier à l'avance quelles clés existent sur chaque parse object parse object vous pouvez simplement définir les paires clé valeur que vous souhaitez, et notre backend les stockera vous pouvez également spécifier les types de données selon les besoins de votre application et persister des types tels que nombre nombre , booléen booléen , chaîne chaîne , datetime datetime , liste liste , geopointers geopointers , et objet objet , en les encodant en json avant de les enregistrer parse prend également en charge le stockage et la requête de données relationnelles en utilisant les types pointers pointers et relations relations dans ce guide, vous apprendrez à effectuer des opérations de base sur les données à travers une application exemple crud, qui vous montrera comment créer, lire, mettre à jour et supprimer des données de votre base de données de serveur parse en react vous créerez d'abord vos fonctions de composant pour chaque opération crud, en les utilisant plus tard dans une mise en page d'écran complète, aboutissant à une application de liste de tâches conditions préalables pour compléter ce tutoriel, vous aurez besoin de une application react créée et connectée à back4app si vous souhaitez tester/utiliser la mise en page de l'écran fournie par ce guide, vous devez configurer le ant design ant design bibliothèque objectif créer une application crud de base en react en utilisant parse 1 création d'objets de données la première étape pour gérer vos données dans votre base de données parse est d'en avoir créons maintenant une createtodo createtodo fonction qui créera une nouvelle instance de parse object parse object avec la sous classe “todo” la tâche à faire aura un titre ( string string ) décrivant la tâche et un champ done( boolean boolean ) indiquant si la tâche est terminée 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 }; remarquez que si votre base de données n'a pas encore de todo todo table (ou sous classe), parse la créera automatiquement et ajoutera également toutes les colonnes définies à l'intérieur de l'instance parse object parse object en utilisant la méthode parse object set() parse object set() qui prend deux arguments le nom du champ et la valeur à définir 2 lecture des objets de données après avoir créé des données dans votre base de données, votre application peut maintenant les lire depuis le serveur et les afficher à votre utilisateur allez y et créez une readtodos readtodos fonction, qui effectuera un parse query parse query , en stockant le résultat dans une variable d'état 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 }; de nombreuses contraintes et ordonnancements peuvent être appliqués à vos requêtes en utilisant le parse query parse query classe, mais pour l'instant, nous nous en tiendrons à cette requête simple, qui récupérera chaque todo todo objet sauvegardé 3 mise à jour des objets de données mettre à jour un parse object parse object instance est très similaire à la création d'un nouveau, sauf que dans ce cas, vous devez lui attribuer l' objectid objectid précédemment créé et ensuite enregistrer, après avoir défini vos nouvelles valeurs 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 }; puisque cette application exemple représente une liste de tâches, votre fonction de mise à jour prend un argument supplémentaire, le fait fait valeur, qui représentera si la tâche spécifique est complétée ou non 4 suppression d'objets de données pour supprimer un objet de données, vous devez appeler le destroy() destroy() méthode dans l' parse object parse object instance qui le représente veuillez faire attention car cette opération n'est pas réversible 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 }; utilisons maintenant ces quatre fonctions dans un composant complet, afin que vous puissiez le tester et vous assurer que chaque opération crud fonctionne correctement 5 utilisation de crud dans un composant react voici le code complet du composant, y compris les éléments d'interface utilisateur stylisés (utilisant ant design ant design ), les variables d'état et les appels à vos fonctions crud vous devriez créer un composant séparé dans un fichier appelé todolist js/todolist tsx todolist js/todolist tsx dans votre src src répertoire contenant le code suivant ou l'ajouter directement à votre fichier d'application principal ( 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 }; ajoutez également ces styles css à la fin de votre app css app css fichier 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 } si votre composant est correctement configuré, vous devriez voir quelque chose comme ceci après avoir exécuté l'application allez y et ajoutez des tâches en tapant leurs titres dans la zone de saisie un par un et en appuyant sur le ajouter ajouter bouton notez qu'après chaque création réussie, la createtodo createtodo fonction déclenche la readtodos readtodos une, actualisant automatiquement votre liste de tâches vous devriez maintenant avoir une liste de tâches conséquente comme ceci vous pouvez maintenant marquer vos tâches comme faites en cliquant sur la coche à côté, ce qui met à jour leur faites faites valeur à vrai et change son statut d'icône à gauche la seule opération de données restante est maintenant celle de suppression, qui peut être effectuée en appuyant sur l'icône de la corbeille à l'extrême droite de votre objet de liste de tâches après avoir supprimé un objet avec succès, vous devriez recevoir un message d'alerte comme ceci conclusion à la fin de ce guide, vous avez appris à effectuer des opérations de données de base (crud) dans parse sur react dans le prochain guide, nous vous montrerons quels types de données sont pris en charge dans parse et comment les utiliser