node 中使用模板引擎
2016-11-29 本文已影响0人
育儿与心理
代码片段
在 Express 中使用 ejs 模板引擎
安装：
$ npm install --save ejs
配置 Express 使用 ejs 模板
-
app.set('views', config.viewPath);- 配置模板文件存放的路径
-
app.set('view engine', 'ejs');- 配置调用 res.render 的时候使用的模板引擎
- 找到
view目录下的.ejs后缀的文件
app.set('views', '视图模板文件存放路径')
app.set('view engine', '安装的模板引擎的名称，例如：ejs')
如果使用上面的配置，则视图的后缀名必须为 .ejs，如果想要修改视图的后缀名，可以使用下面的配置形式
app.engine('.html', require('ejs').__express)
app.set('view engine', 'html')
使用：
只要执行了上面两句代码：就可以直接在后面的请求处理函数中使用 res.render(视图名称，要注入的数据对象)，然后express会自动帮你去读取文件然后注入数据，解析替换，最后得到一个完整的 html 页面，然后发送给客户端。
如 views/index.html 文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello <%= name %></h1>
</body>
</html>
app.js 文件代码如下：
app.get('/', (req, res) => {
res.render('index', {
name: 'World'
})
})
浏览器中看到的最终渲染结果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
在 Express 中使用 xTemplate 模板引擎
安装
$ npm install xtpl xtemplate --save
配置模板引擎
1、渲染的页面必须是 .xtpl 后缀的
// 引入路径配置文件
const config = require('./config');
// 指定模板放在什么地方了
app.set('views', config.viewPath);
// 指定使用哪个模板引擎
app.set('view engine', 'xtpl');
2、渲染页面任然是 .hmtl 后缀的
const config = require('./config');
app.set('views', config.viewPath);
app.engine('.html', require('xtpl').__express);
app.set('view engine', 'html');
Node 走通页面流程
1、安装包：
$ npm install --save express
$ npm install xtpl xtemplate --save
2、views 文件下添加要渲染的 layout/base.html 页面视图文件
<!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、中间需要替换的内容
{{extend('../layout/base')}}
{{#block('content')}}
<!-- 个人资料 -->
<div class="body teacher-profile">
<!-- ... -->
</div>
{{/block}}
4、入口程序：app.js
// 引入包
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
// 首页当做一个子路由
const express = require('express');
// express 有个方法叫 Router() 方法，创建子路由
const router = express.Router();
// 当成一个模块加载，对外暴漏接口，子路由暴漏出去了
module.exports = router;
// 设置子路由
router.get('/', function (req, res) {
res.render('dashboard/index', {});
});
