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模版



  
  
  
  

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');
});

  
  
  
  


<% if (show) %>

  <% users.forEach((user) => { %>
  
<%= user.id %> - <%= user.name %>
  <% }) %>

<% } %>