ejs的使用

news2024/12/21 21:59:49

EJS

模板引擎

是分离用户界面(HTML)和业务数据(JS)的一种技术。这里的JS特指服务端的JavaScript。

EJS语法

<%= ... %> 用于输出转义后的 HTML 内容。
<%- ... %> 用于输出未经转义的内容。
<% ... %> 用于执行任意 JavaScript 代码，但不输出任何东西。
<%_ ... _%> 用于移除所有空格和换行符。

示例

代码结构

myapp/
├── node_modules/          # 安装的 npm 模块
├── public/                # 静态资源文件夹 (CSS, JavaScript, images)
│   └── css/
│       └── style.css
├── app.js                 # 主应用程序文件
└── package.json           # 项目配置文件
安装依赖

代码示例

未使用模板引擎时，代码的耦合性。

// app.js
const ejs = require('ejs');

// 字符串 展示耦合性
let name = '张三';

let str = `我的名字是${name}`;

console.log(str);

使用ejs

const ejs = require('ejs');

// 字符串
let name = '张三';

// let str = `我的名字是${name}`;

// console.log(str);
// 解耦
const result = ejs.render('我的名字是<%= name %>', { name }); // <%= ... %> 用于输出转义后的 HTML 内容。

console.log(result);

继续分离

代码结构

myapp/
├── node_modules/          # 安装的 npm 模块
├── public/                # 静态资源文件夹 (CSS, JavaScript, images)
│   └── css/
│       └── style.css
├── app.js                 # 主应用程序文件
├── views/                # 静态资源文件夹 (CSS, JavaScript, images)
│   └── index.html
└── package.json           # 项目配置文件
安装依赖

代码示例

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>我的名字是<%= name %></h2>
</body>
</html>

实现解耦

// index.js
const ejs = require('ejs');
const fs = require('fs');
// 字符串 展示耦合性
let name = '张三';

// let str = `我的名字是${name}`;

// console.log(str);

const html = fs.readFileSync('./index.html').toString();

const result = ejs.render(html, { name });

console.log(result); // 完整打印html

列表循环代码示例

未使用ejs

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

// 设置静态文件目录
app.use(express.static('public'));

// 用户数据
const users = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
];

// 路由处理器
app.get('/', (req, res) => {
    // 构建 HTML 内容
    let html = `
        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title>用户列表</title>
            <link rel="stylesheet" href="/css/style.css">
        </head>
        <body>
            <h1>用户列表</h1>
            <ul>
    `;

    // 循环添加每个用户的 HTML
    for (let user of users) {
        html += `<li>${user.name}</li>`;
    }

    // 结束 HTML
    html += `
            </ul>
        </body>
        </html>
    `;

    // 发送响应
    res.send(html);
});

// 启动服务器
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

通过ejs解耦实现

// index.js
// 用户数据
const users = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
];

const html = fs.readFileSync('./index.html').toString();

const result = ejs.render(html,{users});

<% ... %>是可以解析JS

// index.html
    <h1>用户列表</h1>
    <ul>
        <% users.forEach(function(user) { %>
            <li><%= user.name %></li>
        <% }); %>
    </ul>

条件判断代码示例

// index,js

const ejs = require('ejs');
const fs = require('fs');

let isLogin = true;

// EJS实现
let html = fs.readFileSync('./index.html').toString();

let result = ejs.render(html, { isLogin });

console.log(result);

// index.html

<% if(isLogin){ %>
<span>欢迎</span>
<% }else { %>
<button>登录</button>
<% } %>

在express中如何实现ejs

myapp/
├── node_modules/          # 安装的 npm 模块
├── public/                # 静态资源文件夹 (CSS, JavaScript, images)
│   └── css/
│       └── style.css
├── app.js                 # 主应用程序文件
├── views/                # 静态资源文件夹 (CSS, JavaScript, images)
│   └── index.ejs
└── package.json           # 项目配置文件

// app.js
const express = require('express');

const app = express();

const path = require('path');

// 1.设置模板引擎
app.set('view engine', 'ejs'); // pug twing ...

// 2.设置模板文件存放位置
//  2.1 views是文件目录
app.set('views', path.resolve(__dirname, './views'));

app.get('/home', (req, res) => {
    //3.render响应
    // 变量
    let title = 'express中如何使用ejs';
    res.render('index', { title });

});

app.listen(3000, () => {
    console.log('服务已经启动....');
})

// index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>hi ejs</p>
    <p><%= title %></p>
</body>
</html>