在线html转jade工具>>

注意:以下是在Windwo环境下

运行:

npm install jade

然后你的目录node_modules下将增加jade文件夹

app.js

var express = require("express");
var app = express(); //指定模板引擎
app.set("view engine", 'jade');  //指定模板位置
app.set('views', __dirname + '/views'); //利用模板文件home.jade渲染为html
app.get("/", function(req, res) {
res.render('home.jade', {
name: 'tinyphp'
});
}); var server = app.listen(3000, function() {
console.log("请在浏览器访问:http://localhost:3000/");
});

home.jade,模板写法可参考官方:http://naltatis.github.io/jade-syntax-docs/

doctype html
html
head
title my jade template
body
p Hi #{name}

node下app.js后,访问:http://localhost:3000/

上面不想手动创建文件夹和文件的,可以参考以下命令:

新建文件夹

mkdir views

新建文件

cd.>home.ejs

想必聪明的你会发现jade和ejs上调用过程是一样的,只是模板的写法不同。

拽此查看ejs的例子>>

express结合jade模板渲染HTML的更多相关文章

  1. express结合EJS模板渲染HTML

    注意:以下是在Windwo环境下 运行: npm install ejs 然后你的目录node_modules下将增加ejs文件夹 app.js var express = require(" ...

  2. Express框架之Jade模板引擎使用

    日期:2018-7-8  十月梦想  node.js  浏览:2952次  评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...

  3. Express全系列教程之(十):jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...

  4. nodejs学习(二) ---- express中使用模板引擎jade

    系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...

  5. 【nodejs笔记3】Express基本用法,和路由控制,和模板渲染ejs

    1. 路由控制的工作原理 //routes/index.js中的代码//访问主页时,调用ejs模板引擎,渲染index.ejs模板文件,生成静态页面,并显示在浏览器中.router.get('/', ...

  6. Express开发实例(2) —— Jade模板引擎

    前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...

  7. jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  8. express框架结合jade模板引擎使用

    在views文件夹里新建一个jade.jade文件作为模板: html head title 哈哈 body #box ul li 标题1 li 标题2 li 标题3 li 标题4 #aside 在j ...

  9. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

随机推荐

  1. 取消div,a等标签点击效果

    当标签被设置onclick事件之后,在有些手机浏览器中,点击这些标签,会有点击变色效果.想要取消点击变色效果. 添加:div{-webkit-tap-highlight-color:rgba(0,0, ...

  2. java字节码指令列表(转)

    字节码 助记符 指令含义 0x00 nop 什么都不做 0x01 aconst_null 将null推送至栈顶 0x02 iconst_m1 将int型-1推送至栈顶 0x03 iconst_0 将i ...

  3. POJ-2563

    Pick-up sticks Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 10364   Accepted: 3842 D ...

  4. Pycharm5注册方式 @LYRE}}(T1[DD[@81IZDU$A

    0x1 ,安装 0x2 , 调整时间到2038年. 0x3 ,申请30天试用 0x4, 退出pycharm 0x5, 时间调整回来. 注册方法2:    在 注册时选择 License server ...

  5. 启动WAMPSERVER出现计算机中丢失 MSVCR110.dll

    最近电脑因为系统损坏无法启动,不得已重装系统,也让PHP程序员雷雪松下决心坚决的抛弃XP系统.这样一来跟上时代的步伐,二来也为Win7的市场占有率和消灭IE7以下浏览器做点贡献.,作为一个PHP程序员 ...

  6. C++ 取整数学函数

    C++ 取整数学函数 将浮点数取整或者四舍五入的数据处理情况经常见到,下面做一下总结. 注意:函数取整返回值均为 double 型,在用 printf 输出时应注意. 数学头文件 #include&l ...

  7. 【SQL】将特定的元素按照自己所需的位置排序

    Oracle中,平时我们排序常用“Order by 列名” 的方式来排序,但是有的时候我们希望这个列中的某些元素排在前面或者后面或者中间的某个位置. 这时我们可以使用Order by case whe ...

  8. Java 创建线程的方法

    为了偷懒少敲几个字这里我写了一个Util类: package test; public class Util { static void println() {System.out.println() ...

  9. CSU - 1337 (搞笑版费马大定理 )

    费马大定理:当n>2时,不定方程an+bn=cn没有正整数解.比如a3+b3=c3没有正整数解.为了活跃气氛,我们不妨来个搞笑版:把方程改成a3+b3=c3,这样就有解了,比如a=4, b=9, ...

  10. 调用sort段错误问题

    问题:sort的比较函数实现有问题导致进程调用sort时core了. 结论:特别要注意,sort的比较函数必须遵循严格弱排序(strict weak ordering)的规则.   这是最近在工作中遇 ...