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

最新推荐文章于 2024-05-05 21:10:49 发布

weixin_34082854

最新推荐文章于 2024-05-05 21:10:49 发布

阅读量245

点赞数

原文链接：https://segmentfault.com/a/1190000007640479

版权

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

原文博客链接

weixin_34082854

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在node中，EJS 和 xTemplate 模板引擎的使用

在 Express 中使用 ejs 模板引擎安装： $ npm install --save ejs配置 Express 使用 ejs 模板app.set('views', config.viewPath);配置模板文件存放的路径app.set('view engine', 'ejs');配置调用 res.ren...
复制链接

扫一扫

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

在 Express 中使用 ejs 模板引擎

在 Express 中使用 xTemplate 模板引擎

安装

配置模板引擎

Node 走通页面流程

“相关推荐”对你有帮助么？