在线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. sicily 1016. 排队接水--课程作业

                                                                                    1016. 排队接水 Time Limi ...

  2. HDU 6146 Pokémon GO DP,计数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6146 题意:~ 解法:原题..http://blog.csdn.net/y990041769/arti ...

  3. 【LabVIEW技巧】LabVIEW OOP怎么学

    前言 有很多人对LabVIEW OOP存在比较极端的看法,大致分为两类: 1. 绝对否定派认为LabVIEW OOP只不过是LabVIEW为了追求时髦,在面向过程的基础上用簇做了一些特性,实际上完全不 ...

  4. Android UI 设计:pixel dip dpi sp density

    1. px (pixels)像素 – 是像素,就是屏幕上实际的像素点单位. dip或dp (device independent pixels)设备独立像素,与设备屏幕有关. sp (scaled p ...

  5. java的collection集合

    # 原创,转载请先留言 1.集合的由来 数组的长度是固定的,当需要增加或减少元素时需要对数组重新定义,太麻烦了.java内部给我们提供了集合类,能存储任意对象,长度可以改变的,随着元素的增加而增加,随 ...

  6. CountDownLatch源码浅析

    Cmd Markdown链接 CountDownLatch源码浅析 参考好文: JDK1.8源码分析之CountDownLatch(五) Java并发之CountDownLatch源码分析 Count ...

  7. 用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...

  8. Flask 知识总结

    阅读目录 第一篇:Flask基础知识介绍 第二篇:Flask扩展小结 第三篇:Flask 配置文件 第四篇:ORM.MySQL数据库连接池 第五篇:单例模式.蓝图Blueprint 第六篇:SQLAL ...

  9. 树莓派使用opencv

    安装 reference1 reference2 注意 安装顺利,但是使用的时候提示 you need install libgtk2.0-dev xxx ,这时候说明你安装的库的顺序不对,你应该先安 ...

  10. [转载] 更改pip源至国内镜像,显著提升下载速度

    原文地址: https://blog.csdn.net/lambert310/article/details/52412059 经常在使用python的时候需要安装各种模块,而pip是很强大的模块安装 ...