Express全系列教程之(十):jade模板引擎
一、前言
随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来。JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现。
什么是模板引擎?
它用于解析动态数据和静态页面所生成的视图文件,将原本静态的数据变为动态,快速地实现页面交互;
目前使用较广的模板引擎有以下几种:Jade / Pug、EJS、Handlebars。
jade模板引擎
jade模板引擎相较于原来的html会显得更加简洁,它将标签原本的"<>"符号去掉,用括号代替,层级使用tab缩进来分,并且也支持js语法;
二、jade的基本使用
安装jade:
- cnpm install jade --save
在程序中引入jade:
- app.set('views',"public"); //设置视图的对应目录
- app.set("view engine","jade"); //设置默认的模板引擎
- app.engine('jade', require('jade').__express); //定义模板引擎
特定路由渲染:
- app.use("/",function(req,res){
- res.render("index.jade");
- });
完整实例:
- const express=require("express");
- const jade=require("jade");
- const fs=require('fs');
- var app=express();
- //引用jade
- app.set('views',"public"); //设置视图的对应目录
- app.set("view engine","jade"); //设置默认的模板引擎
- app.engine('jade', jade.__express); //定义模板引擎
- //获取jade文件
- var str=jade.renderFile("./public/index.jade",{pretty:true});
- console.log(str);
- app.use("/",function(req,res){
- res.render("index.jade");
- });
- app.listen(8080);
由上面的app.set('views',"public");可知,这里将jade文件放在了public文件夹下:
在执行res.render时,会自动渲染public中的index.jade文件,之后转换为HTML5进行dom渲染显示。
三、jade基础语法
1、jade对很多html操作进行了简化,如下:
- html
- head
- style
- body
- div(class="content")
- h1 正文
了解过html语句的,从结构上一定会发现,它将原本的双标签省略了,尖括号也不见了,而层级的划分则由缩进实现,默认的,jade会把几乎所有缩进后的字母变为标签(行内元素)。以下代码会变为:
- <html>
- <head>
- <style></style>
- </head>
- <body>
- <div class="content">
- <h1>正文</h1>
- </div>
- </body>
- </html>
<div class="content"></div>也将用div(class="content")代表,简化了代码的书写;
2、“|”符号的作用
有时我们想让我们的标签成为文字,那么“|”成为了绝好的工具:
- div(class="content",id="content")
- | center
我们可以看到,他将center作为文字原封不动的写入了html中,而不是作为一个标签渲染。
当然我们用它来转换js语句:
- script
- | var cli = document.getElementById("content");
- | cli.onclick=function(){
- | alert("aaa");
- | }
他将会变为:
- <script>
- var cli = document.getElementById("content");
- cli.onclick=function(){
- alert("aaa");
- }
- </script>
3、识别js语句:
可以通过 script. 来识别js语法:
- script.
- var cli = document.getElementById("content");
- cli.onclick=function(){
- alert("aaa");
- }
他也会变为:
- <script>
- var cli = document.getElementById("content");
- cli.onclick=function(){
- alert("aaa");
- }
- </script>
我们可以看到,相比于用 | 使用script. 更加方便快捷。
4、引入其他js文件:
想在jade的js标签中引入其他js文件?没错,它也支持。前提请确保他们在同一文件夹下:
- script
- include click.js
得到:
- <script>var cli = document.getElementById("content");
- cli.onclick=function(){
- alert("aaa");
- }
- </script>
5、表达式
“-”允许我们直接写js语法,在变量调用时,通过 #{a+b} 或 div=a+b 进行:
- html
- head
- body
- -var a=10
- -var b=20
- div a+b为:#{a+b}
- div=a+b
会得到:
- <html>
- <head></head>
- <body>
- <div>a+b为:30</div>
- <div>30</div>
- </body>
- </html>
6、for循环:
"-"也可以用于循环语句的使用
- html
- head
- body
- -var arr=0;
- -for(var i=5;i>arr;i--)
- div=i
- div the number = #{i}
得到:
- <html>
- <head></head>
- <body>
- <div>5</div>
- <div>4</div>
- <div>3</div>
- <div>2</div>
- <div>1</div>
- <div>the number = 0</div>
- </body>
- </html>
7、case ,when
类似于switch case语句:
- html
- head
- body
- - var test = "汉子"
- -var none = "无"
- div The word is #{test}
- case test
- when "a": div the when is a
- when "b": div the second is b
- when "汉子": div the Third is 汉子
- default: The words is #{none}
得到:
- <html>
- <head></head>
- <body>
- <div>The word is 汉子。</div>
- <div>the Third is 汉子</div>
- </body>
- </html>
类似于switch case,只执行when中与case对应的代码块,在匹配后面用 : 来作为要执行的代码,后面跟上标签和对应语句
8、if else条件判断
- html
- head
- body
- -for(var i=12;i>0;i--)
- -if(i%2==0)
- div(style={background:'#eee',width:'100%',height:'20px',color: '#333'}) 偶数
- -else
- div(style={background:'#333',width:'100%',height:'20px',color: '#eee'}) 奇数
得到:
- <html>
- <head></head>
- <body>
- <div style="background:#eee;width:100%;height:20px;color:#333"> 偶数</div>
- <div style="background:#333;width:100%;height:20px;color:#eee"> 奇数</div>
- <div style="background:#eee;width:100%;height:20px;color:#333"> 偶数</div>
- <div style="background:#333;width:100%;height:20px;color:#eee"> 奇数</div>
- <div style="background:#eee;width:100%;height:20px;color:#333"> 偶数</div>
- <div style="background:#333;width:100%;height:20px;color:#eee"> 奇数</div>
- <div style="background:#eee;width:100%;height:20px;color:#333"> 偶数</div>
- <div style="background:#333;width:100%;height:20px;color:#eee"> 奇数</div>
- <div style="background:#eee;width:100%;height:20px;color:#333"> 偶数</div>
- <div style="background:#333;width:100%;height:20px;color:#eee"> 奇数</div>
- <div style="background:#eee;width:100%;height:20px;color:#333"> 偶数</div>
- <div style="background:#333;width:100%;height:20px;color:#eee"> 奇数</div>
- </body>
- </html>
9、style的写法:
在对style样式进行修改时,与script相同,也可使用 . 对其进行编辑,之后对不同的标签在其后面加{},大括号里写css语句1,并使用 ; 隔开
- html
- head
- meta(charset="utf-8")
- title jade测试页面
- style.
- body{margin:0;padding:0}
- div
- {width: 100px;height: 100px;background: #ccc;text-align: center;line-height: 100px;margin: 10px auto}
- div.last{clear:left}
- body
- -var a=0;
- while a<12
- if a%2==0 && a!=0
- div.last=a++
- else
- div=a++
得到:
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>jade测试页面</title>
- <style>
- body{margin:0;padding:0}
- div
- {width: 100px;height: 100px;background: #ccc;text-align: center;line-height: 100px;margin: 10px auto}
- div.last{clear:left}
- </style>
- </head>
- <body>
- <div>0</div>
- <div>1</div>
- <div class="last">2</div>
- <div>3</div>
- <div class="last">4</div>
- <div>5</div>
- <div class="last">6</div>
- <div>7</div>
- <div class="last">8</div>
- <div>9</div>
- <div class="last">10</div>
- <div>11</div>
- </body>
- </html>
10、Mixin
Mixin的作用是对模块的复用,当重复代码有不同内容时,起作用就来了:
- - var num = 0;
- mixin node
- div The number in mixin node is #{num++}
- +node()
- +node()
- +node()
- div At last, the number in mixin node is #{num++}
得到:
- <div>The number in mixin node is 0</div>
- <div>The number in mixin node is 1</div>
- <div>The number in mixin node is 2</div>
- <div>At last, the number in mixin node is 3</div>
以上则是jade的一些常用语法,如果平常使用jade作为开发,那么这些是非常基础的,也希望大家有所体会
Express全系列教程之(十):jade模板引擎的更多相关文章
- Express全系列教程之(十一):渲染ejs模板引擎
一.简介 相比于jade模板引擎,ejs对原HTML语言就未作出结构上的改变,只不过在其交互数据方面做出了些许修改,相比于jade更加简单易用.因此其学习成本是很低的.您也可参考ejs官网:https ...
- Express全系列教程之(一):Express的安装 和第一个程序
前言 ndoe.js,一个基于javsscript运行环境的服务器语言,它的出现使得javascript有能力去实现服务器操作.在gitHub上ndoe.js的star数已接近6万,可见其受欢迎程度: ...
- Express全系列教程之(九):将session上传至mysql数据库
一.简介 实际引用中,有些公司在不同地区会设置不同服务器,因此就需要用到nginx以实现负载均衡,这时,将session数据保存至数据库就成为了需要面对的问题,我们以MySQL数据库为例,看看他是如何 ...
- Express全系列教程之(八):session的基本使用
一.关于session session是另一种记录客户状态的机制,与cookie保存在客户端浏览器不同,session保存在服务器当中:当客户端访问服务器时,服务器会生成一个session对象,对象中 ...
- Express全系列教程之(七):cookie的加密
一.关于cookie加密 cookie加密是让客户端用户无法的值cookie明文信息,是数据安全的重要部分:一般的我们可以在保存cookie时对cookie信息进行加密,或者在res.cookie中对 ...
- Express全系列教程之(六):cookie的使用
一.关于Cookie 在我们关闭一个登录过的网址并重新打开它后,我们的登录信息依然没有丢失:当我们浏览了商品后历史记录里出现了我们点击过的商品:当我们推回到首页后,推荐商品也为我们选出了相似物品:事实 ...
- Express全系列教程之(五):Express的中间件
一.中间件 从字面意思,我们可以了解到它大概就是做中间代理操作,事实也是如此:大多数情况下,中间件就是在做接收到请求和发送响应中间的一系列操作.事实上,express是一个路由和中间件的web框架,E ...
- Express全系列教程之(四):获取Post参数的两种方式
一.关于POST请求 post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新.相比于get请求,post所 ...
- Express全系列教程之(三):get传参
一.关于get请求 一般在网站开发中,get都用作数据获取和查询,类似于数据库中的查询操作,当服务器解析前台资源后即传输相应内容:而查询字符串是在URL上进行的,形如: http://localhos ...
随机推荐
- 利用Synergy在局域网内让Ubuntu和Windows 7两台机器共用一套键鼠。
一个主机可以连接多个显示器, 方便自己使用, 但是这只是一个系统分屏显示, 如果想用两台不同系统的电脑, 并且还不想老是在两套键鼠之间来回转换, 那么建议你可以用Synergy软件来实现多台电脑之间的 ...
- 11-13SQLserver基础--数据库之事务
事务 定义:在远程操作时,都要经过两步操作,先删除后插入或者先插入后删除,都要调用两次数据库,为了保证数据库的完整性,只要流程运转过程中,只要有一步操作未成功,自动复原,回到流程刚开始的地方.实际上是 ...
- JS中,split()用法(将字符串按指定符号分割成数组)
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...
- CSS框模型:一切皆为框 — 从行框说起
一 行框 看图说话 css 行框 各部分详解 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最 ...
- solr的查询语法、查询参数、检索运算符
转载自:http://martin3000.iteye.com/blog/1328931 1.查询语法 solr的一些查询语法 1.1. 首先假设我的数据里fields有:name, tel, add ...
- css知多少(5)——选择器(转)
css知多少(5)——选择器 1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得 ...
- UltraISO制作系统ISO镜像
一.简介 UltraISO是一款功能强大而又方便实用的光盘映像文件制作/编辑/转换工具,它可以直接编辑ISO文件和从ISO中提取文件和目录,也可以从CD-ROM制作光盘映像或者将硬盘上的文件制作成IS ...
- GCD 学习(二)dispatch_queue_create创建Dispatch Queue
摘录于: http://zhuyanfeng.com/archives/3042 dispatch_queue_create 用于创建用户线程队列.可以创建Serial/Concurrent Disp ...
- SDUT 3377 数据结构实验之查找五:平方之哈希表
数据结构实验之查找五:平方之哈希表 Time Limit: 400MS Memory Limit: 65536KB Submit Statistic Problem Description 给定的一组 ...
- Paint类的介绍
* Paint即画笔,在绘图过程中起到了极其重要的作用,画笔主要保存了颜色, * 样式等绘制信息,指定了如何绘制文本和图形,画笔对象有很多设置方法, * 大体上可以分为两类,一类与图形绘制相关,一类与 ...