node结合swig渲染摸板的方法
时间:2019-04-14
本文章向大家介绍node结合swig渲染摸板的方法,主要包括node结合swig渲染摸板的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在这里就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>
具体页面显示如下:
上面讲的是使用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',{}); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用VSCode和SSH进行远程开发
- Android利用CountDownTimer实现倒计时功能 Android实现停留5s跳转到登录页面
- Android开发之对话框案例详解(五种对话框)
- Linux下一只五颜六色的「猫」
- Android编程实现自定义ImageView圆图功能的方法
- Android开启闪光灯的方法 Android打开手电筒功能
- Android 中ActionBar+fragment实现页面导航的实例
- Android编程之下拉菜单Spinner控件用法示例
- Android控件Tween动画(补间动画)实现方法示例
- Android顶部(toolbar)搜索框实现的实例详解
- Linux下tcpdump命令解析及使用详解
- react native中的聊天气泡及timer封装成的发送验证码倒计时
- 如何卸载linux自带openjdk并安装sun jdk
- Android中实现密码的隐藏和显示的示例
- CentOS8出现-bash:乱码问题及解决方法