Menghantar Data ke Templat EJS dan Sebaliknya — Panduan Pemula

Hei ??♂️ ! Jika anda baru bermula denganEJS (JavaScript Terbenam)dan tertanya-tanya cara menghantar data antarapelayandantemplat EJSanda, anda berada di tempat yang betul ! Saya sedang belajar tentang EJS sepanjang minggu ini, dan saya ingin berkongsi perkara yang saya pelajari tentang menghantar data kepada EJS dan cara menggunakan data tersebut.

Cara Menghantar Data dari Pelayan ke Templat EJS

Jadi, apabila anda ingin menghantar data daripada pelayan anda (Node.js + Express) ke templat EJS, ia sangat mudah. Anda hanya menggunakan kaedah res.render(), yang membolehkan anda menghantar data anda daripada pelayan ke fail .ejs anda.

Begini cara anda melakukannya:

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

Dalam contoh ini, kami memaparkan fail EJS (katakan index.ejs) dan menghantar objek data ke templat.

Kemudian, untukmenggunakan data inidalam templat EJS anda, anda hanya mengaksesnya seperti ini:

<%= data %>

Berikut ialah pecahan pantas:

• res.render() bertanggungjawab menghantar data ke templat.
• Teg<%= data %>dalam EJS ialah tempat data yang diluluskan dipaparkan.

Hanya pastikan bahawa nama data (seperti data dalam kes ini) adalahsamadi kedua-dua tempat (dalam kod pelayan anda dan dalam templat EJS anda). Jika mereka tidak sepadan, keadaan akan menjadi pelik!

Tunggu… Apa Berlaku Jika Tiada Data??

Ini bahagian yang rumit:EJS tidak menyemak sama ada data wujudsebelum menggunakannya. Ia hanya menggunakan data seolah-olah ia sentiasa ada. Jadi, jika anda cuba mengakses beberapa data yang tidak wujud (atau tidak diluluskan dengan betul), EJS boleh menimbulkan ralat dan ranap apl anda. Itu boleh menjadi sangat mengecewakan apabila anda baru bermula!

Tetapi jangan risau, ada penyelesaian mudah. Anda bolehmenyemak sama ada data itu wujudsebelum cuba menggunakannya. Anda boleh membungkus data anda dalam keadaan if seperti ini:

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

Dengan cara ini, anda tidak akan ranap apl anda jika berlaku masalah atau jika data tidak dihantar. Sebaliknya, anda boleh menunjukkan mesej sandaran atau mengambil tindakan lain.

?Petua Pro:Sentiasa semak sama ada data anda wujud dalam templat sebelum menggunakannya — ia menjimatkan banyak sakit kepala!

Masa Cabaran: Menghantar Data dari EJS ke Pelayan

Untuk menjadikan perjalanan pembelajaran ini menyeronokkan, saya memutuskan untuk membina projek ringkas yang mengambil nama pengguna sebagai input dan kemudian memberitahu mereka bilangan aksara dalam nama mereka. Mudah, kan? Begini cara saya melakukannya:

1. Dapatkan Data Input:
   Saya menggunakan borang HTML yang mengambil nama pertama dan nama keluarga pengguna.

2. Hantar Data ke Pelayan:
   MenggunakanPOST, saya menghantar data input ke pelayan, dan kemudian mengira kiraan aksara nama penuh.

3. Hantar Data Diproses Kembali ke Templat:
   Saya menghantar kiraan aksara kembali ke templat EJS untuk memaparkannya pada halaman.

Berikut ialah kod sebelah pelayan yang mengendalikan perkara ini:

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.bodymendapat data borang daripada input pengguna.
• Saya hanyamengira aksaradalam nama pertama dan terakhir dan menghantar kiraan itu ke fail EJS.
• Templat EJS kemudian memaparkan kiraan aksara.

Sila lihat kod penuh pada GitHub saya di sini: Kod Projek

Ringkasnya ?

Itu ringkasan ringkas tentang cara anda boleh menghantar data ke templat EJS dan mendapatkan kembali data daripada pelanggan! EJS sangat fleksibel dan memudahkan untuk mencampurkan HTML dengan JavaScript, dan mempelajari cara mengurus penghantaran data dengan berkesan membuka banyak kemungkinan untuk projek anda.

Berikut ialah pengambilan penting daripada siaran ini:

• Gunakan res.render() untuk menghantar data daripada pelayan anda ke templat EJS anda.
• Sentiasasemak sama ada data anda wujudsebelum menggunakannya dalam templat untuk mengelakkan ranap sistem.
• Anda boleh menghantar data kembali ke pelayan anda dengan mudah dan memprosesnya menggunakan req.body (untuk permintaan POST).

Jika anda baru belajar seperti saya, saya harap siaran ini membuat perkara lebih jelas dan membantu anda mengelakkan beberapa masalah awal. Jangan ragu untuk meninggalkan sebarang soalan atau komen di bawah! ?

Atas ialah kandungan terperinci Menghantar Data ke Templat EJS dan Sebaliknya — Panduan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!