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 Express框架中处理404页面一个方式
May 28 NodeJs
NodeJS学习笔记之网络编程
Aug 03 NodeJs
nodejs教程之入门
Nov 21 NodeJs
nodejs开发微博实例
Mar 25 NodeJs
浅谈Nodejs应用主文件index.js
Aug 28 NodeJs
NodeJS处理Express中异步错误
Mar 26 NodeJs
用nodejs实现json和jsonp服务的方法
Aug 25 NodeJs
nodejs实现的连接MySQL数据库功能示例
Jan 25 NodeJs
nodejs 简单实现动态html的方法
May 12 NodeJs
通过nodejs 服务器读取HTML文件渲染到页面的方法
May 17 NodeJs
纯异步nodejs文件夹(目录)复制功能
Sep 03 NodeJs
nodejs中使用archive压缩文件的实现代码
Nov 26 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语法(1)
2006/10/09 PHP
MySQL授权问题总结
2007/05/06 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python3.5字符串常用操作实例详解
2019/05/01 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
CAD制图人员的自荐信
2014/02/07 职场文书
《搭石》教学反思
2014/04/07 职场文书
中华魂演讲稿
2014/05/13 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
2014年党总支工作总结
2014/12/18 职场文书
青年文明号申报材料
2014/12/23 职场文书
欢迎词怎么写
2015/01/23 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
Python3 类型标注支持操作
2021/06/02 Python
Python基础之变量的相关知识总结
2021/06/23 Python
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis