ejs獲取js變量值

Hi! Welcome to NODE AND EJS TEMPLATE ENGINE SERIES. Today, we will talk about EJS variables or how we can inject values?

嗨！ 歡迎使用NODE和EJS模板引擎系列。 今天，我們將討論EJS變量或如何注入值？

Just like normal JavaScript, EJS can read assigned value to variables on the server and render them in the template.

就像普通JavaScript一樣，EJS可以讀取服務(wù)器上變量的賦值并將其呈現(xiàn)在模板中。

Take Note! You should have Node.js installed in your before you can start using EJS in this article.

做記錄！ 在開始使用EJS之前，您應(yīng)該已經(jīng)安裝了Node.js。

To download Node JS, visit nodejs.org, then install.

要下載Node JS，請訪問nodejs.org ，然后安裝。

* BASIC NODE.JS/EXPRESS KNOWLEDGE REQUIRED

*需要基本NODE.JS /表達(dá)知識

To begin, ensure you have EJS and express installed via npm.

首先，請確保您已通過npm安裝了EJS和express。

To install EJS, simply open a terminal/command prompt and type the following command:

要安裝EJS，只需打開終端/命令提示符并鍵入以下命令：

npm install ejsornpm install ejs –save

• You can use either command prompt or PowerShell as terminal.

  您可以使用命令提示符或PowerShell作為終端。

• We will create 2 files, as usual, one for our express server file and the second our EJS file.

  與往常一樣，我們將創(chuàng)建2個文件，其中一個用于我們的快速服務(wù)器文件，另一個用于我們的EJS文件。

• EJS helps us embed JavaScript code if statements and loops inside HTML.

  如果在HTML內(nèi)有語句和循環(huán)，EJS可以幫助我們嵌入JavaScript代碼。

Let's briefly go through the EJS tags first. These tags may be weird, but it's super easy when you understand.

讓我們先簡要介紹一下EJS標(biāo)簽。 這些標(biāo)簽可能很奇怪，但是當(dāng)您理解時，它非常容易。

<%= %> : Prints value: For example <%= 2 + 2 %> prints out 4.

<％=％> ：打印值：例如， <％= 2 + 2％>打印出4 。

<% %> : is used to include some programming methods we want to use. Like If/else and loops.

<％％> ：用于包含一些我們要使用的編程方法。 如If / else和循環(huán)。

Open your text editor and type the following code, save as app.js.

打開文本編輯器，然后輸入以下代碼，另存為app.js。

var express = require('express'); var ejs = require('ejs'); var app = express(); app.set('view engine', 'ejs');app.get("/", function(req, res) { // root route or home routeres.render("home", {x: "Lucy Christ",age: 16}); }); app.listen(3000, function() {console.log("server is listening!!!"); });

Unlike any other express app, we used res.render then the EJS file and not res.send. Also, I didn't require the EJS app. There's no problem!. You can do so if you wish.

與其他Express應(yīng)用程序不同，我們使用res.render然后使用EJS文件，而不使用res.send 。 另外，我不需要EJS應(yīng)用。 這里沒有問題！。 如果您愿意，可以這樣做。

Now, let's create our ejs file.

現(xiàn)在，讓我們創(chuàng)建我們的ejs文件 。

Open a text editor and type the following code, save as home.ejs

打開文本編輯器，然后輸入以下代碼，另存為home.ejs

<h1>Hello, my name is <%=x%> and i am <%=age%> </h1>

• As usual, create a folder in your app.js directory called views.

  與往常一樣，在app.js目錄中創(chuàng)建一個名為views的文件夾。

• Cut and paste the ejs file in the views folder.

  將ejs文件剪切并粘貼到views文件 夾中 。

• Take Note: The folder name views is not a random word I selected but it's the reserved folder name where express checks for template engine by default.

  請注意：文件夾名稱視圖不是我選擇的隨機(jī)詞，而是默認(rèn)情況下Express檢查模板引擎的保留文件夾名稱。

• In our express server, we used app.set() and passed in our template engine, unlike our other examples.

  在我們的快遞服務(wù)器中，我們使用app.set()并將其傳遞到模板引擎中，這與其他示例不同。

Finally, initiate the app.js file with node app.js in a terminal and view the port in a browser.
localhost:3000

最后，在終端中使用節(jié)點app.js初始化app.js文件，并在瀏覽器中查看端口。
本地主機(jī)：3000

Explanation:

說明：

• You can clearly see that wherever the name the variable is declared in the ejs code, the value is printed out just like in normal JavaScript.

  您可以清楚地看到，無論在ejs代碼中聲明變量的名稱是什么 ，值的輸出都像在普通JavaScript中一樣。

• Take note of the tags I used in my ejs code.

  注意我在ejs代碼中使用的標(biāo)簽。

Have you ever tried figuring out the application of template engine?

您是否嘗試過弄清模板引擎的應(yīng)用？

Thanks for coding with me! Feel free to drop a comment or question.

感謝您與我編碼！ 隨意發(fā)表評論或問題。

翻譯自: https://www.includehelp.com/node-js/ejs-variables-injecting-values.aspx

ejs獲取js變量值

總結(jié)

以上是生活随笔為你收集整理的ejs获取js变量值_EJS变量（注入值）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。