Express框架之Jade模板引擎使用

前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合express框架如何使用jade!

首先使用jade需要在node_moudles中安装jade

npm i jade  --save

在nodejs文件中使用jade无需像原生一样使用require("jade")引入,但需要一下设置

//引用jade
app.engine('jade', require('jade').__express);
app.set("view engine","jade");

然后和使用ejs模板引擎差不多,进行呈递这个模板引擎文件

    app.get("/",function(req,res){
    res.render("haha",{
        a:5,
        jobs:["北京","上海","深圳","许昌","五道口职业技术学院","加利福尼亚州"]
    });
})

使用render先去呈递模板引擎,然后设置需要渲染的数据内容

基础语法:

接下来看一下jade文件基础语法

  html(lang="en")
head
    title jade模板引擎页面
    body
        h1 jade真强呀!

渲染后效果其实就这个样子,没有标签,也没有闭合,类似于Python语法使用缩进

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <h1>jade真强呀!</h1>
</body>
</html>

变量渲染:

基础语法了解后我们看一下怎么去呈递一个变量

html(lang="en")
head
    title jade模板引擎页面
    body
        h1 jade真强呀!
        ul
            li 哈哈哈
            li 今天是 #{a} 月
            li 这是一个li
            li jade虽然不易懂,但是很强大;安排!
        ul

上面小例子看到呈递变量很简单 使用#{变量名称}

循环:

接下来我们看一下如何实现for循环

html(lang="en")
head
    title jade模板引擎页面
    body
        h1 jade真强呀!
        ul
            li 哈哈哈
            li 今天是 #{a} 月
            li 这是一个li
            li jade虽然不易懂,但是很强大;安排!
            
        ul

            each job in jobs
                li= job

这里的循环使用的是 each ....  in.....

job指传递数组中的一个元素,而jobs是传递的整个数组,循环后job内弄填充每个li

当然这个jobs数组是在nodejs内,我们也可以将这个数组直接在jade文件中声明

-var jobs=["北京","上海","深圳","许昌","五道口职业技术学院","加利福尼亚州"];
 each job in jobs
                li= job

这样就在jade渲染了数据 在声明变量时候使用前加-

对象转换:

我们接下来看一下对象类型转换

     h1 张三个人信息
    ul
        each val,key ininfo
            li #{key}:#{val}

同样使用each  ...  in..进行渲染数据,当然也是可以加-在jade进行声明数据;

整个渲染出html效果如下

总之jade的效率还是很棒的;习惯之后会爱不释手

,今天这个jade的简单应用介绍到这里!有机会继续讨论(TuCao)这个jade!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏祝威廉

Spark Streaming 1.6 流式状态管理分析

在流式计算中,数据是持续不断来的,有时候我们要对一些数据做跨周期(Duration)的统计,这个时候就不得不维护状态了。而状态管理对Spark 的 RDD模型是...

772
来自专栏北京马哥教育

shell十三问,为linux学习打基础(二)

本文整理并转自CU上的帖子[学习共享] shell 十三問?,此贴是2003年发表的,但却是相当不错的linux基础知识汇集贴,原帖主使用的台湾风格,本文加以简...

4004
来自专栏静晴轩

IOS 8 Safari JIT bug影响jQuery和underscore

前端时间为移动游戏做一个网页活动需求(9宫格的刮奖),遇到一个很诡异的问题:Android端OK,就是在Ios设备上,点击非第一块区域,显示却是第一块区域被刮开...

3606
来自专栏大内老A

我所理解的Remoting(2):远程对象生命周期的管理[上篇]

1.CLR的垃圾回收机制 在.NET中提到对象的生命周期,我们会不由自主地想到CLR的垃圾回收。在运行一个.NET程序过程中,我们通过某种方式,比如通过new操...

1997
来自专栏大数据挖掘DT机器学习

Python]新手写爬虫全过程(已完成)

今天早上起来,第一件事情就是理一理今天该做的事情,瞬间get到任务,写一个只用python字符串内建函数的爬虫,定义为v1.0,开发中的版本号定义为v0.x。数...

3979
来自专栏更流畅、简洁的软件开发方式

实体类的变形【2】—— 行列转换

    上次说了一下在网页里面显示列表数据的情况,这个应用范围太小了,添加、修改怎么办呢?网站的后台管理、OA、CRM等怎么办?还是这样处理显然是不行的。...

2399
来自专栏Java架构师历程

安卓 jni 开发错误 UnsatisfiedLinkError: Native method not found

很明显是因为 native 方法找不到,google 下发现该错误出现频率还蛮高的,基本有两种:

2664
来自专栏灯塔大数据

每周学点大数据 | No.67 Hadoop 实践案例——记录去重

No.67 Hadoop 实践案例——记录去重 Mr. 王:现在我们看一个和 WordCount 很相似,在实际中应用也很多的例子——记录去重。 小可 :嗯,...

3348
来自专栏我杨某人的青春满是悔恨

设计模式之结构型模式(上)

GoF 归纳整理的23个设计模式依据其目的可以分为创建型(Creational)、结构型(Structural)和行为型(Behavioral)三种。关于创建型...

963
来自专栏从流域到海域

《笨办法学Python》 第1课手记

《笨办法学Python》第1课手记 在powershell中打开Python输入如下代码: print "Hello World!" print "Hello...

2207

扫码关注云+社区

领取腾讯云代金券