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

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

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

  1. npm i jade  --save

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

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

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

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

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

基础语法:

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

  1.   html(lang="en")
  2. head
  3.     title jade模板引擎页面
  4.     body
  5.         h1 jade真强呀!

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

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5. </head>
  6. <body>
  7.  <h1>jade真强呀!</h1>
  8. </body>
  9. </html>

变量渲染:

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

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

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

循环:

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

  1. html(lang="en")
  2. head
  3.     title jade模板引擎页面
  4.     body
  5.         h1 jade真强呀!
  6.         ul
  7.             li 哈哈哈
  8.             li 今天是 #{a} 月
  9.             li 这是一个li
  10.             li jade虽然不易懂,但是很强大;安排!
  11.             
  12.         ul
  13.  
  14.             each job in jobs
  15.                 li= job

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

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

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

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

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

对象转换:

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

  1.      h1 张三个人信息
  2.     ul
  3.         each val,key ininfo
  4.             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. Maven 生成可执行的jar包

    maven 默认打包生成的 jar 包是不能够直接运行的,因为带有 main 方法的类信息不会添加到 manifest 中,即打开 jar 文件中的 META-INF/MANIFEST.MF 文件,将 ...

  2. python3 第三十章 - 内置函数之Dictionary相关

    Python字典包含了以下内置函数: 序号 函数及描述 实例 1 len(dict)计算字典元素个数,即键的总数. >>> dict = {'Name': 'cnblogs', 'A ...

  3. SHELL脚本学习-定时检查Oracle alert日志并发送mail

    对于DBA来说,检查alert日志是日常工作.告警日志日积月累往往很大,而且每次在服务器上查看或者下载到目标主机查看都十分不方便. 为了方便,以下做出两种情况:(其他情况类推) 第一场景:每天早上上班 ...

  4. Percona XtraBackup使用说明(转)

    Percona XtraBackup使用说明 转载出自: https://blog.csdn.net/wfs1994/article/details/80396604 XtraBackup介绍 Per ...

  5. chrome gps位置模拟设置

    chrome gps位置模拟设置 调试公众号页面定位,Edge 虽好实现方便,介于界面实在不符合我的调试习惯  遂上度娘寻觅chrome模拟GPS方法 找了好几个帖子,发现新版本已经不再试用.不得感叹 ...

  6. 【转】Android总结篇系列:Activity启动模式(lauchMode)

    [转]Android总结篇系列:Activity启动模式(lauchMode) 本来想针对Activity中的启动模式写篇文章的,后来网上发现有人已经总结的相当好了,在此直接引用过来,并加上自己的一些 ...

  7. Open quote is expected for attribute "{1}" associated with an element type "column".

    这个的错误的意思很简单:就是自己的配置文件是否缺少""号

  8. IMPLEMENTATION - Entity Framework Anti Pattern - High Performance EF

    Good about ORM Developer is free from building T-Sql on the database tier which is not their major a ...

  9. 20155312 张竞予 Exp7 网络欺诈防范

    Exp7 网络欺诈防范 目录 基础问题回答 (1)通常在什么场景下容易受到DNS spoof攻击 (2)在日常生活工作中如何防范以上两攻击方法 实验总结与体会 实践过程记录 (1)简单应用SET工具建 ...

  10. 使用kbmmw 实现图形验证码

    首先感谢图形验证码的提供者  晴空无彩虹  https://blog.csdn.net/u011784006/article/details/80827181 他用FMX 实现了验证码的生成,我修改成 ...