【Express】服务端渲染(模板引擎 EJS)

EJS(Embedded JavaScript)是一款流行的模板引擎,可以用于在Express中创建动态的HTML页面。它允许在HTML模板中嵌入JavaScript代码,并且能够生成基于数据的动态内容。

下面是一个详细的讲解和示例,演示如何在Express中使用EJS模板引擎:

  1. 安装EJS:首先,在你的项目中安装EJS模板引擎。可以使用NPM来完成安装:
bash 复制代码
npm install ejs
  1. 配置EJS:在Express应用中,你需要设置EJS作为模板引擎。在app.js(或其他入口文件)中添加以下代码:
javascript 复制代码
const express = require('express');
const app = express();
app.set('views', './views');  // views, 放模板文件的目录
app.set('view engine', 'ejs');
  1. 创建EJS视图文件:在项目目录下创建一个名为views的文件夹(如果没有的话),然后在该文件夹中创建一个EJS视图文件,比如index.ejs

  2. 使用EJS模板:在路由处理程序中,使用res.render()方法来渲染EJS视图文件,并传递数据给模板。以下是一个例子:

javascript 复制代码
app.get('/', (req, res) => {
  const data = {
    name: 'John',
    age: 25,
    hobbies: ['reading', 'running', 'cooking']
  };
  res.render('index', { data });
});

在上面的示例中,当用户访问根URL时,将渲染名为index.ejs的视图文件,并提供名为data的数据对象。

  1. 在EJS模板中使用数据:在index.ejs视图文件中,可以通过以下方式使用传递的数据:
html 复制代码
<h1>Welcome, <%= data.name %>!</h1>
<p>Age: <%= data.age %></p>
<p>Hobbies:</p>
<ul>
  <% data.hobbies.forEach((hobby) => { %>
    <li><%= hobby %></li>
  <% }) %>
</ul>

在EJS模板中,用<%= %>插入JavaScript表达式来显示数据。使用<% %>标记包裹一段JavaScript代码,可以进行循环、条件判断和其他逻辑操作。

  1. 渲染完整的HTML页面:在index.ejs文件中,可以使用partials(局部视图)和其他EJS功能来构建完整的HTML页面。

如果不想再创建 ejs 文件,也可以直接渲染 html 文件,但需要配置模板引擎:

js 复制代码
// 配置模板引擎
app.set('views', './views')
app.set('view engine', 'html')
app.engine('html', require('ejs').renderFile)

EJS还支持其他功能,比如模板继承、自定义过滤器等。

相关推荐
水冗水孚14 天前
express使用node-schedule实现定时任务,比如定时清理文件夹中的文件写入日志功能
javascript·node.js·express
羽沢3114 天前
nodejs中Express框架的基本使用
express
gongzemin16 天前
前端根据文件流渲染 PDF 和 DOCX 文件
前端·vue.js·express
十月ooOO17 天前
Express.js 在 ts 模式下运行 npm run dev 的时候无法找到引入项的原因
javascript·npm·express
风清云淡_A17 天前
【mongoose8.x】mongoose8.x入门教程(二):express中mongoose的链接
express
水冗水孚20 天前
面试官:你是前端你了解oss吗?我反手写了一个react+express+minio实现oss文件存储功能
react.js·node.js·express
snpgroupcn21 天前
泰国零售巨头 CJ Express 借助 SAP 内存数据库实现高效数据管理
数据库·express·零售
水冗水孚22 天前
使用nodejs的express框架实现大文件上传的功能,附完整前后端github代码
javascript·node.js·express
程序猿小D23 天前
第29节 Node.js Query Strings
node.js·vim·express
程序猿小D24 天前
第24节 Node.js 连接 MongoDB
数据库·mongodb·npm·node.js·编辑器·vim·express