专栏首页十月梦想Express框架之Jade模板引擎使用

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 条评论
登录 后参与评论

相关文章

  • node读取目录下文件,筛选文件夹和文件!

    node也学习了几天,今天讲解一下刚学习的小案例!使用fs模块fs.readdir读取只能目录下文件,筛选文件和文件夹

    十月梦想
  • HTML的行元素和块元素

    本博客所有文章如无特别注明均为原创。作者:十月梦想 ,复制或转载请以超链接形式注明转自 十月梦想博客 。 原文地址《HTML的行元素和块元素》

    十月梦想
  • php循环

    十月梦想
  • 老男孩Python全栈开发(92天全)视频教程 自学笔记15

    玩蛇的胖纸
  • 模型评估思维导图

    “虽然没有人这样说,但我认为人工智能几乎是一门人文学科。这是一种试图理解人类智力和人类认知的尝试。”

    统计学家
  • 改善时序的方法

    时序约束的目的本质上是通过时序约束对Vivado的布局和布线过程进行干预,也就通过Vivado工具重新规划设计中所有功能单元的位置,以及布局的策略。 时序约束...

    瓜大三哥
  • 即时通信 IM 产品怎么选? 本文超详细解说,马住!

    即时通信产品的选择难题 即时通信产品越来越深入人心,开源开放的生态圈、先天的云化架构等众多好处吸引着越来越多的企业用户,市场诞生了众多专业的即时通信厂商和服务...

    腾讯即时通信IM
  • 关于ASP.NET MVC中使用Forms验证的问题

    表单验证(Forms验证)是一个基于票据(ticket-based)[也称为基于令牌(token-based)]的系统。这意味着当用户登录系统以后,他们得到一个...

    徐大嘴
  • START GROUP_REPLICATION可以将恢复凭据作为参数

    从MySQL 8.0.21开始,START GROUP_REPLICATION包含新选项,允许用户指定用于分布式恢复的凭据。现在,用户可以在调用START GR...

    MySQLSE
  • 芒果tv在miniblink无法显示的bug分析

    http://www.mgtv.com/pcclient/tv/里用了window.external,

    龙泉寺扫地僧

扫码关注云+社区

领取腾讯云代金券