Express框架之Jade模板引擎使用
日期: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模板引擎使用的更多相关文章
- express框架结合jade模板引擎使用
在views文件夹里新建一个jade.jade文件作为模板: html head title 哈哈 body #box ul li 标题1 li 标题2 li 标题3 li 标题4 #aside 在j ...
- express框架结合ejs模板引擎使用
我们在项目里建立一个views文件夹(必须),如果你不想使用views文件夹的话需要调用app.set("views","自定义文件夹名"),然后在里面建立一个 ...
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
- Ci框架整合smarty模板引擎
Ci框架整合smarty模板引擎 备注:下载smarty时,最好选择2.6版本,其他测试有坑,ci可以是2.2或其他 大体思路:将smarty封装成ci框架的一个类,然后重新配置一下smarty,这样 ...
- Express开发实例(2) —— Jade模板引擎
前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...
随机推荐
- Maven 生成可执行的jar包
maven 默认打包生成的 jar 包是不能够直接运行的,因为带有 main 方法的类信息不会添加到 manifest 中,即打开 jar 文件中的 META-INF/MANIFEST.MF 文件,将 ...
- python3 第三十章 - 内置函数之Dictionary相关
Python字典包含了以下内置函数: 序号 函数及描述 实例 1 len(dict)计算字典元素个数,即键的总数. >>> dict = {'Name': 'cnblogs', 'A ...
- SHELL脚本学习-定时检查Oracle alert日志并发送mail
对于DBA来说,检查alert日志是日常工作.告警日志日积月累往往很大,而且每次在服务器上查看或者下载到目标主机查看都十分不方便. 为了方便,以下做出两种情况:(其他情况类推) 第一场景:每天早上上班 ...
- Percona XtraBackup使用说明(转)
Percona XtraBackup使用说明 转载出自: https://blog.csdn.net/wfs1994/article/details/80396604 XtraBackup介绍 Per ...
- chrome gps位置模拟设置
chrome gps位置模拟设置 调试公众号页面定位,Edge 虽好实现方便,介于界面实在不符合我的调试习惯 遂上度娘寻觅chrome模拟GPS方法 找了好几个帖子,发现新版本已经不再试用.不得感叹 ...
- 【转】Android总结篇系列:Activity启动模式(lauchMode)
[转]Android总结篇系列:Activity启动模式(lauchMode) 本来想针对Activity中的启动模式写篇文章的,后来网上发现有人已经总结的相当好了,在此直接引用过来,并加上自己的一些 ...
- Open quote is expected for attribute "{1}" associated with an element type "column".
这个的错误的意思很简单:就是自己的配置文件是否缺少""号
- 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 ...
- 20155312 张竞予 Exp7 网络欺诈防范
Exp7 网络欺诈防范 目录 基础问题回答 (1)通常在什么场景下容易受到DNS spoof攻击 (2)在日常生活工作中如何防范以上两攻击方法 实验总结与体会 实践过程记录 (1)简单应用SET工具建 ...
- 使用kbmmw 实现图形验证码
首先感谢图形验证码的提供者 晴空无彩虹 https://blog.csdn.net/u011784006/article/details/80827181 他用FMX 实现了验证码的生成,我修改成 ...