EJS的简单使用

最新推荐文章于 2024-05-11 09:34:25 发布

sleepwalker_1992

最新推荐文章于 2024-05-11 09:34:25 发布

阅读量3.8k

点赞数 1

分类专栏：模板引擎文章标签： ejs

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/83380725

版权

模板引擎专栏收录该内容

2 篇文章 0 订阅

订阅专栏

EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。

1、安装

npm install ejs

2、标签含义

简洁的模板标签：<% %>

<% '脚本' 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

3、输出数据到模板（输出的是转义 HTML 标签）

// 加载ejs模块
const ejs = require('ejs');

var html = '<h1><%= username %></h1>';

// ejs.render(str, data, options);
// => 输出绘制后的 HTML 字符串
var result = ejs.render(html, {username: 'liu'});
console.log(result);

4、ejs.renderFile()

app.js

// 加载ejs模块
const ejs = require('ejs');
const path = require('path');

// ejs.renderFile(filename, data, options, function(err, str){});
// 回调函数中的第二个参数 str 就是 读取到的HTML 字符串
ejs.renderFile(path.join(__dirname, 'index.html'), {username: 'liu'}, (err, str) => {
  // str => 输出绘制后的 HTML 字符串
  console.log(str);
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>模板引擎</title>
</head>
<body>

  <h1><%= username %></h1>
  <ul>
    <% for(var i=0; i<5; i++) { %>
      <li>高效的 JavaScript 模板引擎:ejs</li>
    <% } %>
  </ul>
  
</body>
</html>

sleepwalker_1992

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
EJS的简单使用

EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。1、安装npm install ejs2、标签含义简洁的模板标签：&lt;% %&gt;&lt;% '脚本' 标签，用于流程控制，无输出。 &lt;%_ 删除其前面的空格符 &lt;%= 输出数据到模板（输出是转义 HTML 标签） &lt;%- 输出非转义的数据到模板 &lt...
复制链接

扫一扫

专栏目录