Express系列(八)
2019-12-09 本文已影响0人
笑红尘123
express之模版引擎jade
一、什么是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");
});
demo:
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(3000);
三、jade的基础语法
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",id="content")
| center
我们可以看到，他将center作为文字原封不动的写入了html中，而不是作为一个标签渲染。当然我们用它来转换js语句：
script
| var cli = document.getElementById("content");
| cli.onclick=function(){
| alert("aaa");
| }
表达式
“-”允许我们直接写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>
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>
case ，when
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>
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>
如果感觉有帮助留下一个宝贵的赞或者给小编一个赞赏！！！
