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语法 安装相关模块 在实验代码前,应该先安 ...
随机推荐
- python3 安装 basemap 包（windows10）
下载 pyproj 和 basemap 的安装包 basemap 是具有专业标准的地图绘制工具,可以与 matplotlib 的一般绘图功能结合,在地图上绘制数据. basemap 文档:https: ...
- EmWin 文本显示函数
函数模型----------------------------------- 1:void GUI_DispChar(U16 c): 在当前窗口的当前文本位置处,使用当前字体显示单个字符. c ...
- vb编程中的is是什么意思？？
在select case 语句中可以使用关系运算符大于>小于<等于=等关系运算符,需要用关键字IS和TO.用个例子来说明:Private Sub Command1_Click()Dim a ...
- PHP爬虫百度图片
php pacong_1.php "酒","电报","电表","电波","电厂","电场& ...
- Windows上Kafka运行环境安装
1. 安装JDK 1.1 安装文件:http://www.oracle.com/technetwork/java/javase/downloads/index.html 下载JDK1.2 安装完成后需 ...
- Python爬虫学习--用Python结合Selenium实现 明日之子节目直播时为自己喜欢的选手自动点赞拉票！！！
声明:本脚本纯属娱乐,请勿用来非法点赞拉票,任何使用不当造成的后果自行承担. 闲话: 明日之子第二季开始好久了,作者一直再追,特别喜欢里面那个酷酷的小哥-蔡泽明.前两天晋选9大厂牌,采取的是直播的形式 ...
- sublime text3中sass编译后保存到指定文件夹
第一步: tools->builde system->new build system 第二步: 粘贴如下代码到新建文档中: { "cmd": ["sass& ...
- 关于numpy.maximum函数的测试
atr.py import numpy as np a = np.arange(9)print("a:",a)print(a[0:3])print(a[3:6])print(a[6 ...
- 别人的Linux私房菜（20）启动流程、模块管理与Loader
系统启动时,首先加载BIOS,通过BOIS读取COMS的硬件信息,进行自我检测,取得第一个可启动的设备(多个根据设置有关). 读取并执行设备内的MBR启动引导程序,引导程序调用boot sector中 ...
- SAS 选取部分观测
SAS 对部分观测得处理 在建立新数据集时,有以下两种方式可以从已经存在的数据集中选取观测到新数据集中. ·通过删除不满足条件的观测来保留想要的观测. ·仅接受满足条件的观测. 条件可以由IF语句. ...