让我来详细讲解一下“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技术站
微信扫一扫 
支付宝扫一扫 