node 中使用模板引擎

代码片段

在 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 文件代码如下：

  
  
  
    
    
  
  
    
Hello <%= name %>
  
  

app.js 文件代码如下：

  app.get('/', (req, res) => {
    res.render('index', {
      name: 'World'
    })
  })

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

  
  
  
    
    
  
  
    
Hello World
  
  

在 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 页面视图文件

  
  
  
    
    
  
  
    
    

      
    
    
    

      

        
        

          
        
        
        {{{block('content')}}}  
      
    
  
  

3、中间需要替换的内容

  {{extend('../layout/base')}}
  {{#block('content')}}
  
  

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

---

博客原文链接地址