在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', {});
  });

原文博客连接