Tutorial LENGKAP CRUD dengan Node JS, Express, React JS, dan MySQL (Full Stack)

En este video aprenderás a hacer una aplicación fullstack Usando node.js, express, mysql sin back-end y reaccionar js en la interfaz empezar a crear datos Por ejemplo aquí Joko leer datos luego modifique los datos Por ejemplo aquí Laura luego eliminar Cómo es el proceso de construcción,comencemos Aquí creé una carpeta vacía llamada fullstack y aquí es donde terminaré mi proyecto Asegúrese de que node.js esté instalado en su computadora antes de comenzar Si no tiene instalado node.js Visite el sitio web oficial,es decir, nodejs.org Luego descargue node.js según su plataforma e instálelo en su computadora Después de que node.js esté correctamente instalado en su computadora y asegúrese de Puede escribir el comando node -v así eso significa que estoy usando node.js versión 16 alors ce node.js inclut avec NPM ou Node Package Manager et pour vous assurer que vous pouvez taper la commande npm -v comme ceci cela signifie que j'utilise npm version8.1.2 je vais effacer à nouveau Ensuite, je créerai un sous-dossier ici, je le nommerai backend et je vais entrer ce dossier backend dans Terminal par cd backend maintenant je suis dans le dossier backend puis je vais créer un fichier package.json avec la commande npm init -y comme celle-ci Entrer alors maintenant dans le dossier backend il y a un fichier qui est package.json puis j'installerai quelques dépendances dont nous avons besoin pour installer les dépendances, nous pouvons utiliser la commande npm install ou il peut être abrégé comme j'aime ça le premier je vais installer express puis je vais aussi installer le client mysql, à savoir mysql2 puis j'installe aussisequelize sequelize c'est ORM ou mappage relationnel d'objet pour la base de données relationnelle alors j'installerai aussi cors ou cross-origin-resource-sharing afin que plus tard notre API soit accessible depuis l'extérieur du domaine Entrer si l'installation est terminée ici vous pouvez voir dans le fichier package.json qu'il y a des dépendances, à savoir cors, express, mysql2 et sequelize alors ici il y a un point d'entrée, à savoir index.js alors ici je vais ajouter le type alors le type est module cela fonctionne pour que plus tard nous puissions utiliser la syntaxe ES6 pour importer et exporter des modules enregistrer alors nous allons créer le fichier index.js ici सुनिश्चित करें कि यह बैकएंड फ़ोल्डर में है index.js então aqui vou importar expresso de expresso Y también voy a importar por color. así que haría unavariable const app=express así que app.escuchar Así que aquí está el puerto i puerto 5000. utilizará así que aquí hay un recordatorio Entonces aquí enviaré un mensaje console.log Así que el servidor de mensajes es Aquí agregué algo de middleware El primero es app.use el primero es maíz así que también usaré express json expreso.json para que luego podamosrecibir la solicitud en formato json registrador Para asegurarnos de que nuestra aplicación funciona bien podemos ejecutar nuestro proyecto en la terminal aquí ylo ejecutaré usando nodemon Instalé nodemon globalmente Si no tiene instalado nodemon globalmente, escriba el comando npm install -g nodemon así pero no ejecutaré este comando porque instalé nodemon globalmente Cómo asegurarse de que nodemon esté instalado globalmente en su computadora puedes escribir el comando nodemon -v así Aquí tengo la versión 2.0.15 de nodemon. gracioso eso significa que instalé nodemon Si nodemon está instalado Podemos ejecutar nuestro proyectocon el comando Nodo de índice Este índice es nuestro punto de entrada, que es index.js. ES iniciar sesión Si aparece un mensaje como este, el servidor está activo, significa que nuestra aplicación funciona bien. así que creo una nueva carpeta aquí Asegúrate de que esté en la carpeta backend Crearé una nueva carpeta a la que llamaré config. luego en la carpeta de configuración crearé un nuevo archivo Lo llamé Database.js aqui hago el link el primero que importaré sequelize import llamaré directamente así secuela de secuela entonces voy a crear una variable const db = nueva cadena así que aquí está el nombre de la base de datos que llamé crud_db así que aquí el nombre de usuario es root así que aquí está la contraseñapara la base de datos Lo dejaré en blanco porque no estoy usando contraseña en la base de datos. así que aquí está el host, es decir, localhost así que aquí hay un dialecto,es el DBMS que usamos en este caso usando MySQL así que solo lo exportamos exportar base de datos predeterminada registrador Entonces solo necesitamos crear esta base de datos crud_db aquí estoy usando xampp compruebe si apache y mysql funcionan bien entonces ve porque navegador ir a localhost/phpmyadmin luego ve a la base de datos así que crearé una nueva base de datos crud_db como esta para crear Entonces ahora tenemos la base de datos crud_db atrás vs código Luego volvería a crear una carpeta para asegurarme de que esté en la carpeta principal puse el nombre del modelo luego en la carpeta de modelos crearé un nuevo archivo Lo llamé UserModel.js Este modelo tiene una estructura de tabla sobre cómo nuestros datos se almacenan posteriormente en la base de datos. primero voy a importar la secuela te llamaré directamente resultado así que también importaré la conexión porque necesitamos conexión Importe la conexión que tomamos del archivo base de datos.js aquí en la configuración db de ../config kemudian Database.js luego convierta los tipos de datos aquí esta es una secuela similar a la secuela como esta entoncescrearé la estructura de la tabla aquí const usuario = db.define aquí está el nombre de la tabla, le daré el nombre de la tabla, es decir, usuario como eso Entonces el campo en el segundo parámetro es Entonces el tercer parámetro tiene una opción. यहां मैं एक विकल्प दूंगा जो फ्रीज टेबल का नाम है और मैं इसे सच कर दूंगा और यहाँ मैदान में पहला फ़ील्ड नाम है औरमैं सीधे यहां डेटाटाइप को कॉल करूंगा मैं वह प्रकार दूंगा जो एक स्ट्रिंग है मैं इसे दोहराऊंगा तो दूसरा क्षेत्र ईमेल है तो तीसरा क्षेत्र लिंग है डेटाटाइप हमेशा समान होते हैं, यानी मेरी स्ट्रिंग अंतिम अल्पविराम को हटा देगी तो हम बस इसे निर्यात करते हैं इस तरह डिफ़ॉल्ट उपयोगकर्ता निर्यात करें इसलिए मैं यहां एक फंक्शन बनाऊंगा जो डेटाबेस में यूजर टेबल नहीं मिलने पर टेबल बनाने का काम करता है मैं इस तरह के एक समारोह का उपयोग कर सकता हूं चूंकि यह एसिंक्रोनस है, मैं एसिंक्स का उपयोग करूंगा उस तरह यह सामान्य कार्य के समान है इसका फ़ंक्शन पर कोई नाम नहीं है और हम फ़ंक्शन को सीधे इस तरह कॉल कर सकते हैं तौर पर और यह फ़ंक्शन तब चलेगा जब हम UserModel फ़ाइल को कॉल करेंगे और इस फ़ंक्शन के अंदर मैं इस प्रतीक्षा की तरह एक फ़ंक्शन जोड़ूंगा, फिर यहां db.sync उस तरह रजिस्टर करने के लिए इसलिए मैं यहां एक और नया फ़ोल्डर बनाऊंगा सुनिश्चित करें कि यह बैकएंड फ़ोल्डर में है मैंने नियंत्रकों का नाम दिया और इस फोल्डर में मैंने एक नई फाइल बनाई मैंने इसे UserController.js नाम दिया है तो मैंयहां मॉडल आयात करूंगा आयात मैं नाम देता हूं उपयोगकर्ता तब से ../ तो ये हैं मॉडल्स तो यहाँ फ़ाइल का नाम UserModel.js है तो मैं यहाँ एक विधि बनाऊँगा मैं सीधे निर्यात करूँगा निर्यात स्थिरांक तब मैंने विधि का नाम दिया getUsers और मैं एसिंक्रोनस फ़ंक्शन का उपयोग करूंगा और यहां दो पैरामीटर हैं, अर्थात् अनुरोध और फिर प्रतिक्रिया और मैं एक कोशिश और पकड़ ब्लॉक का उपयोग करूंगा तो यहाँ कोशिश कर रहा हूँ मैं एक वेरिएबल बनाऊँगा réponse puis attendre l'utilisateur Cet utilisateur est du modèle ici .Trouver tout c'est la fonction de sequelize alors je donnerai res.status Je vais donner le statut qui est de 200 alors je donnela réponse ici json alors je vais analyser la réponse ici alors s'il y a une erreur, je consignerai l'erreur dans la console console.log alors je consignerai l'erreur dans la console error.message comme ça enregistrer puis je créerai à nouveau un dossier J'ai nommé des itinéraires puis dans ce dossier j'ai créé un nouveau fichier Je l'ai nommé UserRoute.js Ce fichier est utilisé pour gérer tout le routage le premier ici je vaisimporter express de l'express parce que nous utilisons un routeur express alors ici const router = express.Router like this alors j'exporterai directement ici निर्यात डिफ़ॉल्ट राउटर então eu vou importar o controlador aqui import eu vou chamar diretamente assim de ../controllers así que aquíel nombre del controlador es UserController.js Simplemente llamamos al método aquí El primero es getUsers Así que crearé un nuevo punto final aquí primero es el enrutador, así que aquí está el método de obtención Así que aquí el punto final es /usuarios Entonces el segundo parámetro tiene un método getUsers del controlador registrador Entonces lo llamamos UserRoute aquí en index.js vivimos aquí importa Importar ruta de usuario desde ./ por ejemplo, ruta Así que el nombre del archivo es UserRoute.js así y aquí lo llamamos middleware app.use(UserRoute) como este Ampliaré la terminal aquí. si sigo Así que aquí hay una consulta que se ejecuta para crear la tabla, es decir, la tabla de usuarios en la base de datos. Ahora si volvemosal navegador y vamos a la base de datos crud_db Entonces ahora tenemos una tabla, es decir, la tabla de usuarios aquí podemos ver la estructura aquí aquí hay un campo quetiene id como clave principal Luego nombre, correo electrónico, género creado y actualizado en Según el diagrama que hicimos en el modelo. Entonces podemosprobar si nuestra API funciona bien Para probar aquí, uso la extensión que es REST Client puedes usar cartero pero yo uso esta extensión de cliente REST Si no tiene esta extensión instalada,instálela primero voy a cerrar volver a nuestro proyecto si instaló la extensión del cliente REST podemos crear un archivo aquí para probar nuestra API asegúrese de que esté en la carpeta backend nuevo archivo y lo llamaré request.rest así Entrar aquí el primero es el métodoque se obtiene alors ici le point d'entrée est http://localhost puis le port est 5000 alors / utilisateurs aiment ça cliquez sur le lien ici envoyer la demande alors voici la réponse avec le statut 200 d'accord, nous obtenons une réponse tableau vide cela signifie que notre point de terminaison fonctionne bien, c'est juste que nous n'avons pas encore les données retour à UserController ici alors je vais créer une autre méthode pour prendre des données uniques Je vais le copier puis le coller ici et je vais changer cela pour getUserById comme ceci ici je vais changer pour trouver un comme ça puis ici nous recherchonsles données basées sur le paramètre id Je vais ajouter ici l'option où alors ici le champ est id puis nous prenons l'identifiant du paramètre, à savoir req.params.id comme ceci enregistrer puis allez sur UserRoute.js ici et je vais ajouter ici le point de terminaison je vais dupliquer ceci alors ici je vais ajouter la méthode, à savoir getUserById comme ceci Je vais entrer ceci comme ça alors ici getUserById alors nous ajoutons juste le paramètre id ici / : alors ici le paramètre est id comme ça, la méthode est toujours la même, à savoir obtenir enregistrer retour à request.rest ici et je ferai une nouvelle demande je vais copier ça puis collez-le ici et séparez-le avec un ### comme ceci alors il y a un lien ici puis je rajoute ici les paramètres / par exemple 1 send request alors là on obtient un statut de 200 d'accord et ici nous obtenons une réponse nulle cela signifie que notre point de terminaison fonctionne bien uniquement puisque nous n'avons pas les données retour à UserController et je vais créer des méthodes pour créer des données, mettre à jour et supprimer Je vais le copier puis le coller ici et je vais changer cela en createUser alors je vais supprimerça attendre puis User.create alors voici les données les données sont extraites de req.body commececi alors ici le statut de réponse je vais changer en 201 qui est créé alors ici je vais donner un message msg et le message que je donnerai à l'utilisateur créé comme ça enregistrer aller à UserRoute.js je vais ajouter ici createUser alors je vais dupliquer ça et je changerai la méthode en Post alors le point de terminaison est /users car nous n'utilisons pas de paramètres e aqui vou mudar para createUser assim registrar agora de volta ao request.rest vou fazer um novo pedido vou copiar isso separe-o com um ### assim massa então aqui está o método que vou fazer um post e aqui eu adiciono o tipo de conteúdo es decir, aplicación/json como este y aquí están los datosque vamos a enviar los datos están en formato json asegúrese de que entre comillas dobles como este el primero es el nombre así que aquí está el valor, por ejemplo, John Doe así que aquí el correo electrónico esjohn@gmail.com entonces género aquí, por ejemplo, aquí masculino haga clic en enviar solicitud Así que aquí hay una posición creada 201 y aquí está el mensaje creado por el usuario significa que nuestros datosse guardaron con éxito en la base de datos Haga clic aquí nuevamente para obtener una solicitud Así que ahora tenemos 1 dado aquíjohn con correo electrónico john@gmail.com con género masculino Aquí hay un identificador cuyo valor es 1 . ES podemos usar id 1 aquí enviar un pedido Ahora hemos identificado 1 de John Doe. recibir datos con obtenemos datos únicos aquí significa que nuestra API está funcionando bien Volver a UserController Entonces solo tenemos que crear un método para actualizar y eliminar te imitare pegar aquí y lo cambiaré para actualizar el usuario así que aquí voy a cambiar esta creación para actualizar y lo actualizamos en función de la identificación del parámetro y agregaré en el segundo parámetro aquí la opción después de req.body Te gustó eso Agregaré aquí donde así que aquí el campo es id tomamos la identificación del parámetro de req.params.id así entonces voy a cambiar el estado a 200 y cambiaré el mensaje a usuario actualizado así que voy a copiar eso entonces pega aqui y aquí lo cambiaré a deleteUser y cambiaré esta actualización para destruir así pour supprimer nous n'avons pas besoin de données Je vais supprimer le req.body ici et le message que je vais changer en utilisateur supprimé comme ça enregistrer retour à UserRoute.js et j'ajouterai ici le point final je vais dupliquer ça alors ici je vais ajouter la méthode, à savoir updateUser puis supprimez l'utilisateur comme celui-ci et ici je vais changer la méthode pour un patch à mettre à jour et nous le mettons à jour en fonction de l'identifiant du paramètre Je vais ajouter ici le paramètre id alors ici updateUser et pour supprimer la méthode est supprimer et ici nous avons aussi besoin du paramètre id alors ici deleteUser comme ça enregistrer retour à request.rest Je ferai une nouvelle demandede mise à jour copier ceci puis séparez-le avec un ### comme ceci pâte et je changerai la méthode pour un patch comme celui-ci et nous avons besoin du paramètre id pour la mise à jour Je vais ajouter ici l'identifiant qui est 1 parce que nous avons des données avec l'id 1 et je changerai ce John Doe par exemple en M Fikri alors je changerai l'email en mfikri@gmail.com le sexe est toujours le même envoyer une demande alors ici il y a un message mis à jour par l'utilisateur cela signifie que nous avons mis à jour avec succès cet utilisateur John Doe si je clique sur envoyer la demande sur l'utilisateur avec l'id 1 alors maintenant, les données ont changé pour M Fikri comme ça et l'e-mail a également changé Je vais ajouter une autre donnée Je posterai ce John Doe envoyer une demande utilisateur créé si je clique sur envoyer la demande pour tous les utilisateurs alors maintenant nous avons deux données ici avec id 1 et 2 maintenant je vais supprimer une de ces données je vais copier ça Je ferai une nouvelle demande ici séparer par ### pâte alors je changerai la méthode pour supprimer je vais supprimer les données avec l'id 2 comme ça envoyer une demande alors ici il y a un message utilisateursupprimé cela signifie que nous avons réussi à supprimer les données avec l'identifiant 2 et si nous envoyons une demande à tous les utilisateurs et maintenant nous avons une donnée ici, à savoir M Fikri Je vais ajouter une autre donnée ici envoyer la demande lagi agora temos mais dois dados com identificadores 1 e 3 até que a criação do back-end seja concluída Em seguida, vamos nos concentrarno frontend vou fechar tudo para o frontend aqui estou usandoReact JS se você não estiver familiarizado com react js Sugiero estudiar eltutorial de React JS para principiantes, el enlace está incluido en la descripción Abriré una nueva terminal aquí. nueva terminal y ahora estoy en la carpeta fullstack no en la carpeta de fondo respuesta js. para crear un proyecto usando solo escribe el comando npx crear-reaccionar-aplicación así que aquí está el nombre del proyecto Aquí nombré la interfaz así iniciar sesión si l'installation est terminée ici il ya deuxSi la instalación está completa aquí, entonces hay dos carpetas llamadas backend y frontend Backend es el proyecto que creamos anteriormente Mientras que Frontend es un proyecto que construimos usando React JS así que voy a la carpeta frontend en la terminal cd igual frontal ahora estoy en la carpeta frontend Así que instalaré algunas dependencias que necesitamos. npm install primero instalaré react-router-dom porque necesitaremos el enrutador más tarde Así que también instalaría axios y bulma css al estilo. iniciar sesión Luegovaya al archivo package.json en la interfaz Aquí hay dependencias como axios, bulma y aquí react-router-domtambién estoy usando la versión 6.3. A continuación, para asegurarnos de que nuestra interfaz funciona correctamente podemos ejecutar nuestro proyecto con el comando de inicio npm como este luego ve al navegador y vaya al puerto localhost 3000 si sale biensera asi entonces voya hacer un poco de limpieza ir a la carpeta src entonces eliminaría el archivo App.css También eliminaría el archivo App.test.js Tambiéneliminaría el archivo index.css entonces logo.svg Luego reportWebVitals.js luego setupTests.js मैंने केवल App.js और index.js फ़ाइलें छोड़ी हैं सबसे पहले मैं index.js फ़ाइल में जाता हूँ और मैं आयात index.css को हटा दूंगा Je supprimerai également import reportWebVitals et je supprimerai également la méthode ici enregistrer puis allez sur App.js Je supprimerai le logo d'importation et App.css alors je supprimerai également cette balise d'en-tête et je supprimerai également ce nom de classe Je n'ai laissé qu'un seul div ici puis je vais ajouter la balise h1 alors je donnerai lorem 5 enregistrer retour au navigateur alors ici il y acinq mots du texte lorem ipsum retour à vs code ensuite je vais intégrer le style avec bulma CSS aller à index.js je vais importer ici import puis bulma puis /css/bulma.css comme ceci enregistrer retour au navigateur maintenant le style a été réinitialisé par bulma CSS Ensuite, je vais créer un dossier ici dans le dossier src je donne le nom des composants puis à l'intérieur du dossier des composants créera un nouveau fichier de composant Je l'ai nommé UserList.js Vous pouvez également utiliser .jsx mais ici j'utilise .js Je peux changer la langue ici et je vais changer pour javascript réagir ici pour que plus tard les extraits fonctionnent bien pour nous faciliter la création de composants dans react js ici je vous propose d'installer l'extension Extraits de code ES7 + React/Redux/React-Native cette extension nous facilitera la tâche si nous jouons avec react si vous n'avez pas installé cette extension, veuillez l'installer retour à notre projet si parce que vous avez installé l'extension nous tapons juste ici rafce comme ceci entrez il générera automatiquement le code de base à partir du composant de réaction comme celui-ci alors je vais supprimer cette div et je ferai d'abord un tableau ici je ferai d'abord les colonnes je vais créer un div avec des colonnes de classe comme celle-ci puis à l'intérieur de la div il y a un autre div avec une classe de colonne sans s comme celui-ci Entrer il sera généré automatiquement comme ceci alors ici je vais donner margin-top 5 isso é aula de bulma então aqui vou adicionar is-half class Curtiu isso puis temporairementj'ajoute ici lorem ipsum vou adicionar aqui h1 lorem5 registrar então vou importar este componente para seu componente pai que é App.js vou importar aqui importe UserList de componentes e UserList como este então eu vou substituir isso torne-se uma UserList como esta registrar voltar ao navegador então aqui há cinco palavras de texto lorem ipsum e aqui há margin-top voltar ao código vs volver a UserList.js entonces quiero que este componente esté en el medio de la página ¿Puedo agregar aquí una clase centrada como esta? Esta es la clase de Bulma. registrador volver al navegador Así que ahora el texto está en el medio de la página así atrás vs código así que voy a hacer una mesa aquí tabla la tabla contiene una etiqueta thead para la tabla Luego hay una línea en la etiqueta thead Entonces la fila tiene una columna para el título. y voy a hacer la columna 5 así y me agruparia asi entonces agregaré aquí otro grupo que es cuerpo Te gustó eso Entonces el cuerpo tiene una fila, entonces la fila tiene una columna Y voy a hacer cinco columnas como esta iniciar sesión Automáticamente generará una tabla como esta. entonces agregaría una clase a la tabla esta es la mesa Entonces también agregaría la clase is-striped Te gustó eso por lo que tiene ancho completo como este así que aquí está el número y aquí está el nombre Então aqui está o e-mail, sexo e esse tipo de ação registrar voltar ao navegador então agora temos uma mesa aqui Com número, nome, e-mail, gênero e coluna de verbos voltar vs código então vou buscar diretamente os dados na tabela aqui da nossa API do backend Aqui estou usando os ganchos useState e useEffect Vou adicionar usestate e useeffect aqui usestate então use efeito assim तब मैं axios भी आयात करूंगा क्योंकि हम API के साथ बातचीत करेंगे अक्ष से आयात अक्ष तो मैं यहाँ एक नया राज्य बनाऊँगा कॉन्स्ट मैंने उपयोगकर्ताओं का नाम दिया तब राज्य को अद्यतन करने का कार्य सेट हैयूज़र यूज़स्टेट के बराबर है और यहां प्रारंभिक मान मैं इस तरह एक खाली सरणी दर्ज करूंगा तो मैंडेटा पुनर्प्राप्त करने के लिए एक विधि बनाउंगा const j'ai nommé getUsers comme ça et j'utiliserai la fonction asynchrone alors ici réponse const = attendre axios.get alors ici le point de terminaison esthttp://localhost alors voici le port C'est le port de notre backendqui est de 5000/utilisateurs comme celui-ci puis pendant un certain temps, je vais enregistrer la réponse dans la console console.log(response.data) comme ceci alors je vais exécuter cette fonction dans le crochet useEffect je vais ajouter ici useEffect alors ici getUsers comme ça puis ici dans le deuxième paramètre je vais ajouter le tableau vide des dépendances comme ceci cela signifie que cet useEffect s'exécute lorsque le composant est monté sur le DOM enregistrer aller au navigateur et j'inspecterai Element puis va dans la console maintenant nous avons les données ici, à savoir M Fikri et John Doe comme ça et nous venons de mettre les données dans l'état Je vais l'ajouter ici à l'état setUser comme ça puis response.data comme celui-ci et maintenant je boucle juste cet état ici utilisateurs.map alors ici, je vaisdonner le nom de l'élément est l'utilisateur comme celui-ci alors je vais aussi appeler l'index comme ça alors ici la fonction flèche généralement nous utilisons des accolades parce que je vais retourner la syntaxe jsx dans cette boucle, j'utiliserai des crochets ordinaires comme celui-ci alors je vais couper ça et coller ici et ici chaque boucle a une clé unique Je vais ajouter la clé ici la clé est extraite de user.id comme ceci alors voici le numéroque je prendrai de l'index cet index commence à partir de 0 donc je peux ajouter ici + 1 comme ceci alors voici le nom Nom d'utilisateur puis ici user.email et iciuser.gender comme ceci puis ici dans l'action j'ajoute des boutons pour modifier et supprimer je vais ajouter ici le bouton alors je donnerai cours la classe est le bouton puis est-petit puis est-info comme ceci et je donnerai l'étiquette d'édition Je vais dupliquer ceci puis ici pour supprimer e eu vou mudar isso é-info paraé-perigo assim registrar voltar ao navegador agora temos dois dados aqui M Fikri e John Doe com botões editar e excluir Em seguida, criarei um novo arquivo de componente novo arquivo que chamei de AddUser.js assim Vou mudar a linguagem para javascript reagir assim como sempre então eu vou removê-lo Vou criar uma div com coluna de classe Então, dentro desta div, há outra div sem classe de coluna como esta então aqui vou adicionar outro meio quadrado como este então lá eu adiciono uma margem quadrada-top 5 así que también agregaré una clase centrada como esta así que aquí voy a hacer un formulario así que aquí crearé otro div con área de clase y luego aquí crearé una etiqueta con etiqueta de clase Quitaría htmlFor y aquí daré la primera etiqueta, es decir, nombre entoncescrearé otro div con control de clase así que aquí haré el texto de entrada con una clase de entrada como esta Agregué un marcador de posición aquí daré un nombre aquí entonces lo copio entonces pega aqui y correo electrónico aquí y correo electrónico aquí así que me quedaré aquí de nuevo y aquí para el sexo para el sexo usaré select lo quitaré Crearé otro div con selección de clase. Te gustó eso et j'ai aussi ajouté y también agregóun cuadrado de ancho completo भी जोड़ा है entonces en este div haré una selección Vou remover o nome e o idporque não precisamos deles Portanto, há uma opção nesta seleção então aqui o valor é masculino então aqui homens eu vou repetir então aqui está uma mulher Então o valor também é feminino E vou copiar outro aqui cópia de então cole aqui aqui não precisamos dessa tag de classe e verifique eu vou removê-lo vou adicionar o botão aqui alors le bouton est le type soumettre alors je donnerai cours la classe est un bouton alors est un succès comme celui-ci alors je donnerai une étiquette de sauvegarde comme celle-ci enregistrer retour à App.js alors ici je vaisutiliser react-router-dom je vais importer ici importer de react-router-dom comme ceci d'abord je vais importer BrowserRouter alors j'importerai également des routes comme celle-ci puis route comme ça alors je changerai cette div en BrowserRouter et ici le BrowserRouter se ferme comme ça alors ici il y a des itinéraires puis dans Routesil y a une Route comme celle-ci Cette route a l'attribut path ici je donne / signifie maison alors ici il y a des éléments qui seront rendus et je vais rendre le composant UserList ici comme ça et je vais le dupliquer puis j'ai changé le chemin pour ajouter vous pouvez également ajouter / ajouter ici ou ça peut aussi être comme ça c'est seulement facultatif puis le composant à rendre je vais rendre le composant AddUser je vais importer ici importer AddUser à partir des composants AddUser et je vais changer cela en AddUser comme ceci et je supprimerai le composant UserList ici enregistrer retour au navigateur maintenant si je visite localhost: 3000 j'ai rechargé alors la table des utilisateurs apparaîtra ici et si je visite localhost:3000/add Ensuite, le formulaire d'ajout d'utilisateur apparaîtra ici retour à vs code aller à AddUser.js alors ici j'ajoute le crochet useState je vais ajouter ici useState ensuite j'importerai des axios car on va interagir avec l'API importer des axios à partir d'axios alors je vais créer un nouvel état ici primeiro const ie nome então setname useState e seu valor inicial, eu insiro uma string vazia como esta: eu vou repetir segundo é para e-mail em seguida, configure o e-mail então defina o gênero gênero assim e valor inicial para gênero eu coloco masculino aqui então, no texto de entrada, adicionarei valor aqui eu valorizo ​​aqui, é o nome do estado Então aqui eu adicionaria onChange e eu vou pegar o evento aqui Así que aquíestá la función para actualizar el estado que es setName: Así que aquí e.target.value como este te imitare entonces pega aqui y aquí el valor es el correo electrónico, así que aquí defina el correo electrónico como este y voy a pegar aquí de nuevo en la selección y aquí está el género, así que aquí establece el género así registrador así que aquí en el formulario quitaré la acción. y agregaré aquí en enviar Así que aquí está la función a la que llamé saveUser: y crearé esta función saveUser aquí const saveUser y usaréla función asíncrona Y capturaré el evento aquí. Aquíagregaré la prevención predeterminada para que luego, cuando enviemos la página, no se vuelva a cargar e.contención estándar así que también usaría el bloque try and catch e intenta esperar aquí luego axios.post Así que aquí está el punto final http://localhost port 5000/users Así que en el segundo parámetro, los datosque publicaremos Los datos se toman del estado, es decir, el nombre entonces envía un correo electrónico sexo otra vez Entonces, si se registró con éxito Voy a redirigir a la página de inicio. Puedo usar la función de navegación de react-router-dom para redirigir Importaré aquí importarllamaré aquí navegue directamente desde react-router-dom así así que crearé una nueva variable aquí const navegar = navegar así para redirigir puedo usar una función como esta y luego navegar aquí / significa casa Si hay un error,registraré el error en la consola. console.log así que aquí registraré el error como eso registrarse Volver al navegador, recargar e intentaré agregar nuevos datos aquí उदाहरण के लिए, यहाँ Dhea ईमेलहै dhea@gmail.com तो लिंग महिला है रजिस्टर करने के लिए तो यहाँ एक और डेटा है, जिसका नाम है Dhe इस तरह से एक महिला लिंग के साथ वापस बनाम कोड puis je créerai à nouveau un composant nouveau fichier que j'ai nommé EditUser.js comme ceci et je vais changer la langue en javascript réagir puis allez dans le composant AddUser et je vais copier tout le code dece composant AddUser Ctrl + Une copie et revenez au composant EditUser.js et je vais le coller ici ici, sur l'exportation par défaut, je vais changer pour EditUser alors ici sur le bouton je vais le changer en une mise à jour comme celle-ci alors ici dans la fonction je vais aussi le changer en EditUser comme ça sauvegarder puis allez sur App.js et j'ajouterai ici le composant EditUser importer EditUser à partir de composants/EditUser comme ceci alors je vais ajouter un nouvel itinéraire je vais dupliquer ça alors je vais changer le chemin d'accès à edit then / et nous devons lemodifier en fonction du paramètre id parameter Par conséquent, je vais ajouter les paramètres ici pour ajouter un paramètre, nous pouvons utiliser deux-points comme celui-ci, puis le paramètre est id alors le composant à rendre est EditUser comme ceci enregistrer retour au navigateur si je visite localhost:3000/edit/1 par exemple alors le formulaire de mise à jour apparaîtra ici Il ne nous reste plus qu'à définir les données ici retour à vs code aller à EditUser.js ici, je vais également utiliser le crochet useEffect que j'ajouterai ici useEffect puis ici je crée une méthode pour récupérer des données uniques const j'ai nommé getUserById comme ceci je vais aussi utiliser la fonction asynchrone alors ici réponse const = attendre puis axios.get alors ici, je vais utiliser un modèle de chaîne comme celui-ci ce n'est pas une citation mais un backtick qui est à côté du numéro 1 sur votre clavier alors ici le point de terminaison est http://localhost alors le port est 5000 puis /utilisateurs puis /id nous prenons l'identifiant du paramètre, à savoir l'identifiant du paramètre pour récupérer l'id du paramètre, nous pouvons utiliser useParams de react-router-dom je vais ajouter ici useParams comme ça alors ici const j'appellerai le paramètre directement ici, à savoir id égal à useParams comme ceci maintenant nous pouvons prendrela valeur de ce paramètre id de retour ici alors ici $ accolades commececi alors ici le paramètre est id comme ça alors je mettrai les réponses dans l'état une par une le premier est setName(response.data.name) मैं इसे दोहराऊंगा फिर दूसरा सेटईमेल(response.data.email) आखिरी सेक्स है तो यहाँ है response.data.gender उस तरह तो मैं इस फ़ंक्शन को हुक में कॉल करूंगा उपयोग प्रभाव मैं यहां जोड़ूंगा useEffect उपयोग प्रभाव तोयहाँ मैं इस तरह getUserById को कॉल करूँगा और दूसरे पैरामीटर में मैं यहां एक खाली सरणी जोड़ूंगा रजिस्टर करने के लिए ब्राउज़र पर वापस तो अब डेटा इस तरह सेट किया गया है एम फिकरी का ईमेल तो इस तरह से जेंडर अपने आप सेलेक्ट हो जाता है तब हम सिर्फ अपडेट फंक्शन चलाते हैं यहाँ onSubmit मैं इस तरह के उपयोगकर्ता को अपडेट करने के लिए इसे बदल दूंगा और यहाँ मैं भी बदलूँगा updateUser तो मैं पैच के लिए विधि बदल दूंगा और यहां मैं इसे इस तरह बैकटिक सिंटैक्स में बदल दूंगा फिर हम इसे आईडी के अनुसार अपडेट करते हैं, मैं यहां आईडी जोड़ूंगा /$ कोष्ठक इस तरह फिर id रजिस्टर करने के लिए ब्राउज़र पर वापस मैं इस अद्यतन का प्रयास करूँगा, उदाहरण के लिए एम फ़िक्री अपडेट करें तो अब बन गए एम फिकरीक इसका मतलब है कि हमारा ऐपठीक काम कर रहा है इसलिए मैं चाहता हूं कि जब मैं इनमें से किसी भी संपादन बटन पर क्लिक करूं तो इसेसंपादन फ़ॉर्म पर निर्देशित किया जाएगा वापस बनाम कोड फिर UserList.js पर जाएं nous pouvons utiliser le lienहम प्रतिक्रिया-राउटर-डोम से लिंक का उपयोग कर सकते हैं मैं यहां आयात करूंगा फिर यहां आयात करें प्रतिक्रिया-राउटर-डोम लिंक इस तरह मैं इस तालिका के ऊपर एक बटन भी जोड़ना चाहता हूं मैं इसे यहां जोड़ूंगा बटन मैं लिंक का उपयोग करता हूं उस तरह Je vais donner l'étiquette ajouter un nouveau comme celui-ci alors ici "à" et je pointerai ici pour ajouter comme ça et je donnerai cours la classe est la classe bulma, qui est un bouton alors c'est le succès enregistrer alors ici sur lebouton d'édition je vais aussi le changer en lien voici aussi le lien puis le lien je pointerai vers l'identifiant du paramètre /edit/ Je vais utiliser ici backtick puis ici modifier alors son /id nous prenons l'identifiant de user.id comme ceci enregistrer retour au navigateur maintenant ici il y a un nouveau bouton ajouter si je clique sur le bouton Ajouter un nouveau, il sera dirigé vers Ajouter un utilisateur de retour si je clique sur l'un de ces boutons d'édition par exemple ici Dhea alors il redirigera ici/edit/4 comme ceci अगर मैं एम फिकरी पर क्लिक करता हूं तो इसे यहां निर्देशित किया जाएगा और डेटासीधे इस तरह सेट किया गया है तो हम इसे हटाने के लिए केवल फ़ंक्शन चलाते हैं यहां डिलीट बटन पर मैं यहां क्लिक पर जोड़ूंगा तो यहाँ मैं DeleteUser मेथड बनाऊँगा फिर हम उपयोगकर्ता को आईडी द्वारा हटा देते हैं मैंइस तरह user.id से आईडी लूंगा इसलिए मैं यहां डिलीटयूजर फंक्शन बनाऊंगा कॉन्स्ट डिलीटयूजर मैं एसिंक्रोनस फ़ंक्शन का भी उपयोग करूंगा और हम यहां आईडी कैप्चर करेंगे तो मैं भीकोशिश और पकड़ ब्लॉक का उपयोग करूंगा और यहाँ परीक्षण पर प्रतीक्षा करें axios.delete तो यहाँ अंत बिंदु है, मैं यहाँ पैटर्न स्ट्रिंग का उपयोग करने जा रहा हूँ backtick फिर पोर्ट http://लोकलहोस्ट5000/उपयोगकर्ता है तब इसकी /id उस तरह तो अगर इसे सफलतापूर्वक हटा दिया गया है मैं फिर से getUsers विधि को कॉल करूंगा ताकि हम UI में डेटा परिवर्तन देख सकें इस तरह के उपयोगकर्ता प्राप्त करें Si hay un error, registraré el error en la consola. console.log luego error aquí registrarse volver al navegador Si hago clic en uno de los botones de eliminar Entonces M Fikri desapareció de la lista. significa que hemos eliminado con éxito los datos de la base de datos Vuelvo a hacer clic en eliminar y luego se eliminará nuevamente. significa que nuestra aplicación funciona bien Suficiente tutorial sobre cómo crear una aplicación fullstack usando node.js, express, mysql en backend y react js en frontend Si estás viendo este video por primera vez en este canal, suscríbete y activa la campanita de notificaciones Para que cada vez que subo un nuevo video de este canal recibas una notificación y proximo video