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语法 安装相关模块 在实验代码前,应该先安 ...
随机推荐
- MySQL ERROR 1064(42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near
通常出现该错误的原因是使用了 MySQL 的保留字 解决方法是对使用的保留字使用反引号 (Tab键上面)
- python数据结构（二）------元组
元组是不可变序列,因此,元组的操作非常简单,本文就简单介绍一下,并解释下元组存在的意义: 2.2.1 元组的创建 2.2.2 tuple函数 2.2.3 基本元组操作 2.2.4 元组存在的意义 2. ...
- mysqlGTID主从配置
GTID主从简介 GTID是基于mysql生成的事务ID,由服务器ID和事务ID组成. 这个ID在主库及从库上都是唯一的. 这个特性可以让mysql的主从复制变得更加简单,一致性更加可靠. GTID优 ...
- java日期格式的常用操作
顾晓北 | 大侠五级 |园豆:9353 | 2016-08-04 16:17 其他回答(1) 0 public class DateUtils extends PropertyEditorSu ...
- [Ionic] Error: No provider for Http! Error: No provider for Http!
1. 打开src/app/app.module.ts 2. 在最上面导入 import{HttpModule} from '@angular/http'; 3. 在imports块中加入:HttpMo ...
- 阿里巴巴Java编码规范插件安装使用指南
编码规范插件安装使用指南 阿里技术公众号公布的<阿里巴巴Java开发规约>,瞬间引起全民代码规范的热潮,后又发布了PDF的终极版,大家踊跃留言,期待配套的静态扫描工具开放出来. 为了让开发 ...
- 用angular制作简单的选项卡
现在angular变得挺火热的,自己也去简单的学习了一下,学了几天下来觉得angular果然好用,但是现在只是停留在比较浅的层面上,要想学好angular还是得下一番功夫的.学了一点新知识就想和大家分 ...
- 4yue 22
1 # 1 . 进程 线程 协程 之间的相同点和不同点 #相同点:都能帮助我们实现并发操作,规避IO时间,提高执行效率 #进程:内存隔离 操作系统级别 可以利用多核(高计算) 计算机中资源分配的最小单 ...
- ubuntu18.04时区设置
1.运行命令 sudo tzselect 2.选择大区 选择亚洲Asia,继续选择中国China,最后选择北京Beijing 3.建立软链 ln -sf /usr/share/zoneinfo/Asi ...
- 修改云主机windows密码不生效
Step1:使用文本工具打开插件路径: 路径为:C:\Program Files\Cloudbase Solutions\Cloudbase-Init\Python\Lib\site-packages ...