ejs获取js变量值_EJS变量（注入值）

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可以读取服务器上变量的赋值并将其呈现在模板中。

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

做记录！ 在开始使用EJS之前，您应该已经安装了Node.js。

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

要下载Node JS，请访问nodejs.org ，然后安装。

* BASIC NODE.JS/EXPRESS KNOWLEDGE REQUIRED

*需要基本NODE.JS /表达知识

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 ejs
        or
    npm 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.

  与往常一样，我们将创建2个文件，其中一个用于我们的快速服务器文件，另一个用于我们的EJS文件。

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

  如果在HTML内有语句和循环，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标签。 这些标签可能很奇怪，但是当您理解时，它非常容易。

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

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

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

   <％％> ：用于包含一些我们要使用的编程方法。 如If / else和循环。

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 route
    res.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应用程序不同，我们使用res.render然后使用EJS文件，而不使用res.send 。 另外，我不需要EJS应用。 这里没有问题！。 如果您愿意，可以这样做。

Now, let's create our ejs file.

现在，让我们创建我们的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目录中创建一个名为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.

  请注意：文件夹名称视图不是我选择的随机词，而是默认情况下Express检查模板引擎的保留文件夹名称。

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

  在我们的快递服务器中，我们使用app.set()并将其传递到模板引擎中，这与其他示例不同。

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

最后，在终端中使用节点app.js初始化app.js文件，并在浏览器中查看端口。
本地主机：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代码中使用的标签。

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

您是否尝试过弄清模板引擎的应用？

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

感谢您与我编码！ 随意发表评论或问题。

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

ejs获取js变量值