node结合swig渲染摸板的方法


Posted in Javascript onApril 11, 2018

在这里就nodejs如何应用swig摸板,总结一下一些基本的用法。

首先当然是利用express框架在node后台上面搭建服务

var express = require('express');
var server = express();

server.listen(8080,'localhost',(req,res)=>{
   console.log('服务器启动...');
})

启动成功之后,开始设置swig摸板的相关配置,具体代码如下:

npm install swig -s

安装成功之后,加上swig配置,代码如下:

//配置摸板引擎
var swig = require('swig');
//参数1,摸板引擎的名称,固定字段
//参数2,摸板引擎的方法
server.engine('html',swig.renderFile);
//摸板引擎存放目录的关键字,固定字段
//实际存在的目录,html文件就在html文件夹下面
server.set('views',__dirname+'/html');
//注册摸板引擎,固定字段
server.set('view engine','html');
//关闭swig缓存,缓存的目的也是提高node服务器的响应速度
swig.setDefaults({cache:false});

配置需要渲染的数据:

server.get('/',(req,res)=>{
  //render方法只有在使用摸板引擎之后才会生效,其中 参数1是需要渲染的摸板名称,参数2就是需要渲染到页面的一些参数
  res.render('temp',{
    name:'张三',
    user:{
      name:'栗子',
      age:18
    },
    lists:['item1','item2','item3','item4','item5',
    'item6','item7','item8','item9','item10','item11','item12',
    'item13','item14','item15','item16','item17','item18','item19',
    'item20','item21','item22','item23','item24','item25','item26']
  });
})

html文件的具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>摸板引擎</div>
  <!-- {{}} 插值表达式-->
  姓名:<p>{{name}}</p>
  {% if user.name == '栗子' && user.age == '18'%}
  姓名:<p>栗子</p>
  {% elseif user.name == '张三'%}
  <p>张三</p>
  {% endif %}
  <p>遍历数组</p>
  {% for items in lists%}
  <li>items</li>
  {% endfor %}
  
   <!-- 页面上面设置数据 -->
  {% set arr = [1,2,3,4,5]%}
  <p>{{arr.length}}</p>
  <!-- 如何引入页面-->
  {% include './common.html' %}
</body>
</html>

具体页面显示如下:

node结合swig渲染摸板的方法

上面讲的是使用swig摸板引擎如何传递参数到页面渲染,下面来看看如何使用swig提取html公共的部分:

html页面公共的部分,比如说header,公共的js css文件,导航栏等

设置一个公共的页面:

<header>
  <title>node</title>
  <!-- css占位符主要用来显示其他页面的个性化的css文件,例如home.css about.css -->
  {% block css%}
  {% endblock %}
  <link rel="stylesheet" href="/static/css/layout.css" rel="external nofollow" >
</header>
<!-- 所以页面公共的导航栏 -->
<nav>
  <li><a href="">首页</a></li>
  <li><a href="">关于我们</a></li>
  <li><a href="">商品列表</a></li>
  <li><a href="">登录</a></li>
  <li><a href="">注册</a></li>
</nav>
 <!-- content占位符主要用来显示其他页面的个性化的内容显示,不同的页面有不同的显示方式 -->
{% block content%}
{% endblock %}
 <!-- js占位符主要用来显示其他页面的个性化的js文件,例如home.js about.js -->
{% block js%}
{% endblock %}
<script src="/static/js/layout.js"></script>

home.html

<!-- 继承所有页面公共的页面模块layout.html -->
{% extends './layout.html'%}
{% block css %}
<link rel="stylesheet" href="/static/css/home.css" rel="external nofollow" >
{% endblock %}
{% block content %}
 <li><a href="">1</a></li>
 <li><a href="">2</a></li>
 <li><a href="">3</a></li>
 <li><a href="">4</a></li>
 <li><a href="">5</a></li>
 <li><a href="">6</a></li>
{% endblock %}

{% block js %}
<script src="/static/js/home.js"></script>
{% endblock %}

当启动node服务器,渲染home页面的时候,你会看到

server.get('/',(req,res)=>{
  res.render('www/home',{});
})

node结合swig渲染摸板的方法

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

Javascript 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
详解react、redux、react-redux之间的关系
Apr 11 #Javascript
Mac下安装vue
Apr 11 #Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 #Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 #Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 #Javascript
vue 组件高级用法实例详解
Apr 11 #Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 #Javascript
You might like
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
js编写选项卡效果
2017/05/23 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python字符串的一些操作方法总结
2019/06/10 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
工程部经理岗位职责
2013/12/08 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014年工商所工作总结
2014/12/09 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏