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


Posted in NodeJs onMay 15, 2018

相对于jade,我还是更喜欢swig前端模板引擎,jade虽然语法简练高效了不少,但是在我这最大的问题是

他没有一个html该有的样子。。。

所以我还是决定使用swig,页面结构,样子都是熟悉的样子,使用起来顺手了许多。

很多朋友也在纠结二者的优缺点,这个根据需求因人而异吧

这是两者的比较

http://vschart.com/compare/swig-template-engine/vs/jade-template-engin

下面我们一起学习下swig这个前端模板引擎

swig的简单介绍

swig是JS模板引擎,它有如下特点:

  1. 支持大多数主流浏览器。
  2. 表达式兼容性好。
  3. 面向对象的模板继承。
  4. 将过滤器和转换应用到模板中的输出。
  5. 可根据路劲渲染页面。
  6. 支持页面复用。
  7. 支持动态页面。
  8. 可扩展、可定制。

一. swig的安装

npm install swig --save

二.和express框架集成

app.js

var express = require('express');
var swig = require('swig');
var path = require('path')
var app = express();
var port = process.env.PORT || 4000

//设置swig页面不缓存
swig.setDefaults({
 cache: false
})
app.set('view cache', false);
app.set('views','./views/pages/');
app.set('view engine','html');
app.engine('html', swig.renderFile);
app.listen(port);

console.log('server is started at http://localhost:'+port);
//index page
app.get('/',function(req, res){
 res.render('index',{
  title:'首页 ',
  content: 'hello swig'
 })
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{{ title }}</title>
</head>
<body>
 {{ content }}
</body>
</html>

然后测试运行

node app.js

在浏览器输入:http://localhost:4000, 执行效果如下

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

浏览器运行.png

三.基本用法

1.变量

{{ name }}

这里需要注意的是前后两端都要有空格,这样{{name}}写就会报错

2.属性

{{ student.name }}

3.模板继承

Swig 使用 extends 和 block 来实现模板继承 layout.html

首先我们定义一个模板

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{% block title %}{% endblock %}</title>
 {% block head %}{% endblock %}
</head>
<body>
 {% block content %}{% endblock %}
</body>
</html>

这个模板里面我们定义了三个block块,子模板可以对这三个block继承

然后我们写一个index.html继承这个模板

{% extends './layout.html' %}
{% block title %} index {% endblock %}
{% block content %}
 <div>
   <h1>hello swig</h1>
  <div>
{% endblock %}

注意我这里并没有复写{% block head %}{% endblock %}这个块

也就是说我们可以在layout.html模板页面里面定义很多block,而子页面可以有选择性的实现。

4.include模板

包含一个模板到当前位置,这个模板将使用当前上下文

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{% block title %}{% endblock %}</title>
 {% include "./includes/head.html" %}
 {% block head %}{% endblock %}
</head>
<body>
 {% include "./includes/header.html" %}
 {% block content %}{% endblock %}
</body>
</html>

5.if判断

{ % if name === '郭靖' % }
 hello 靖哥哥
{ % endif % }

6.if-else判断

{ % if name === '郭靖' % }
 hello 靖哥哥
{ % elseif name === '黄蓉' % }
 hello 蓉妹妹
{ % else % }
 hello 欧阳峰
{ % endif % }

7.for循环

先上栗子:

// arr = [1, 2, 3]
{ % for key, val in arr % }
 <p>{ { key } } -- { { val } }</p>
{ % endfor % }

for循环内置变量:

  1. loop.index:当前循环的索引(1开始)
  2. loop.index0:当前循环的索引(0开始)
  3. loop.revindex:当前循环从结尾开始的索引(1开始)
  4. loop.revindex0:当前循环从结尾开始的索引(0开始)
  5. loop.key:如果迭代是对象,是当前循环的键,否则同 loop.index
  6. loop.first:如果是第一个值返回 true
  7. loop.last:如果是最后一个值返回 true
  8. loop.cycle:一个帮助函数,以指定的参数作为周期

使用方法:

// arr = [1, 2, 3]
{ % for key, val in arr % }
 <p>{{ loop.index }} -- {{ key }} -- {{ val }}</p>
{ % endfor % }

8.强大的内置过滤器

  1. add(value):使变量与value相加,可以转换为数值字符串会自动转换为数值。
  2. addslashes:用 \ 转义字符串
  3. capitalize:大写首字母
  4. date(format[, tzOffset]):转换日期为指定格式
  5. format:格式
  6. tzOffset:时区
  7. default(value):默认值(如果变量为undefined,null,false)
  8. escape([type]):转义字符
  9. 默认: &, <, >, ", '
  10. js: &, <, >, ", ', =, -, ;
  11. first:返回数组第一个值
  12. join(glue):同[].join
  13. json_encode([indent]):类似JSON.stringify, indent为缩进空格数
  14. last:返回数组最后一个值
  15. length:返回变量的length,如果是object,返回key的数量
  16. lower:同''.toLowerCase()
  17. raw:指定输入不会被转义
  18. replace(search, replace[, flags]):同''.replace
  19. reverse:翻转数组
  20. striptags:去除html/xml标签
  21. title:大写首字母
  22. uniq:数组去重
  23. upper:同''.toUpperCase
  24. url_encode:同encodeURIComponent
  25. url_decode:同decodeURIComponemt

使用方法:

例如我们要格式化一个时间,使用方法和linux上的管道命令非常像

{{ birthday|date('Y-m-d') }}

大写首字母

{{ name|title }}

9.set命令

用来设置一个变量,在当前上下文中复用

{% set foo = [0, 1, 2, 3, 4, 5] %}
 {% for num in foo %}
 <li>{{ num }}</li>
{% endfor %}

参考文献:http://www.iqianduan.net/blog/how_to_use_swig

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs实现的一个简单聊天室功能分享
Dec 06 NodeJs
NodeJS制作爬虫全过程
Dec 22 NodeJs
NodeJs读取JSON文件格式化时的注意事项
Sep 25 NodeJs
windows 下安装nodejs 环境变量设置
Feb 02 NodeJs
nodejs基础应用
Feb 03 NodeJs
详解nodejs微信公众号开发——5.素材管理接口
Apr 11 NodeJs
Nodejs之TCP服务端与客户端聊天程序详解
Jul 07 NodeJs
详解nodejs的express如何自动生成项目框架
Jul 12 NodeJs
Nodejs 和 Electron ubuntu下快速安装过程
May 04 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
May 12 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
ubuntu系统下使用pm2设置nodejs开机自启动的方法
May 12 NodeJs
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
May 15 #NodeJs
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
May 15 #NodeJs
解决Nodejs全局安装模块后找不到命令的问题
May 15 #NodeJs
webstorm中配置nodejs环境及npm的实例
May 15 #NodeJs
基于nodejs res.end和res.send的区别
May 14 #NodeJs
nodeJs爬虫的技术点总结
May 13 #NodeJs
修改Nodejs内置的npm默认配置路径方法
May 13 #NodeJs
You might like
php&amp;java(一)
2006/10/09 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
深入理解vue中的$set
2017/06/01 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Python的标准模块包json详解
2017/03/13 Python
python读文件的步骤
2019/10/08 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Python-opencv 双线性插值实例
2020/01/17 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
毕业生简历自我评价范文
2014/04/09 职场文书
初三学生评语大全
2014/04/24 职场文书
银行奉献演讲稿
2014/09/16 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
2014年店长工作总结
2014/11/17 职场文书
护士医德考评自我评价
2015/03/03 职场文书
党员自我评价2015
2015/03/03 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis