代碼片段
在 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', {});
});
