xb18
xb18
文章78
标签0
分类0
ejs

ejs

EJS

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

语法

输出

1
2
3
4
5
6
<% // 执行JavaScript代码 %>
<%= // 输出变量的值 %>
<%- // 输出原始HTML代码 %>
<%# // 注释 %>
<%_ // 删除前导空格 %>
<% __line // 添加行号注释 %>

逻辑控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1><%= title %></h1> // 输出变量title的值

<% if (isAdmin) { %> // 条件判断
<p>Welcome, admin!</p>
<% } else { %>
<p>Welcome, guest!</p>
<% } %>

<ul>
<% for (let i = 0; i < items.length; i++) { %> // 循环
<li><%= items[i] %></li>
<% } %>
</ul>

express

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const express=require("express");
const ejs=require("ejs");
const fs=require("fs");

var app=express();

//引用ejs
app.set('views',"public"); //设置视图的对应目录
app.set("view engine","ejs"); //设置默认的模板引擎
app.engine('ejs', ejs.__express); //定义模板引擎

app.get("/",function(req,res){
res.render("index.ejs",{title: "<h4>express</h4>"});
});

app.listen(8080);

index.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<% for(var i=0;i<10;i++){ %>
<%= i %>
<% } %>
<!-- 获取变量 -->
<div class="datas">
<p>获取变量:</p>
<%- title %>
<%= title %>
</div>
</body>
</html>

本文作者:xb18
本文链接:https://moelj.com/2024/07/11/ejs/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可