express结合jade模板渲染HTML

注意:以下是在Windwo环境下

运行:

npm install jade

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

app.js

var express=require("express");
var app=express();

//指定模板引擎
app.set("view engin",‘jade‘);
app.use(express.static(__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的例子>>

时间: 2024-08-08 14:55:19

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

express结合EJS模板渲染HTML

注意:以下是在Windwo环境下 运行: npm install ejs 然后你的目录node_modules下将增加ejs文件夹 app.js var express=require("express"); var app=express(); //指定模板引擎 app.set("view engin",'ejs'); app.use(express.static(__dirname+"/views")); //利用模板文件home.ejs渲染

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

系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.jade 和 footer.jade,下面教程会一步步创建) 页面解析出的样子如下图.完全是html标签 一.jade 模板引擎 介绍 模板引擎是一个库,或者一个使用一定的规则或者语言来解释数据并渲染视图的框架.模板引擎处理过的最终结果是一个视图页面,也就是html页面或者用户图形界面GUI.在MVC

【我的笔记BLOG3】Express基本用法,和路由控制,和模板渲染ejs

1. 路由控制的工作原理 //routes/index.js中的代码//访问主页时,调用ejs模板引擎,渲染index.ejs模板文件,生成静态页面,并显示在浏览器中.router.get('/', function(req, res) { //捕获访问主页的GET请求 res.render('index', { title: 'Express' }); }); 官方给出的写法是在 app.js 中实现了简单的路由分配,然后再去 index.js 中找到对应的路由函数,最终实现路由功能. 我们不

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

在views文件夹里新建一个jade.jade文件作为模板: html head title 哈哈 body #box ul li 标题1 li 标题2 li 标题3 li 标题4 #aside 在js里关联: var express = require("express"); var app = express(); var jade = require("jade"); app.engine("jade",jade.__express); a

Node.js开发入门—使用jade模板引擎

在"Node.js开发入门--Express安装与使用"里,我们曾经使用express generator创建了一个HelloExpress网站,express工具为我们生成了基本的目录结构.模板.stylesheet.routers等.虽然那只是一个简单的HelloWorld类的小东西,可里面包含的内容还是有些多了,为了更好的理解Express所支持的jade模板引擎的用法,我们这次提供一个手动创建的小网站,可以显示来访者的IP,并对访问进行计数. 安装jade npm instal

Jade 模板引擎使用

在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模板引用 (Extends) 在 Express 中调用 jade 模板引擎 var express = require('express'); var http = require('http'); var app = express(); app.set('view engine', 'jade'

Express 框架、模板,MongoDB数据库

今天跟大家分享的是Express框架.模板.MongoDB数据库:个人觉得很有用,希望能在大家做项目的的过程中能有所帮助. Express 模板 这是一个用户量较大的一个Node框架,提供了一整套的Node模板,在里面可以使用EJS模板引擎.. 基于 Node.js 平台,快速.开放.极简的 web 开发框架.(开发后端) Express的性能对Node没有影响,依然很高. 安装方法: 1. 全局安装express 和 express应用生成器 npm install express -g np

jade模板

jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index.jade       导出一个 index.html 没有压缩的 jade -P -w index.jade     -w  对文件实时编译 特殊的div .container p 巧巧 a(href='http://baidu.com', title='巧莉', data-uid='100') i

jade模板引擎

jade是使用JavaScript实现,可供nodejs使用的高性能模板引擎(性能高不高,有些争议.姑且称之为高性能吧!).模板引擎有很多,主要使用比较广泛的是jade和ejs,modejs项目默认使用jade作为模板引擎,我也就不多说了至于如何选择,还是得就事论事综合各种因素来考虑.在此不对优缺点进行分析.插一句嘴,ejs的语法更像jsp.asp这样的技术而jade更像python的语法风格,缩进来缩进去,有点绕.不过这并不影响代码的可读性(我是这么认为的).不管是jade还是ejs语法都比较