在这里就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('/',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> 具体页面显示如下：
上面讲的是使用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"></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">{% 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('/',res)=>{ res.render('www/home',{});}) 总结
以上是内存溢出为你收集整理的node结合swig渲染摸板实现前后端不分离全部内容，希望文章能够帮你解决node结合swig渲染摸板实现前后端不分离所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）