Übergabe von Daten an EJS-Vorlagen und umgekehrt – Ein Leitfaden für Einsteiger

Hey ??‍♂️ ! Wenn Sie gerade erst mit EJS (Embedded JavaScript) beginnen und sich fragen, wie Sie Daten zwischen Ihrem Server und EJS-Vorlagen übertragen können, sind Sie hier richtig ! Ich habe die ganze Woche etwas über EJS gelernt und wollte mitteilen, was ich über die Übergabe von Daten an EJS und die Arbeit mit den Daten gelernt habe.

---

So übergeben Sie Daten vom Server an eine EJS-Vorlage

Wenn Sie also Daten von Ihrem Server (Node.js Express) an eine EJS-Vorlage senden möchten, ist das ganz einfach. Sie verwenden einfach die Methode res.render(), mit der Sie Ihre Daten vom Server an Ihre .ejs-Datei senden können.

So machen Sie es:

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

In diesem Beispiel rendern wir eine EJS-Datei (sagen wir index.ejs) und übergeben das Datenobjekt an die Vorlage.

Um diese Daten in Ihrer EJS-Vorlage zu verwenden, greifen Sie einfach wie folgt darauf zu:

<%= data %>

Hier ist eine kurze Aufschlüsselung:

• res.render() ist für das Senden der Daten an die Vorlage verantwortlich.
• Im Tag <%= data %> in EJS werden die übergebenen Daten angezeigt.

Stellen Sie einfach sicher, dass der Name der Daten (wie in diesem Fall Daten) an beiden Stellen gleich ist (in Ihrem Servercode und in Ihrer EJS-Vorlage). Wenn sie nicht übereinstimmen, wird es seltsam!

---

Warten Sie ... Was passiert, wenn keine Daten vorhanden sind? ?

Hier ist der knifflige Teil: EJS prüft nicht, ob die Daten vorhanden sind bevor sie verwendet werden. Es verwendet die Daten einfach so, als wären sie immer vorhanden. Wenn Sie also versuchen, auf Daten zuzugreifen, die nicht vorhanden sind (oder nicht ordnungsgemäß übergeben werden), kann EJS einen Fehler auslösen und Ihre App zum Absturz bringen. Das kann sehr frustrierend sein, wenn man gerade erst anfängt!

Aber keine Sorge, es gibt eine einfache Lösung. Sie können überprüfen, ob die Daten vorhanden sind, bevor Sie versuchen, sie zu verwenden. Sie können Ihre Daten in eine if-Bedingung wie diese einschließen:

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

Auf diese Weise stürzt Ihre App nicht ab, wenn etwas schief geht oder die Daten nicht übermittelt wurden. Stattdessen können Sie eine Fallback-Nachricht anzeigen oder eine andere Aktion ausführen.

? Profi-Tipp: Überprüfen Sie immer, ob Ihre Daten in der Vorlage vorhanden sind, bevor Sie sie verwenden – das erspart Ihnen viel Ärger!

---

Herausforderungszeit: Daten von EJS an den Server übergeben

Damit diese Lernreise Spaß macht, habe ich beschlossen, ein einfaches Projekt zu erstellen, das den Namen eines Benutzers als Eingabe verwendet und ihm dann mitteilt, wie viele Zeichen sein Name enthält. Ganz einfach, oder? So habe ich es gemacht:

1. Eingabedaten abrufen:
   Ich habe ein HTML-Formular verwendet, das den Vor- und Nachnamen eines Benutzers annimmt.

2. Daten an den Server senden:
   Mit POST habe ich die Eingabedaten an den Server gesendet und dann die Zeichenanzahl des vollständigen Namens berechnet.

3. Senden Sie die verarbeiteten Daten zurück an die Vorlage:
   Ich habe die Zeichenanzahl an die EJS-Vorlage zurückgegeben, um sie auf der Seite anzuzeigen.

Hier ist der serverseitige Code, der dies erledigt:

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 ruft die Formulardaten aus der Benutzereingabe ab.
• Ich habe einfach die Zeichen im Vor- und Nachnamen gezählt und diese Anzahl an die EJS-Datei übergeben.
• Die EJS-Vorlage zeigt dann die Zeichenanzahl an.

Schauen Sie sich den vollständigen Code gerne hier auf meinem GitHub an: Projektcode

---

Kurz gesagt ?

Das ist eine kurze Zusammenfassung, wie Sie Daten an eine EJS-Vorlage übergeben und Daten vom Client zurückerhalten können! EJS ist äußerst flexibel und erleichtert das Mischen von HTML mit JavaScript. Wenn Sie lernen, wie Sie die Datenweitergabe effektiv verwalten, eröffnen sich Ihnen viele Möglichkeiten für Ihre Projekte.

Hier sind die wichtigsten Erkenntnisse aus diesem Beitrag:

• Verwenden Sie res.render(), um Daten von Ihrem Server an Ihre EJS-Vorlage zu übergeben.
• Überprüfen Sie immer ob Ihre Daten vorhanden sind, bevor Sie sie in der Vorlage verwenden, um Abstürze zu vermeiden.
• Sie können Daten ganz einfach an Ihren Server zurücksenden und mit req.body (für POST-Anfragen) verarbeiten.

Wenn Sie wie ich gerade erst lernen, hoffe ich, dass dieser Beitrag die Dinge klarer macht und Ihnen hilft, einige der frühen Fallstricke zu vermeiden. Fühlen Sie sich frei, unten Fragen oder Kommentare zu hinterlassen! ?

Das obige ist der detaillierte Inhalt vonÜbergabe von Daten an EJS-Vorlagen und umgekehrt – Ein Leitfaden für Einsteiger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!