在Express中使用模板引擎

定义模板引擎

var  app = express();
app.set(‘views‘, ‘./views‘);  // 指定模板文件存放位置
app.set(‘view engine‘, ‘jade‘)  // 设置默认的模板引擎

注册指定扩展名的模板引擎:

app.engine(‘jade‘, require(‘jade‘)._express )

注意: _express函数是许多模板引擎提供的回调函数。但是这个函数只能在默认的文件扩展名上工作。但是,有种情况我们使用的不是对应模板引擎的扩展名的或怎么办呢?这时不能再调用_express函数。在这种情况下我们可以使用一个替代的函数,例如: 在EJS中提供了renderFile函数来完成相同的功能。

看下下面的两段代码:

app.engine( ‘ejs‘, require(‘ejs‘)._express )
app.engine( ‘html‘, require(‘ejs‘.renderFile) )

一旦,扩展名被注册,引擎回调函数被调用执行呈现具有该扩展名的模板。

添加本地对象

express() app对象提供了app.locals属性来存储本地变量, app.locals实际上是一个函数对象,这意味着可以有两种方式来设置变量。

方式一:

app.locals.title = "Hello World";
app.locals.version = 1.0;

方式二:

app.locals({title: "Hello World", version: 1.0});

在响应中呈现模板

向客户端发送响应模板有有两种方法:

  1. Express app对象发送;
  2. Response对象发送;

1>、通过Express app对象发送

语法格式,如下:

app.render(view,  [locals],  callback);

view: 模板文件名;

[locals]: 一个locals对象(即在app.locals中定义的locals对象)。

callback: 回调函数,在模板呈现后执行。接受两个参数。第一个,err-错误对象。第二个, renderedData——呈现后的模板字符串。

2>、Response对象发送

语法格式,如下:

res.render(‘模板文件名(无后缀)‘);

这种方法直接把模板呈现为一个响应,所要呈现的结果在响应中自动发送。

下面,看看下面示例代码:

var express = require(‘express‘),
    jade    = require(‘jade‘),
    ejs     = require(‘ejs‘);

var app = express();
app.set(‘views‘, ‘./views‘);
app.set(‘view engine‘, ‘jade‘);
app.engine(‘jade‘, jade._express);
app.engine(‘html‘, ejs.renderFile);

app.listen( 8080 );

app.locals({
    uname: ‘G‘,
    vehicle: ‘Pandora‘,
    terrain: ‘Mountains‘,
    climate: ‘Desert‘,
    location: ‘Unknown‘
});

app.get(‘/jade‘, function(req, res) {
    res.render(‘user_jade‘);
});

app.get(‘/ejs‘, function(req, res) {
    app.render(‘user_ejs.html‘, function(err, renderedData) {
        res.send( renderedData );
    });
});
时间: 2024-10-12 21:15:00

在Express中使用模板引擎的相关文章

nodejs学习(二) ---- express中使用模板引擎jade

系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.jade 和 footer.jade,下面教程会一步步创建) 页面解析出的样子如下图.完全是html标签 一.jade 模板引擎 介绍 模板引擎是一个库,或者一个使用一定的规则或者语言来解释数据并渲染视图的框架.模板引擎处理过的最终结果是一个视图页面,也就是html页面或者用户图形界面GUI.在MVC

express 4.x 模板引擎与express.static

前提:要在express中使用模块引擎需要将要使用的模板引擎安装在本项目,当然,express也是要安装的.在下面实例中,我使用的模板引擎是pug(一起叫做jade) 我的目录结构如下: 根目录为static,根目录下的public文件夹,是静态文件(如图片文件,css文件,js文件de)根目录.根目录下的view是模板文件的根目录.根目录中的app.js是启动文件, 代码如下: //引入必要的模块 //express.static是express 4.0中唯一的内置中间件,不需要额外引入 va

JavaScript中template模板引擎

template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果. 1.特性 (1).性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)(2).支持运行时调试,可精确定位异常模板所在语句(演示) (3).对 NodeJS Express 友好支持(4).安全,默认对输出进行转义.在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)

如何在express使用doT模板引擎

本文假设你已经使用过doT和express,并知道它的模板语法. js的模板引擎实在太多了,幸好 JavaScript template language shootoff 这篇不断被更新的文章,帮我们用真实的测试结果,得到了目前最快的模板引擎doT 安装dot $ sudo npm install dot 让express使用dot 安装express的模板引擎约定,引擎必须有一个compile方法,接受str和options参数,返回一个function对象即可,接口大致如下: export

springboot中添加模板引擎freemarker和thymeleaf

freemarkder和thymeleaf都是java的模板引擎,这里只介绍这两种模板引擎如何在sprongboot中配置: 1. freemarkder 1.1 在pom.xml中添加依赖包 <!-- 集成freemarker --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</ar

flask中jinjia2模板引擎的使用详解3

接上文 模板继承 Jinji2中的模板继承是jinjia2比较强大的功能之一. 模板继承可以定义一个父级公共的模板,把同一类的模板框架定义出来共享. 这样做一方面可以提取共享代码,减少代码冗余和重复的工作量 另一方面,对于后期的维护和管理也非常方便. 一个根模板(或叫基模板)主要有三部分组成: 一是公共的js,css等资源文件的引用, 二是定义好一个布局框架, 三是定义子模板可以重写的部分(block) 下面我们以一个例子来说明模板继承的使用方法 1. 创建一个基模板 选中templates文件

PHP中面向对象中的模板引擎类

<?php /** * 模版引擎类 */ class Tpl { //缓存目录 protected $cacheDir = './Cache/'; //模版目录 protected $tplDir = './Tpl/'; //保存变量的成员方法 protected $vars = []; //缓存有效期 protected $cacheLifeTime = 3600; //初始化成员属性 public function __construct($tplDir = null ,$cacheDir 

Express使用art-template模板引擎

第一步:安装 npm install --save art-template npm install --save express-art-template 第二步:指定.html使用的解析引擎(官方给出的是art) app.engine('解析文件的后缀名', require('express-art-template')) 第三步:使用模板进行传值 app.get('/', function (req, res) { res.render('index.html', { user: { na

Laravel中的模板引擎Blade

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板继承@yield('title')</title> <style> .header{ width: 1000px; height:150px; margin: 0 auto; background: #f5f5f5; border: 1px