编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

NodeJS，Express，高效嵌入式JS模板引擎，EJS模板引擎，案例代码

wxchong 2024-10-22 17:54:24 开源技术 8 ℃ 0 评论

模板引擎EJS

模板引擎（Tempalte Engine），将页面模板和要显示的数据结合起来生成HTML页面的工具。

EJS

JavaScript模版库，用来将EJS模版结合着JSON数据转换为HTML，并且可以直接在模版中写JavaScript的语法。EJS用于server端（node.js）直接渲染，返回给前端渲染好的页面，当请求某个链接时，直接将渲染完成的页面呈现给用户。EJS可以游离于Express独立使用。

地址：https://ejs.bootcss.com/

EJS标签含义

1、<% '脚本' 标签，用于流程控制，无输出。

2、<%_ 删除其前面的空格符

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

4、<%- 输出非转义的数据到模板

5、<%# 注释标签，不执行、不输出内容

6、<%% 输出字符串 '<%'

7、%> 一般结束标签

8、-%> 删除紧随其后的换行符

9、_%> 将结束标签后面的空格符删除

JS调用的方法主要有两个：

ejs.compile(str, options);
// => Function
 
ejs.render(str, options);
// => str

代码案例1

命令

npm install express --save
npm install ejs --save

app.js

const express = require("express");
// 创建express的application对象
const app = new express();
const path = require("path");

// ejs模板引擎
const ejs = require("ejs");
//express使用 ejs模板引擎
app.set("view engine", "ejs");
//设置模板文件的目录
// app.set("views", "views");
app.set("views", __dirname + "/views");

app.get("/", (req, res) => {
  //获取模板的路径
  const filePath = path.resolve(__dirname, "views/index.ejs");
  const data = "你好，EJS模板~";
  res.render(filePath, {
    data: data,
    name: "秦始皇",
    user: [{
      name: "李斯",
      age: 112,
      sex: "男"
    }, {
      name: "王贲",
      age: 111,
      sex: "男"
    }, {
      name: "章邯",
      age: 113,
      sex: "男"
    }, {
      name: "子婴",
      age: 115,
      sex: "女"
    }]
  });
});

// 监听端口号和服务器状态
let port = 3000;
app.listen(port, err => {
  if (err) {
    console.log(err);
    return;
  }
  console.log("服务器启动，请访问" + ` http://127.0.0.1:${port}`);
})

文件：views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS模块</title>
</head>
<body>
    <h2>
        <%= data %>
    </h2>
    <h2>
        <%- name %>
    </h2>
    <h2>
        <% user.forEach((item)=>{ %>
        姓名: <%- item.name %> ---
        性别: <%- item.sex %> ---
        年龄: <%- item.age %>
        <br>
        <% }) %>
    </h2>
</body>
</html>

代码案例2，后缀为HTML

app.js

const express=require("express");
const app=express();
const path = require("path");

// ejs模板引擎
const ejs=require("ejs");

//修改ejs模板后缀为html 
app.engine(".html", ejs.__express);
// 或者
// app.engine('html', require('ejs').renderFile);

//views 文件为模板引擎的目录
app.set("view engine",'html');

//设置模板文件的目录
app.set("views", __dirname + "/views");

app.get("/", (req, res) => {
  //路径也要加上html后缀
 ejs.renderFile("views/index.html", { list: ['鬼谷子', '墨子', '屈原', '庄子'] }, (err, html) => {
     if (err){
      throw err;
     }
     res.send(html);
 });
});

// 监听端口号和服务器状态
let port = 3000;
app.listen(port, err => {
  if (err) {
    console.log(err);
    return;
  }
  console.log("服务器启动，请访问" + ` http://127.0.0.1:${port}`);
})

文件：views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
  <% for(var i=0;i<list.length;i++){ %>
    <h2><%=list[i]%></h2>
  <%}%>
  <hr />
  <%
    list.forEach((item,index)=>{
  %>
    <h2><%=index %>---------------<%=item %></h2>
  <%
    });
  %>
</body>
</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2