nodejs前端模板引擎swig入门详解

让我来详细讲解一下“nodejs前端模板引擎swig入门详解”的完整攻略。

标题

nodejs前端模板引擎swig入门详解

简介

Swig是一款简单、快速、可扩展的 JavaScript 模板引擎。Swig能够在Node.js和浏览器中运行，因此它不仅适用于服务器端的视图，还适用于浏览器端的JavaScript模板引擎。Swig具有一个内置缓存系统，能显著提升渲染效率。

安装Swig

在终端输入以下命令：

npm install swig --save

配置Swig

在Node.js中使用Swig引擎时，我们需要在代码中将Swig配置。下面是一个简单的Swig配置的步骤：

var swig = require('swig');
// 设置模板引擎
app.engine('html', swig.renderFile);
// 设置模板文件存放的目录
app.set('views', path.join(__dirname, 'views'));
// 设置模板引擎的后缀名
app.set('view engine', 'html');
// 出于开发环境可以不使用缓存的目的
swig.setDefaults({cache: false});

运行Swig

下面我们来使用Swig引擎渲染一个HTML页面，并将其返回给客户端。

var swig = require('swig');
var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.render('index', {title: 'Swig入门教程'});
});

app.engine('html', swig.renderFile); // 设置模板引擎
app.set('views', './views');         // 设置模板存放目录
app.set('view engine', 'html');      // 设置模板引擎文件后缀名

var server = app.listen(3000, function() {
  var host = server.address().address;
  var port = server.address().port;
  console.log('server running at http://%s:%s', host, port);
});

完整代码参考：Swig入门教程代码

示例说明

示例一：使用Swig模板引擎输出HTML页面

假设我们有一个HTML页面，需要使用Swig模板引擎渲染并输出给客户端。具体操作步骤如下：

在项目中安装Swig模板引擎。

npm install swig --save

在Node.js中使用Swig模板引擎。

var swig = require('swig');

//渲染html
var renderedHtml = swig.renderFile('views/index.html', {
    pagename: 'MyPage'
});

创建模板文件（views/index.html）

<html>
  <head>
    <title>{{ pagename }}</title>
  </head>
  <body>
    <h1>{{ pagename }}</h1>
    <p>Hello, World!</p>
  </body>
</html>

运行Node.js程序以输出HTML。

示例二：使用Swig模板引擎输出JSON数据

在Node.js中使用Swig渲染包含在JSON对象中的数据。具体操作步骤如下：

1.在项目中安装Swig模板引擎。

npm install swig --save

2.在Node.js中使用Swig模板引擎。

var swig  = require('swig');
var data  = {name: 'Joe'};

// 渲染json
var json = swig.render('{{ data | safe }}', {
  locals: {
    data: JSON.stringify(data)
  }
});

3.在浏览器中输出JSON数据。

完整代码参考：使用Swig模板引擎输出JSON数据的代码

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：nodejs前端模板引擎swig入门详解 - Python技术站

nodejs前端模板引擎swig入门详解

标题

简介

安装Swig

配置Swig

运行Swig

示例说明

示例一：使用Swig模板引擎输出HTML页面

示例二：使用Swig模板引擎输出JSON数据

相关文章