Express 响应动态页面 EJS 模板引擎EJS 是什么 “E” 代表什么？可以表示 “可嵌入（Embedded）”

EJS 是什么

“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。EJS--嵌入式 JavaScript模板

1. 安装EJS模板

npm install ejs

2. 在Express中使用EJS模板

项目根目录创建 views 文件夹, 并创建 user.ejs 模板；
注：views文件夹是默认模板目录。

mkdir views
cd views
touch user.ejs

使用EJS模板

编写ser.ejs 模板代码

<%=id%> 是 EJS 模板语法，ID是传入的值

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>欢迎欢迎，热烈欢迎, <%=id%></h1>
</body>
</html>

使用 res.render 渲染模板

render('user.ejs', {id: 1}) 参数: 模板名称，数据库取到的值

import express from 'express';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.render('user.ejs', {id: 1});
});

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

设置模板所在目录

项目的 app.js 配置在 src 目录下，使用指定目录需要在 src 目录下创建 template 文件夹并添加模板文件

import express from 'express';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const app = express();
const port = 3000;

// 设置模板指定目录
app.set('views', join(__dirname, '/template'));

app.get('/', (req, res) => {
  res.render('user.ejs', {id: 1});
});

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

设置模板后缀名，并指定后缀名的文件使用 EJS 引擎

使用 HTML 作为模板文件, 把 user.ejs 文件后缀名修改成.html，示例：user.html

import express from 'express';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const app = express();
const port = 3000;

// 设置模板指定目录
app.set('views', join(__dirname, '/template'));
// 设置模板后缀名
app.set('view engine', 'html');
// 指定后缀名的文件使用EJS引擎
app.engine('html', ejs.__express);

app.get('/', (req, res) => {
  res.render('user.ejs', {id: 1});
});

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

3. EJS常用语法

引入公共文件： <%- include('includes/header.html') %>
转义后输出的内容： <h1>欢迎欢迎，热烈欢迎, <%= name %></h1>
不转译，纯html原样输出： <%- content %>
JS模式： <% list.forEach((item, index) => { %>循环内容 item<%})>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= title %></title>
</head>
<body>
    <!-- 引入公共文件 -->
    <%- include('includes/header.html') %>
    <!-- 转以后输出的内容 -->
    <h1>欢迎欢迎，热烈欢迎, <%= name %></h1>
    <!-- 不转译，纯html原样输出 -->
    <%- content %>
    <!-- JS模式 -->
    <ul>
        <% list.forEach((item, index) => { %>
            <% if (index === 0) { %>
                <li class="active"><%= item.name %></li>
            <% } else { %>
                <li>-</li>
            <% } %>
        <% }) %>
    </ul>
</body>
</html>