Express全系列教程之(十):渲染jade模板引擎
一、前言
随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来。JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现。
什么是模板引擎?
它用于解析动态数据和静态页面所生成的视图文件,将原本静态的数据变为动态,快速地实现页面交互;
目前使用较广的模板引擎有以下几种:Jade / Pug、EJS、Handlebars。
jade模板引擎
jade模板引擎相较于原来的html会显得更加简洁,它将标签原本的"<>"符号去掉,用括号代替,层级使用tab缩进来分,并且也支持js语法;
二、jade的基本使用
cnpm install jade --save
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);
三、jade基础语法
1、jade对很多html操作进行了简化,如下:
htmlheadstylebodydiv(class="content")h1 正文
了解过html语句的,从结构上一定会发现,它将原本的双标签省略了,尖括号也不见了,而层级的划分则由缩进实现,默认的,jade会把几乎所有缩进后的字母变为标签(行内元素)。以下代码会变为:
<html><head><style></style></head><body><div class="content"><h1>正文</h1></div></body>
</html>
也将用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文件?没错,它也支持。前提请确保他们在同一文件夹下:
scriptinclude click.js
<script>var cli = document.getElementById("content");cli.onclick=function(){alert("aaa");}
</script>
5、表达式
“-”允许我们直接写js语法,在变量调用时,通过 #{a+b} 或 div=a+b 进行:
htmlheadbody-var a=10-var b=20div a+b为:#{a+b}div=a+b
会得到:
<html><head></head><body><div>a+b为:30</div><div>30</div></body>
</html>
6、for循环:
"-"也可以用于循环语句的使用
htmlheadbody-var arr=0;-for(var i=5;i>arr;i--)div=idiv 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语句:
htmlheadbody- var test = "汉子"-var none = "无"div The word is #{test}case testwhen "a": div the when is awhen "b": div the second is bwhen "汉子": 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条件判断
htmlheadbody-for(var i=12;i>0;i--)-if(i%2==0)div(style={background:'#eee',width:'100%',height:'20px',color: '#333'}) 偶数-elsediv(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,并使用 ; 隔开
htmlheadmeta(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<12if a%2==0 && a!=0div.last=a++elsediv=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 nodediv 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全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- Express全系列教程之(十五):文件下载
简介 文件下载非常简单,仅需通过res.download()执行即可,他可以写为3种形式: res.download('/report-12345.pdf');res.download('/repor ...
- Express全系列教程之(五):Express的中间件
一.中间件 从字面意思,我们可以了解到它大概就是做中间代理操作,事实也是如此:大多数情况下,中间件就是在做接收到请求和发送响应中间的一系列操作.事实上,express是一个路由和中间件的web框架,E ...
- Express全系列教程之(四):获取Post参数的两种方式
一.关于POST请求 post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新. 相比于get请求,post ...
- Java NIO系列教程(十 五)Java NIO Path
转载自 Java NIO系列教程(十 五)Java NIO Path 译文链接 译者:章筱虎 Java的Path接口是Java NIO2 的一部分,是对Java6 和Java7的 NIO的更新.J ...
- SpringBoot 系列教程(八十五):Spring Boot使用MD5加盐验签Api接口之前后端分离架构设计
加密算法参考: 浅谈常见的七种加密算法及实现 加密算法参考: 加密算法(DES,AES,RSA,MD5,SHA1,Base64)比较和项目应用 目的: 通过对API接口请求报文签名,后端进行验签处理, ...
- Java NIO系列教程(十二) Java NIO与IO
原文地址:http://tutorials.jenkov.com/java-nio/nio-vs-io.html 作者:Jakob Jenkov 译者:郭蕾 校对:方腾飞 当学习了Java ...
- python建站部署_SpringBoot入门建站全系列(三十二)接入xxl-job分布式任务调度平台...
SpringBoot入门建站全系列(三十二)接入xxl-job分布式任务调度平台 一.概述 XXL-JOB是一个轻量级分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源 ...
- spring boot 入门_SpringBoot入门建站全系列(三十)Mybatis多数据源进行数据库操作
SpringBoot入门建站全系列(三十)Mybatis多数据源进行数据库操作 一.概述 多数据源,就是有多个数据库的配置. 多数据源配置并不麻烦,使用起来和单数据源基本相同,但是,重要的是事务的控制 ...
- eureka集群只注册一个_Spring cloud系列教程第十篇- Spring cloud整合Eureka总结篇
Spring cloud系列教程第十篇- Spring cloud整合Eureka总结篇 本文主要内容: 1:spring cloud整合Eureka总结 本文是由凯哥(凯哥Java:kagejava ...
最新文章
- 实时把你的脸变成名画,手机摄像头新玩法
- 头发为什么会从中间断掉_谈谈保养头发的方法,教你如何让它变得更加健康
- 图像投影特征图的波峰波谷查找的相关原理及利用差分遍历法查找波峰的OpenCV代码
- OpenCV中Mat类的重载运算符operator()的用法
- nginx添加对web status及status的每一项含义
- JS基础_使用工厂方法创建对象(了解下就行了,用的不多)
- mysql stored procedures with return values
- Julia :复合类型struct当索引时
- 2021-09-01 myAtoi(
- PHP yield简介
- DLL注入之全局钩子注入
- AI论文中 ACKNOWLEDGMENT的写法
- 基于stm32无线充电器设计
- 用r语言画时序图和自相关图,并检验纯随机性
- mac远程阿里云服务器
- linux下共享文件夹
- Cadence Virtuoso IC617 Schematic的使用
- Leetcode-974 和可被 K 整除的子数组
- k8s部署vue项目
- ROS——rplidar在rviz中三维显示