node结合swig渲染摸板（附代码）

这次给大家带来node结合swig渲染摸板（附代码），node结合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文件的具体代码如下所示：

  
  
  
  


  
摸板引擎
  
  姓名:
{{name}}
  {% if user.name == '栗子' && user.age == '18'%}
  姓名:
栗子
  {% elseif user.name == '张三'%}
  
张三
  {% endif %}
  
遍历数组

							

								
								

									聚好用AI
									
可免费AI绘图、AI音乐、AI视频创作，聚集全球顶级AI，一站式创意平台
								
								下载 
							
						
  {% for items in lists%}
  
items
  {% endfor %}
  
   
  {% set arr = [1,2,3,4,5]%}
  
{{arr.length}}
  
  {% include './common.html' %}

具体页面显示如下：

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

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

设置一个公共的页面：

  
  
  {% block css%}
  {% endblock %}
  



 
{% block content%}
{% endblock %}
 
{% block js%}
{% endblock %}

home.html

{% extends './layout.html'%}
{% block css %}

{% endblock %}
{% block content %}
 
1
 
2
 
3
 
4
 
5
 
6
{% endblock %}
{% block js %}

{% endblock %}

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery实现鼠标点击悬浮特效

vue-simplemde实现图片拖拽粘贴功能（附代码）