【Express】服务端渲染（模板引擎 EJS）

在这里插入图片描述

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

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

安装EJS：首先，在你的项目中安装EJS模板引擎。可以使用NPM来完成安装：

npm install ejs
1

配置EJS：在Express应用中，你需要设置EJS作为模板引擎。在app.js（或其他入口文件）中添加以下代码：

const express = require('express');
const path = require('path');
const app = express();
// 1. 设置模板引擎
app.set('view engine', 'ejs');
// 2. 设置模板文件存放的位置
app.set('views', path.resolve(__dirname, './views'));  
1
2
3
4
5
6
7

创建EJS视图文件：在项目目录下创建一个名为views的文件夹（如果没有的话），然后在该文件夹中创建一个EJS视图文件，比如index.ejs。
使用EJS模板：在路由处理程序中，使用res.render()方法来渲染EJS视图文件，并传递数据给模板。以下是一个例子：

app.get('/home', (req, res) => {
  // 3. render 响应
  let name = 'xx'
  res.render('home', { name: name })
})
app.listen(3000, () => {
  console.log('服务器启动成功')
})
1
2
3
4
5
6
7
8

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

在EJS模板中使用数据：在home.ejs视图文件中，可以通过以下方式使用传递的数据：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<body>
  <h2>
    <%= name %>
  h2>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

在这里插入图片描述

渲染完整的HTML页面：在index.ejs文件中，可以使用partials（局部视图）和其他EJS功能来构建完整的HTML页面。

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

// 配置模板引擎
app.set('views', './views')
app.set('view engine', 'html')
app.engine('html', require('ejs').renderFile)
1
2
3
4

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

相关阅读:
python超详细基础教程：元组和集合
Spring Boot虚拟线程与Webflux在JWT验证和MySQL查询上的性能比较
0000-0002 UVa227 Puzzles UVa232 Crossword Answers UVA1368 DNA Consensus String
LiDAR点云转换到大地坐标系——简单粗标定
123.Impala查询缓慢问题与解决
软件评测师之CPU的构成
HTML5期末大作业：基于HTML+CSS+JavaScript仿蘑菇街购物商城设计毕业论文源码
第五天：前端页面展示不出来
java毕业设计郑财校园新闻管理系统Mybatis+系统+数据库+调试部署
Python爬取58二手房标题和价格

原文地址：https://blog.csdn.net/XiugongHao/article/details/133820510