在线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. 关于IE8版本提示“不支持‘trim’此属性或者方法”的解决办法。转摘雨网络

    在js文件的前面加 String.prototype.trim = function () { return Trim(this); }; function LTrim(str) { var i; f ...

  2. vue的data用到this问题

    问题:在vue中用vue-awesome-swiper,在data中初始化,用到swiper一个方法onTap,然后再调vue的一个函数,用到this,可是... data() { return { ...

  3. Windows下修改oracle实例不随服务自动启动

    设置Oracle Administration Assistant for Windows 开始->所有程序->Oracle - OraDb10g_home1->配置和移植工具-&g ...

  4. Leetcode 之Wildcard Matching(32)

    跟上题类似,主要考虑‘*’的匹配问题.如果遇到‘*’,则跳过继续匹配,如果不匹配,则s++,重新扫描. bool isMatch2(const char *s, const char *p) { if ...

  5. python 结束练习

    1.文件操作有哪些模式?请简述各模式的作用 r 只读模式 r+ 读写 rb w 只写模式 w+ 写读 wb x 只写模式 x+ 写读 xb a 追加模式 a+ 写读 ab 2.s = '**hello ...

  6. POJ 2912 Rochambeau(种类并查集+枚举)

    题目链接:http://poj.org/problem?id=2912 题目大意:n个人玩,玩石头剪刀布游戏,其中1人是裁判,剩下的n-1个人分为3组, 他们商量好了,相同组的人每次都出相同的手势,不 ...

  7. 深度学习方法:受限玻尔兹曼机RBM(三)模型求解,Gibbs sampling

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入. 接下来重点讲一下RBM模型求解 ...

  8. Excel Sheet Column Title&&Excel Sheet Column Number

    Excel Sheet Column Title Given a positive integer, return its corresponding column title as appear i ...

  9. 走进 Akka.NET

    官方文档:https://getakka.net/index.html 官网:https://petabridge.com/ 一.Akka.NET 是什么? Akka 是一个构建高并发.分布式和弹性消 ...

  10. Nmap误报1720端口开放的原因

    在使用Nmap扫描服务器开放端口(全连接扫描)时,一直会发现误报1720端口开放,telnet也有时会连接成功.而实际上服务器并未开启此端口.经过查阅资料,确定原因如下: H.323协议在负载中放入了 ...