分类导航

Node.js 发布时间：2022-04-24 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了【Node.js-4】jade介绍、include、传递数据、定义变量、for等高级用法、ejs，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

npm install jade

——我们写一个文件，文件里面放的就是写的@H_772_5@jade模板。规则就是，缩进，括号里面是属性，@H_772_5@style可以用@H_772_5@json写法，@H_772_5@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 = @R_801_10613@ire('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、除了在标签后面@H_772_5@空格然后加需要显示的内容外，还可以使用下面这种方式。

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

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

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

script
    include index.js

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

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

const jade = @R_801_10613@ire('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、定义变量的格式，就是代码前面加@H_772_5@-：

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

6、@H_772_5@for循环的用法：

——先给数据：

const jade = @R_801_10613@ire('jade');

var str = jade.renderFile('./views/index.jade',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>

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

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

div!=content

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

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

npm install ejs

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

——先上数据：

const ejs=@R_801_10613@ire('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>