EJS模板引擎-CSDN博客

本文链接：https://blog.csdn.net/qq_61649188/article/details/141605644

EJS的基本认识与理解

EJS是一个简单而强大的模板引擎，适用于需要在HTML中嵌入动态内容的场景

模板引擎是用于分离用户界面和业务数据的一种技术

也可以理解为是分离HTML和服务器端JS的一种技术

官网：https://ejs.co/

中文官网：https://ejs.bootcss.com/

EJS的安装与使用

安装：

npm install ejs

使用：

// 引入模块
const ejs = require("ejs")

// 字符串
let time = "2024-08-27"
// 使用原生js方法拼接
// let str = `今天是 ${time}`
let weather = "今天天气不错"

// console.log(str)

// 使用ejs渲染
let result = ejs.render(`今天是 <%= time %>`,{time:time})
console.log(result)

需要先引入模块ejs，这里的<%= %>是ejs的基本语法中的一种，

<%= %>：输出变量的值，会对HTML进行转义。
<%- %>：输出变量的值，不会对HTML进行转义。
<% %>：执行JavaScript代码，但不输出结果。
<%# %>：注释，不会被渲染。
<%% 和 %%>：输出字面量 <% 和 %>。

其他的基本语法，可以参考官网使用

可能在这大家会觉得该方法不如原生方法来的简便，最后的实现结果都是一样的，但是这里用ejs渲染后做到了将HTML和JS的分离，这样就可以实现后面的操作

EJS初体验

首先，我创建一个html文件，我将今天是 <%= time %>放入到该HTML文件中，通过fs读取html文件

// 引入模块
const ejs = require("ejs")
const fs = require("fs")

// 字符串
let time = "2024-08-27"
// let str = `今天是 ${time}`
let weather = "今天天气不错"

// console.log(str)

// 读取html模板
let html = fs.readFileSync("./01_html.html").toString()

// 使用ejs渲染
let result = ejs.render(html,{time:time,weather:weather})
console.log(result)

那么结果是可以实现同样的效果

那么接下来我们还可以实现什么样的操作呢，没错，我们可以将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>今天是 <%= time %></h2>
    <p><%= weather %></p>
</body>
</html>

那么接下来的结果就是

EJS列表渲染

现在有一个列表，给出需求需要将列表外面用一个ul包裹，列表中的每个元素用一个li包裹

首先我们用原生js来实现一下

const ejs = require('ejs');

// 西游记
const xiyou = ["唐僧","孙悟空","猪八戒","沙僧"]

//原生JS
let str = "<ul>"

// 循环遍历西游记列表
xiyou.forEach(item => {
    str += `<li>${item}</li>`
})

// 闭合ul标签
str += "</ul>"

console.log(str)

接下来我们用ejs渲染实现

const ejs = require('ejs');

// 西游记
const xiyou = ["唐僧","孙悟空","猪八戒","沙僧"]

// 使用EJS模板引擎渲染
// const fs = require("fs")
let result = ejs.render(`<ul>
    <% xiyou.forEach(item => { %>
        <li><%= item %></li>
    <% }) %>
</ul>`, { xiyou: xiyou })

console.log(result)

同样我们在用一个html文件分离出去，注意文件读取的时候记得加toString，不然会解析成buffer

const ejs = require('ejs');

// 西游记
const xiyou = ["唐僧","孙悟空","猪八戒","沙僧"]

// //原生JS
// let str = "<ul>"

// // 循环遍历西游记列表
// xiyou.forEach(item => {
//     str += `<li>${item}</li>`
// })

// // 闭合ul标签
// str += "</ul>"

// console.log(str)

// 使用EJS模板引擎渲染
const fs = require("fs")
let html = fs.readFileSync("./02_列表渲染.html").toString()
let result = ejs.render(html, { xiyou: xiyou })

console.log(result)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS列表渲染</title>
</head>
<body>
    <h1>EJS列表渲染</h1>
    <ul>
        <% xiyou.forEach(item => { %>
            <li><%= item %></li>
        <% }) %>
    </ul>
</body>
</html>

EJS条件渲染

需求

* 通过 isLogin 决定最终的输出内容

* true 输出『<span>欢迎回来</span>』

* false 输出『<button>登录</button> <button>注册</button>』

使用原生JS实现

// 定义变量
let isLogin = true;

// 原生JS实现
if (isLogin) {
    console.log('<span>欢迎回来</span>');
} else {
    console.log('<button>登录</button>  <button>注册</button>');
}

使用EJS渲染实现

// 导入 ejs
const ejs = require('ejs');
const fs = require('fs');

// 定义变量
let isLogin = false;


// EJS实现
let result = ejs.render(`<% if (isLogin) { %>
    <span>欢迎回来</span>
    <% } else { %>
    <button>登录</button>  <button>注册</button>
    <% } %>`, {isLogin: isLogin})

console.log(result);

创建html文件，将该代码分离

/**
 * 通过 isLogin 决定最终的输出内容
 * true   输出『<span>欢迎回来</span>』
 * false  输出『<button>登录</button>  <button>注册</button>』
 */

// 导入 ejs
const ejs = require('ejs');
const fs = require('fs');

// 定义变量
let isLogin = true;

// 原生JS实现
// if (isLogin) {
//     console.log('<span>欢迎回来</span>');
// } else {
//     console.log('<button>登录</button>  <button>注册</button>');
// }

// EJS实现
let html = fs.readFileSync("./03_条件渲染.html").toString();
let result = ejs.render(html, {isLogin: isLogin})

console.log(result);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS条件渲染</title>
</head>
<body>
    <header>
        <% if (isLogin) { %>
            <span>欢迎回来</span>
            <% } else { %>
            <button>登录</button>  <button>注册</button>
            <% } %>
    </header>
</body>
</html>

express中使用EJS

//导入 express
const express = require("express");

//导入 path
const path = require("path");

// 创建应用对象
const app = express();

//1. 设置模板引擎
app.set("view engine" , "ejs");//ejs是express的模板引擎的一种 pug twing 等也是

//2. 设置模板文件的存放地址 模板文件：具有模板语法内容的文件
//通过path转换成绝对路径
app.set("views", path.resolve(__dirname, "./views"));

//创建路由
app.get("/home",(req,res) => {
    //3. render 响应
    // res.render("模板的文件名"，"数据");
    //声明变量
    let title = "express使用ejs模板引擎";
    res.render("home",{title})
    //4. 创建模板文件
});

//监听端口，启动服务
app.listen(3000,() => {
    console.log("服务器启动成功，端口号为3000")
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HOME</title>
</head>
<body>
    <h1><%= title %></h1>
</body>
</html>

服务器启动成功后，浏览器打开网址127.0.0.1:3000/home