Transmission de données aux modèles EJS et vice-versa – Guide du débutant

Hé ??‍♂️ ! Si vous débutez avec EJS (JavaScript intégré) et que vous vous demandez comment transmettre des données entre votre serveur et vos modèles EJS, vous êtes au bon endroit ! J'ai découvert EJS toute la semaine et je voulais partager ce que j'ai appris sur la transmission de données à EJS et sur la façon de travailler avec les données.

---

Comment transmettre des données du serveur à un modèle EJS

Donc, lorsque vous souhaitez envoyer des données de votre serveur (Node.js Express) vers un template EJS, c'est super simple. Vous utilisez simplement la méthode res.render(), qui vous permet d'envoyer vos données du serveur vers votre fichier .ejs.

Voici comment procéder :

res.render("ejs_file_name", { data });

Dans cet exemple, nous rendons un fichier EJS (disons index.ejs) et transmettons l'objet de données au modèle.

Ensuite, pour utiliser ces données dans votre template EJS, il vous suffit d'y accéder comme ceci :

<%= data %>

Voici une répartition rapide :

• res.render() est responsable de l'envoi des données au modèle.
• La balise <%= data %> dans EJS est l'endroit où les données transmises sont affichées.

Assurez-vous simplement que le nom des données (comme les données dans ce cas) est le identique aux deux endroits (dans le code de votre serveur et dans votre modèle EJS). S'ils ne correspondent pas, les choses vont devenir bizarres !

---

Attendez... Que se passe-t-il s'il n'y a pas de données ? ?

Voici la partie délicate : EJS ne vérifie pas si les données existent avant de les utiliser. Il utilise simplement les données comme si elles étaient toujours là. Ainsi, si vous essayez d'accéder à des données qui n'existent pas (ou ne sont pas transmises correctement), EJS peut générer une erreur et faire planter votre application. Cela peut être très frustrant quand on débute !

Mais ne vous inquiétez pas, il existe une solution simple. Vous pouvez vérifier si les données existent avant d'essayer de les utiliser. Vous pouvez envelopper vos données dans une condition if comme celle-ci :

<% if (locals.data) { %>
  <%= data %>
<% } else { %>
  
No data available!
<% } %>

De cette façon, vous ne planterez pas votre application si quelque chose ne va pas ou si les données n'ont pas été transmises. Au lieu de cela, vous pouvez afficher un message de secours ou effectuer une action différente.

? Conseil de pro : Vérifiez toujours si vos données existent dans le modèle avant de l'utiliser : cela vous évite bien des maux de tête !

---

Challenge Time : transmission des données d'EJS au serveur

Pour rendre ce parcours d'apprentissage amusant, j'ai décidé de créer un projet simple qui prend le nom d'un utilisateur en entrée, puis lui indique combien de caractères contiennent son nom. Simple, non ? Voici comment j'ai procédé :

1. Obtenir les données d'entrée :
   J'ai utilisé un formulaire HTML qui prend le prénom et le nom d'un utilisateur.

2. Envoyer des données au serveur :
   À l'aide de POST, j'ai envoyé les données d'entrée au serveur, puis j'ai calculé le nombre de caractères du nom complet.

3. Renvoyer les données traitées au modèle :
   J'ai transmis le nombre de caractères au modèle EJS pour l'afficher sur la page.

Voici le code côté serveur qui gère cela :

app.post("/submit", (req, res) => {
  const charCnt = req.body["fName"].length + req.body["lName"].length;
  res.render("index.ejs", { charectercount: charCnt });
}); // I used body-parser to get the data from the form

• req.body récupère les données du formulaire à partir de la saisie de l'utilisateur.
• J'ai simplement compté les caractères du prénom et du nom et j'ai transmis ce nombre au fichier EJS.
• Le modèle EJS affiche ensuite le nombre de caractères.

N'hésitez pas à consulter le code complet sur mon GitHub ici : Code du projet

---

En quelques mots ?

Voici un bref résumé de la façon dont vous pouvez transmettre des données à un modèle EJS et récupérer les données du client ! EJS est super flexible et facilite le mélange de HTML avec JavaScript, et apprendre à gérer efficacement la transmission des données ouvre de nombreuses possibilités pour vos projets.

Voici les principaux points à retenir de cet article :

• Utilisez res.render() pour transmettre les données de votre serveur à votre modèle EJS.
• Toujours vérifiez si vos données existent avant de les utiliser dans le modèle pour éviter les plantages.
• Vous pouvez facilement renvoyer des données à votre serveur et les traiter en utilisant req.body (pour les requêtes POST).

Si vous êtes en train d'apprendre comme moi, j'espère que cet article rendra les choses plus claires et vous aidera à éviter certains des premiers pièges. N'hésitez pas à laisser vos questions ou commentaires ci-dessous ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!