在node中，EJS 和 xTemplate 模板引擎的使用

時間 2019-12-07

標籤 node ejs xtemplate 模板引擎使用简体版

原文原文鏈接

在 Express 中使用 ejs 模板引擎

安裝：html

$ npm install --save ejs

配置 Express 使用 ejs 模板git

app.set('views', config.viewPath);github
- 配置模板文件存放的路徑express
app.set('view engine', 'ejs');npm
- 配置調用 res.render 的時候使用的模板引擎瀏覽器
- 找到 view 目錄下的 .ejs 後綴的文件bash

app.set('views', '視圖模板文件存放路徑')
  app.set('view engine', '安裝的模板引擎的名稱，例如：ejs')

若是使用上面的配置，則視圖的後綴名必須爲 .ejs，若是想要修改視圖的後綴名，能夠使用下面的配置形式app

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

使用：ide

只要執行了上面兩句代碼：就能夠直接在後面的請求處理函數中使用 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

配置模板引擎

一、渲染的頁面必須是 .xtpl 後綴的

// 引入路徑配置文件
  const config = require('./config');
  // 指定模板放在什麼地方了
  app.set('views', config.viewPath);
  // 指定使用哪一個模板引擎
  app.set('view engine', 'xtpl');

二、渲染頁面任然是 .hmtl 後綴的

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

Node 走通頁面流程

一、安裝包：

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

二、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>

三、中間須要替換的內容

{{extend('../layout/base')}}
  {{#block('content')}}
  <!-- 我的資料 -->
  <div class="body teacher-profile">
    <!-- ... -->
  </div>
  {{/block}}

四、入口程序：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}`);
  });

五、設置子路由，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', {});
  });

原文博客連接