日期：2018-7-8  十月梦想  node.js  浏览：2952次  评论：0条

前段时间讲说了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!

Express框架之Jade模板引擎使用的更多相关文章

  1. express框架结合jade模板引擎使用

    在views文件夹里新建一个jade.jade文件作为模板: html head title 哈哈 body #box ul li 标题1 li 标题2 li 标题3 li 标题4 #aside 在j ...

  2. express框架结合ejs模板引擎使用

    我们在项目里建立一个views文件夹(必须),如果你不想使用views文件夹的话需要调用app.set("views","自定义文件夹名"),然后在里面建立一个 ...

  3. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  4. Jade模板引擎使用详解

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  5. jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  6. Express全系列教程之(十)：jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...

  7. nodejs jade 模板 引擎的使用方法

    1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...

  8. Ci框架整合smarty模板引擎

    Ci框架整合smarty模板引擎 备注:下载smarty时,最好选择2.6版本,其他测试有坑,ci可以是2.2或其他 大体思路:将smarty封装成ci框架的一个类,然后重新配置一下smarty,这样 ...

  9. Express开发实例(2) —— Jade模板引擎

    前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...

随机推荐

  1. EF + mysql 异常：Unable to load the specified metadata resource

    数据库连接字符串报错, <add name="xxxx" providerName="MySql.Data.MySqlClient" connection ...

  2. paxos made more simple

    paxos算法是进入分布式领域的一块基石,有关paxos的讨论有很多精彩的详细论述,很多牛人不惜宝贵时间以大幅详尽段落叙述.感谢他们,paxos more simple 理解paxos前,我建议以面到 ...

  3. Django 中文和时区设置

    Django 语言和时区的设置都在 settings.py 文件中. 中文设置 LANGUAGE_CODE:设置语言,英语 en-us,中文简体 zh-Hans,中文繁体 zh-Hant 在 MIDD ...

  4. Appium+Python自动化 3 -获取 app 包名和 activity

    方法一: ①手机通过USB连接电脑 ②打开手机上被测app ③在电脑上 dos命令窗口,输入命令 adb shell dumpsys window w | findstr \/ | findstr n ...

  5. python语法之函数2

    高阶函数: def f(n): return n*n def foo(a,b,func): func(a)+func(b) ret=func(a)+func(b) return ret foo(1,2 ...

  6. 现网环境业务不影响，但是tomcat启动一直有error日志，ERROR org.apache.catalina.startup.ContextConfig- Unable to process Jar entry [module-info.class] from Jar [jar:file:/home/iufs/apache-tomcat/webapps/iufs/WEB-INF/lib/asm

    完整的错误日志信息: 2019-03-19 15:30:42,021 [main] INFO org.apache.catalina.core.StandardEngine- Starting Ser ...

  7. idea配置.gitignore后无法起作用

    1)要先进入项目包所在的文件夹 2)git rm -r --cached . ://后面有个点3)git add . ;后面有个点4)git commit -m  "update .giti ...

  8. GitHub上最受欢迎的 5 大 Java 项目

    1. Mockito Mockito 并不是无酒精混合饮料的意思.Mockito 是一个针对 Java 的 mocking 框架.它与 EasyMock 和jMock 很相似,但是通过在执行后校验什么 ...

  9. linux shell 变量子串

    linx变量子串 在本例子中,变量 test=https://www.//cnblogs./com//jjmaokk/p/10135401.html 1,${#parameter} 返回变量$para ...

  10. redis操作（String，Hash，List，Set，其他操作）

    一.String操作 String操作,redis中的String在在内存中按照一个name对应一个value来存储.如图: set(name,value,ex=None,px=None,nx=Fal ...