Node.js学习(8)ejs模板引擎

概念

EJS是一个高效的JavaScript模板引擎。
模板引擎是为了使用户界面与业务数据(内容)分离而产生的。
简单来说,使用EJS模板引擎就能动态渲染数据。

EJS的使用

  • 1)下载安装
yarn add ejs
  • 2)配置模板引擎
app.set("view engine" , "ejs");
  • 3)配置模板的存放目录
app.set("views","./views")
  • 4)在views目录下创建模板文件
xxx.ejs
  • 5)使用模板,通过response来渲染模板
response.render('模板名称', 数据对象)

DEMO

在项目目录下新建views文件夹,然后在views文件夹中新建index.ejs模板文件,目录结构如下图:

server.js代码如下:

let express = require('express')

let app = express()

// 配置渲染引擎
app.set('view engine', 'ejs')
//配置模板文件夹
app.set('views', './views')

app.get('/', (request, response) => {
    const title = '<h1>标题1</h1>'
    const person = [{name: '周杰伦', age: 30}, {name: '蔡依林', age: 20}]
    response.render('index', {title,person})
})

app.listen(3000, (err) => {
    if (!err) {
        console.log('express 服务器启动成功')
    } else {
        console.log(err)
    }
})

index.ejs代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<%- title %>
<%= title %>
<ul>
    <% for (let i = 0; i < person.length; i++) { %>
    <li><%- person[i].name %></li>
    <li><%- person[i].age %></li>
    <% } %>
</ul>
</body>
</html>

运行后,效果如下:

发表评论

邮箱地址不会被公开。 必填项已用*标注