您的位置：首页 > Web前端 > Node.js

【Node.js-4】jade介绍、include、传递数据、定义变量、for等高级用法、ejs

2017-08-06 13:06 597 查看
1、
jade
和
ejs
都是一种模板引擎。但是两者表现形式不一样，
jade
是侵入式的，
ejs
类似于
django
里面的模板引擎，比较温和。我们先主要讲解
jade
，当然，首先是安装：

npm install jade


——我们写一个文件，文件里面放的就是写的
jade
模板。规则就是，缩进，括号里面是属性，
style
可以用
json
写法，
class
可以用数组写法。

html
head
style
script(src='../www/js/index.js')
body
h3 iamtitle
div(id='div1',style="width:100px;height:100px;background:red;") hello div1
div(class='div2',style={width:'200px',height:'200px',background:'blue'}) hello div2
div#div3 hello div3
div.class hello div4
div(class=[item,selected])
a(href='https://www.bing.com') Bing


通过这个渲染：

const jade = require('jade');

// pretty类似美化一下格式的
var str = jade.renderFile('./views/index.jade',{pretty:true});

console.log(str);


输出结果是：

<html>
<head>
<style></style>
<script src="../www/js/index.js"></script>
</head>
<body>
<h3>iamtitle</h3>
<div id="div1" style="width:100px;height:100px;background:red;">hello div1</div>
<div style="width:200px;height:200px;background:blue" class="div2">hello div2</div>
<div id="div3">hello div3</div>
<div class="class">hello div4</div>
<div></div><a href="https://www.bing.com">Bing</a>
</body>
</html>


2、除了在标签后面
空格
然后加需要显示的内容外，还可以使用下面这种方式。

html
head
style
script(src='../www/js/index.js')
body
h3.
hello i am title
div
| hello div


上面渲染的结果如下，有了
.
和
|
操作，就可以格式化的写很多行的内容了。

<html>
<head>
<style></style>
<script src="../www/js/index.js"></script>
</head>
<body>
<h3>hello i am title</h3>
<div>hello div</div>
</body>
</html>


3、尽管我们可以使用
.
或者
|
来写多行的代码，比如在
script
里面。但是毕竟在这个地方写一大坨还是觉得有问题。这个时候就可以使用
include
命令，直接用下面的代码就可以把
index.js
里面的js代码都引过来，这种引不需要二次请求，它直接把一坨代码直接拷贝粘贴过来了：

script
include index.js


4、上面的种种写法都是静态的，如果动态绑定数据呢？也很简单。

——传递给模板的数据，这么传的：

const jade = require('jade');

var str = jade.renderFile('./views/index.jade',{pretty:true,username:'eric'});

console.log(str);


——获取数据，怎么获取的：

html
head
style
script
body
p.
hello i am #{username}


5、定义变量的格式，就是代码前面加
-
：

html
head
style
script
body
-var a = 5;
-var b = 7;
| 结果是#{a+b}


6、
for
循环的用法：

——先给数据：

const jade = require('jade');

var str = jade.renderFile('./views/index.jade',{pretty:true,todos:['clean house','go outside','buy tickets']});

console.log(str);


——再使用：

html
head
style
script
body
ul
-for(var i=0;i<todos.length;i++)
li=todos[i]


——结果：

<html>
<head>
<style></style>
<script></script>
</head>
<body>
<ul>
<li>clean house</li>
<li>go outside</li>
<li>buy tickets</li>
</ul>
</body>
</html>


注：这里需要注意的是，我们直接使用的是
div=xxx
，相当于
div xxx
，也就是
div
里面写
xxx
内容。

7、如果要输出带有标签的富文本编辑器生成的内容，它会自动转义。如果不要的话，可以用
!=
：

div!=content


8、
if
和
case
这些暂时不介绍了，用的时候直接查文档即可。

9、下面进入
ejs
的部分。第一步还是安装：

npm install ejs


上面说过，这个类似于
django
里面的写法，举个例子吧：

——先上数据：

const ejs=require('ejs');

ejs.renderFile('./www/index.html',{
content:{
name:'news',
titles:['title1','title2','title3','title4'],
}
},function(err,data){
console.log(data);
});


——再上模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<p><%= content.name %></p>
<ul>
<% for(var i=0;i<content.titles.length;i++){ %>
<li><%= content.titles[i] %></li>
<% } %>
</ul>
</body>
</html>


——最后上结果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<p>news</p>
<ul>

<li>title1</li>

<li>title2</li>

<li>title3</li>

<li>title4</li>

</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  nodejs jade ejs 模板引擎
相关文章推荐
新的分享
章节导航