Nodejs 请问怎么在html中使用ejs模板

Nodejs 请问怎么在html中使用ejs模板

已经尝试了这种写法： app.set(‘view engine’, ‘ejs’); app.engine(‘html’, require(‘ejs’).renderFile);

和

app.engine(’.html’, ejs.__express); app.set(‘view engine’, ‘html’);

7 回复

当然可以！以下是如何在 Node.js 中使用 EJS 模板引擎的详细步骤和示例代码。EJS 是一种简单易用的模板引擎，它允许你在 HTML 文件中嵌入 JavaScript 代码。

步骤 1: 安装必要的依赖

首先，你需要安装 express 和 ejs 这两个库。如果你还没有安装这些库，可以通过 npm 来安装：

npm install express ejs

步骤 2: 设置 Express 应用并配置 EJS 视图引擎

接下来，你需要设置一个基本的 Express 应用来配置 EJS 作为视图引擎。以下是示例代码：

const express = require('express');
const app = express();

// 设置 EJS 作为视图引擎
app.set('view engine', 'ejs');

// 设置视图文件存放的目录（默认为 views 目录）
app.set('views', './views');

// 示例路由
app.get('/', (req, res) => {
    // 渲染 index.ejs 并传递数据给模板
    res.render('index', { title: '主页', message: '欢迎来到首页' });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

步骤 3: 创建 EJS 模板文件

在 views 目录下创建一个 index.ejs 文件，用于渲染页面内容。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

解释

  1. 设置视图引擎:

    • app.set('view engine', 'ejs'): 设置应用的默认视图引擎为 EJS。
    • app.set('views', './views'): 设置存放视图文件的目录，默认为 views。

  2. 渲染模板:

    • res.render('index', { title: '主页', message: '欢迎来到首页' }): 渲染 index.ejs 文件，并将数据传递给模板。

  3. EJS 模板语法:

    • <%= title %> 和 <%= message %> 是 EJS 的插值语法，用于在模板中显示变量的值。

总结

以上就是如何在 Node.js 中使用 EJS 模板引擎的基本步骤。通过设置视图引擎、创建 EJS 模板文件以及在路由中渲染模板，你可以轻松地在 HTML 中嵌入动态内容。希望这对你有所帮助！


app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);

试试这个。

我需要在html中在引入ejs么

推荐你使用hogan

有用express吗？ express -e ejs PROJECTNAME 试试这个

EJS 有专门用于网页的压缩版ejs.min.js：

https://raw.githubusercontent.com/tj/ejs/master/ejs.min.js

拿<script>标签引入，然后ejs.render(str, obj)就行了。

要在HTML中使用EJS模板，你需要先确保已经安装了express和ejs。你可以通过以下命令安装它们：

npm install express ejs

然后，在你的Express应用中配置EJS作为视图引擎，并设置文件扩展名为.html或默认的.ejs。以下是如何配置的示例代码：

const express = require('express');
const app = express();

// 设置EJS为视图引擎，默认使用.ejs扩展名
app.set('view engine', 'ejs');

// 如果你想使用.html扩展名
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);

// 或者这样配置
app.engine('.html', require('ejs').__express);

// 示例路由
app.get('/', (req, res) => {
    res.render('index', { title: 'Hello World' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 安装依赖：首先，确保你已安装了express和ejs。
  2. 设置视图引擎：通过app.set('view engine', 'ejs')设置EJS为默认的视图引擎。
  3. 自定义扩展名：如果你想使用.html作为模板文件的扩展名，可以使用app.engine('.html', require('ejs').__express)或app.engine('.html', require('ejs').renderFile)来指定。
  4. 渲染视图：在路由处理函数中使用res.render('index', { title: 'Hello World' })来渲染模板。这里的index是模板文件的名称（不包含扩展名）。

示例模板文件 views/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

在这个例子中，<%= title %>会被替换为传入的变量值Hello World。

通过这种方式，你可以轻松地在HTML文件中使用EJS模板语法。

回到顶部