EJS的简单使用

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>

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值