学习篇:NodeJS中的模板引擎:jade

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

NodeJS 模板引擎作用:生成页面

在node常用的模板引擎一般是
1、jade ——破坏式的、侵入式、强依赖(对原有的html体系不友好,走自己的一套体系)
2、ejs ——温和的、非侵入式的、弱依赖


本次就汇总一下jade的一些特性和使用方法。


一、Jade

在node中,jade的编写特性有:
1、根据缩进,来划分规定层级
例如:在原始目录下建立一个views目录,来存放该 test.jade

    html
      head
       script
       style
      body   

在node.js中来调用该jade(记得先用npm install jade)

const jade = require('jade') ;
var str = jade.renderFile('./views/test.jade' ,{pretty : true }) //pretty : ture 相当于beauty格式化一下输出的代码
console.log(str)

运行一下,log输出的语句便成了

<html>
    <head>
     <script></script>
     <style></style>
    </head>
    <body>
    </body>
</html>  

可以看到在nodejs中的jade模板引擎,是根据缩进输入的情况,来划分规定层级的。
当然,如果你想把该代码输出成一个html文件,我们可以在源目录下新建一个build目录来存放生成的文件
那就将刚才的node.js改成

const jade = require('jade');//加载jade引擎
const fs = require('fs')

var str = jade.renderFile('./views/test.jade' ,{pretty : true }); //pretty : ture 相当于beauty格式化一下输出的代码
fs.writeFile('./buuld/index.html' ,str , function(err){
        if (err)
  console.log("编译失败");
 else
  console.log("编译成功");
})

执行完毕会在build目录下生成index.html
以上就是jade初级的使用方法。

但是我们使用模板引擎的目的并不是再此,还是能够添加css/js/data等数据。

2、关于class/style的写法——属性放在()里面,用逗号分隔
如:

html
    head
        script
        style
    body
        div(class=['aaa','bbb','ccc'])
        //class也可以写成div(style="aaa bbb ccc")
        div(style={width:'200px' ,height:'300px' ,background:'red'})
        //style也可以写成div(style="width:200px;xxxx")

运行一下node.js,则输出结果为

   
<html>
    <head>
     <script></script>
     <style></style>
    </head>
    <body>
        <div class="aaa bbb ccc">
       <div style="width:200px;height:300px;background:red"></div>
    </body>
</html>   

关于上方输出格式,可以发现,style是可以用json传输的class是可以采用数组传输进去的
因此可以在node.js中直接插入相关属性数据,然后在jade文件调用,这样就可以很方便的生成不同框架的模板文件

如果你想插入相关属性数据,并调用的话,应当在node.js中的 jade.renderFile中如此添加数据

   /
var str = jade.renderFile('./views/test.jade' ,{pretty : true ,
arr:['aaa' ,'bbb' ,'ccc'], cls:{width :'200px' , height:'200px' , background :'red'}
}); 

并在test.jade文件中修改如下:

html
    head
        script
        style
    body
        div(class=arr)
        div(style=cls})
       

运行一下,结果是跟刚才的相同

3、在jade标签中输入数据时,记得在相应标签后,加一个空格

我们通常前端编程的时候,一般都会写到

  <div>名称:DobTink</div> //在标签内添加“名称:”之类的数据
  <div>年龄:15</div>
  <script src='https://segmentfault.com/a/1190000016281552/a.js'></script>
  <script> //或者在jade中编写JavaScript
      window.onload = function(){
          console.log('测试输出');
      }
  </script>
  <a href="http://www.dobtink.com">首页</a> //编写a标签、img标签给其src赋予属性
  ///等等

而在jade中,我们需要这样来写

   div 名称:DobTink
   div 年龄:15
   script(src='https://segmentfault.com/a/1190000016281552/a.js' ,xx = '')
   script.  //注意在script后面加个点"."
       window.onload = function(){
          console.log('测试输出');
      }
   a(href="http://www.dobtink.com") 首页

执行一下,便如上所示。

4、在jade中使用if else switch while 等语句

有些情况下,我们需要从后天拿取数据,并对数据在jade中进行数据处理操作,而在jade中的 这些语句还是很方便地
代码如下:

4.1 、jade中的 if 使用

html
  head
  body
      -var a = 15;
      -if(a%2==0)
        div(style={background:'red'}) 偶数
      -else
        div(style={background:'green'}) 奇数
        

4.2 、jade中的 switch 使用

    html
      head
      body
          -var a = 3;
          case a
            when 0
              div aaa
            when 1
              div bbb
            when 2
              div ccc
            when 3
              div ddd
            default
              |默认
              

在jade中,switch是不存在的,被转义成了case,使用方法跟switch一致。
在该段代码中 “|”符号,是直接输出后面数据, "-"号之后的语句,jade会默认为是逻辑执行代码语句,之后的语句它并不会要求每行都需要添加"-"符号。

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看