如何使 .ejs 文件可以访问 .js 变量？

EJS是一种简单的模板语言，可让您使用纯 JavaScript 生成 HTML 标记。可以访问 .ejs 文件中的 JS 变量。

您只需要将 JS 对象作为 res.render() 方法的第二个参数传递。让我们深入。

项目结构：最终的文件夹结构如下图所示。

Project
|
|-> node_modules
|-> views
  |-> index.ejs
|-> package.json
|-> package-lock.json
|-> server.js

第 1 步：启动新的 Node JS 项目。打开命令提示符并创建一个新文件夹并使用空的 npm 项目启动它。

mkdir Project
cd Project
npm init -y

第 2 步：安装需要的依赖项。

需要依赖：

1. 快递JS
2. EJS

npm i express ejs

第 3 步：在 Project 目录中创建一个新的 server.js 文件。该文件包含一个 API 端点，负责呈现动态生成 HTML 标记的 EJS 文件。这里的 render 方法有两个参数。第一个参数是 EJS 文件，第二个参数是 .ejs 文件中自动析构的 JS 对象。

我们在这里通过。 {firstName: “Geeks,”, lastName: “A Computer Science Portal”}作为 JS 对象。

server.js

const express = require('express');
const path = require('path');    
const ejs = require('ejs');
   
const app = express();
const PORT = 3000;
   
// Set EJS as templating engine
app.set('view engine', 'ejs');
   
app.get('/', (req,res)=>{
    // render method takes two parameters
    // first parameter should be the .ejs file
    // second parameter should be an object
    // which is accessible in the .ejs file  
    // this .ejs file should be in views folder 
    // in the root directory.
    res.render('index.ejs', {firstName: "Geeks,", 
                             lastName: "A Computer Science Portal"});
})
   
// Start the server
app.listen(PORT, err =>{
    err ? 
    console.log("Error in server setup") :
    console.log("Server listening on Port", PORT)
});

第 4 步： EJS 的默认行为是查看“views”文件夹以获取要呈现的模板。因此，让我们在我们的主节点项目文件夹中创建一个“视图”文件夹，并创建一个名为“ index.ejs ”的文件，该文件将在我们的节点项目中满足某些所需的请求。这个页面的内容是：

索引.ejs

  

    
 GeeksforGeeks 
    
 
        Welcome 
        <%= firstName %> 
        <%= lastName %> 
    

这里传递的对象将是析构函数。因此，我们可以直接访问对象属性，而不需要使用点运算符。

第 5 步：在项目的根目录中打开命令提示符并使用启动服务器

node server.js

输出：如果一切顺利，您将看到“服务器正在侦听端口 3000”。然后在浏览器上打开http://localhost:3000/ ，您将在屏幕上看到以下输出。

输出：

在 .ejs 文件中使用 .js 数组：我们也可以使用 ejs 文件中的数组作为变量，在本例中将 JS 数组传递给 ejs 文件进行渲染。

服务器.js

const author = {
    name : 'Geeksforgeeks',
    skills: ['DSA', 'Interview Experience', 'Web Developement', 'Puzzels',]
}
  
app.get('/', (req,res)=>{
    // render method takes two parameters
    // first parameter should be the .ejs file
    // second parameter should be an object
    // which is accessible in the .ejs file  
    // this .ejs file should be in views folder 
    // in the root directory.
    res.render('index.ejs', {author: author} );
})

索引.ejs

  

    
 GeeksForGeeks 
    
 
        <%= author.name %> has skill on 
    
  
    

        <% author.skills.forEach((skill)=>{%>
              
<%=skill%>
 
        <%});%>
    
  

输出：