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 相关文章推荐
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 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
PHP 错误之引号中使用变量
2009/05/04 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
php生成word并下载代码实例
2019/03/15 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
vue如何判断dom的class
2018/04/26 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
python xml解析实例详解
2016/11/14 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
详解Python 正则表达式模块
2018/11/05 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Django分页功能的实现代码详解
2019/07/29 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
如何理解Python中包的引入
2020/05/29 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
社区网格化管理实施方案
2014/03/21 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
工程催款通知书
2015/04/17 职场文书
红楼梦读书笔记
2015/06/25 职场文书
CAD实训总结范文
2015/08/03 职场文书
Linux安装Docker详细教程
2022/07/07 Servers