Express中使用模板引擎

Posted on   |   In   |     |   Views

在 Express 中使用 ejs 模板引擎

安装：

1
$ npm install --save ejs

配置 Express 使用 ejs 模板

  • app.set('views', config.viewPath);
    • 配置模板文件存放的路径
  • app.set('view engine', 'ejs');
    • 配置调用 res.render 的时候使用的模板引擎
    • 找到 view 目录下的 .ejs 后缀的文件
1
2
app.set('views', '视图模板文件存放路径')
app.set('view engine', '安装的模板引擎的名称，例如：ejs')

如果使用上面的配置，则视图的后缀名必须为 .ejs，如果想要修改视图的后缀名，可以使用下面的配置形式

1
2
app.engine('.html', require('ejs').__express)
app.set('view engine', 'html')

使用：

只要执行了上面两句代码：就可以直接在后面的请求处理函数中使用 res.render(视图名称，要注入的数据对象)，然后express会自动帮你去读取文件然后注入数据，解析替换，最后得到一个完整的 html 页面，然后发送给客户端。

如 views/index.html 文件代码如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Hello <%= name %></h1>
</body>
</html>

app.js 文件代码如下：

1
2
3
4
5
app.get('/', (req, res) => {
  res.render('index', {
    name: 'World'
  })
})

浏览器中看到的最终渲染结果如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

在 Express 中使用 xTemplate 模板引擎

安装

1
$ npm install xtpl xtemplate --save

配置模板引擎

1、渲染的页面必须是 .xtpl 后缀的

1
2
3
4
5
6
// 引入路径配置文件
const config = require('./config');
// 指定模板放在什么地方了
app.set('views', config.viewPath);
// 指定使用哪个模板引擎
app.set('view engine', 'xtpl');

2、渲染页面任然是 .hmtl 后缀的

1
2
3
4
const config = require('./config');
app.set('views', config.viewPath);
app.engine('.html', require('xtpl').__express);
app.set('view engine', 'html');

Node 走通页面流程

1、安装包：

1
2
$ npm install --save express
$ npm install xtpl xtemplate --save

2、views 文件下添加要渲染的 layout/base.html 页面视图文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>后台管理系统</title>
</head>
<body>
  <!-- 侧边栏 -->
  <div class="aside">
    <!-- ... -->
  </div>
  <!-- 主体 -->
  <div class="main">
    <div class="container-fluid">
      <!-- 头部 -->
      <div class="header">
        <!-- ... -->
      </div>
      <!-- 个人资料 -->
      {{{block('content')}}}  
    </div>
  </div>
</body>
</html>

3、中间需要替换的内容

1
2
3
4
5
6
7
{{extend('../layout/base')}}
{{#block('content')}}
<!-- 个人资料 -->
<div class="body teacher-profile">
  <!-- ... -->
</div>
{{/block}}

4、入口程序：app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//  引入包
const express = require('express');
// 加载子路由
const index = require('./controllers/index');
// 配置模板引擎
app.set('views', config.viewPath);
app.engine('.html', require('xtpl').__express);
app.set('view engine', 'html');
// 暴漏静态资源
app.use('/',express.static('public'));
// 监听端口
app.listen(5000, () => {
  console.log(`Server is running at port ${config.port}`);
});

5、设置子路由，contorllers/index.js 

1
2
3
4
5
6
7
8
9
10
// 首页当做一个子路由
const express = require('express');
// express 有个方法叫 Router() 方法，创建子路由
const router = express.Router();
// 当成一个模块加载，对外暴漏接口，子路由暴漏出去了
module.exports = router;
// 设置子路由
router.get('/', function (req, res) {
  res.render('dashboard/index', {});
});
感谢您的支持！