Express - 使用模版渲染

Express可以使用jade, ejs作为模版引擎进行模版渲染，默认是jade，使用ejs作为模版引擎需要进行设置

1. 使用ejs模版

  • 安装ejs模块
    npm install ejs --save
  • 设置ejs模版
// 设置模版文件目录
app.set('views', './templates');
// 设置模版引擎
app.set('view engine', 'ejs');
  • 使用ejs模版
const express = require('express');
const app = express();

// 设置模版文件目录
app.set('views', './templates');
// 设置模版引擎
app.set('view engine', 'ejs');

// 在templates/site/index.ejs中渲染title变量 
app.get('/', (req, resp) => {
  resp.render('site/index', {
    title: 'home'
  });
});

app.listen(8080, () => {
    console.log('listen on 8080');
});

// index.ejs模版
<!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 %></title>
</head>
<body>
</body>
</html>

2. ejs模版语法

  • 转义输出变量
    <%= title %>
  • 不转义输出
    <%- titel %>
  • 执行js代码
    <% code %>
  • 导入其他模版
    <% include template/path %>
  • 条件判断
<% if(condition) { %>
// HTML 
<% } %>
  • 循环
<% list.forEach((item) => { %>
  <%= item %>
<% }) %>

//index.js
const express = require('express');
const app = express();

app.set('views', './templates');
app.set('view engine', 'ejs');

app.get('/', (req, resp) => {
  const users = [
    {id: 1, name: 'mike'},
    {id: 2, name: 'jack'}
  ];
  resp.render('site/index', {
      users: users,
      show: !!req.query.show
    });

});

app.listen(8080, () => {
  console.log('listen on 8080');
});

<!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>user list</title>
</head>
<body>
<% if (show) %>
<ul>
  <% users.forEach((user) => { %>
  <li><%= user.id %> - <%= user.name %></li>
  <% }) %>
</ul>
<% } %>
</body>
</html>
posted @ 2022-02-21 16:01  箫笛  阅读(180)  评论(0)    收藏  举报