ejs模板引擎

尽管前后端分离是趋势,但后端模板引擎在一些十分简单的场景下还是广泛使用的,这篇笔记我们介绍下如何在Express中整合模板引擎,这里我们使用的是ejs模板引擎。

注意:Express官网给出的模板引擎是pug,但是它过于难用(主要是不符合常人的思维习惯,而非设计的垃圾),因此这里我们主要介绍的是ejs

安装ejs

我们可以执行以下命令用npm安装ejs模版引擎。

npm install --save ejs

渲染数据

Express使用模板引擎十分简单,处理函数中我们直接使用res.render()向模板中绑定数据。

const express = require('express');
const path = require('path');

const router = express.Router();

const app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

router.get('/', (req, res, next) => {
  let user = {
    username: 'Tom',
    password: '123456'
  };
  res.render('user', { user });
});

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

注意代码中,我们使用app.set()设置了两个属性,其中views设置了模板文件的存放路径,view engine设置了模板引擎的类型,如果这里没有设置或设置错误,Express是无法找到模板文件的。

下面是ejs模板的例子。

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>用户名</td>
            <td><%= user.username %></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><%= user.password %></td>
        </tr>
    </table>
</body>
</html>

由于程序员的本质就是造轮子,我们已经被迫学过不下十个模板引擎了,无非就是绑定数据,编写各种分支循环的渲染逻辑,这里关于ejs就不多做介绍了。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap