前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板。

关于Jade的用法,网上有很多,本篇参考:Jade语法

安装相关模块

在实验代码前,应该先安装express和jade:

npm install express
npm install jade

简单介绍本篇使用的api

1 为了使用jade,先要设置express默认的模板引擎,用法如下:

app.set('view engine', 'jade');//设置默认的模板引擎

2 如果要进行样式的定义,就要创建静态文件目录,该目录中的内容,可以直接在浏览器中获取到:

app.use(express.static(路径));

比如路径为public,那么我们在访问localhost:3000/pubic/xxxx就可以得到相应的文件。

3 设置视图的对应目录

app.set('views',xxxx);

4 向特定路径的视图返回数据

res.render('视图的路径', { 返回的数据名称:返回的数据内容});

代码预览

创建index.js文件:

var express = require('express');//引入express模块
var app = express();//创建应用 //定义public路径
var pub = __dirname + '/public';
app.use(express.static(pub));//设置静态目录为pubic
app.set('views', __dirname + '/views');//设置views路径映射到views文件夹 app.set('view engine', 'jade');//设置默认的模板引擎 function User(name, email) {
this.name = name;
this.email = email;
} var users = [
new User('tj', 'tj@vision-media.ca'),
new User('ciaran', 'ciaranj@gmail.com'),
new User('aaron', 'aaron.heckmann+github@gmail.com')
]; app.get('/', function(req, res){
res.render('users/test', { users: users });
}); app.use(function(err, req, res, next) {
res.send(err.stack);
}); app.listen(3000);
console.log('Express started on port 3000');

这段代码首先创建了express的应用实例,然后设置相关的静态目录、视图目录、模板引擎等等。

然后创建了几个user对象,返回给特定的视图。

创建模板

创建模板index.jade,注意创建的模版中,只能使用空格来进行格式化。不能同时使用制表符和空格。

doctype html
html
head
title Jade Example
link(rel="stylesheet", href="/stylesheets/style.css") body
h1 Users
#users
for user in users
h2= user.name
.email= user.email

语法参考其他的Jade语法说明即可。

添加样式文件

在静态目录中,添加样式文件style.css:

body {
padding: 50px 80px;
font: 14px "Helvetica Nueue", "Lucida Grande", Arial, sans-serif;
}
.email{
color: blue;
}

文件目录

根目录myqq
\------node_modules
| \-------express
| \-------jade
|
\------public
| \------stylesheets
| \-------style.css
\------views
| \------test
| \------index.jade
index.js

执行node index既可运行样例。

Express开发实例(2) —— Jade模板引擎的更多相关文章

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

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

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

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

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

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

  4. 【转】在Express项目中使用Handlebars模板引擎

    原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...

  5. Jade 模板引擎使用

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

  6. 在express站点中使用ejs模板引擎

    在express站点中使用ejs模板引擎 文/玄魂 目录 在express站点中使用ejs模板引擎 前言 1.1         安装 1.2修改app.js 1.3创建测试页面 前言 使用 vs创建 ...

  7. Jade模板引擎使用详解

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

  8. nodejs jade 模板 引擎的使用方法

    1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...

  9. 初次入坑jade模板引擎(一)

    最近由于工作需要全栈开发,nodejs做后端,在写一个后台管理系统的时候,我一直在考虑用怎样的方式去写,尝试过依然采用前后端分离的结构.使用json数据进行数据交互的模式,但是尝试过才知道,真的很花时 ...

随机推荐

  1. 使用Jayrock开源组件开发基于JSON-RPC协议的接口

    最近接手一个以前的项目,无意间发现此项目开发接口的组件:Jayrock(接口组件估计用的少,用的最多的估计是这个Jayrock.json.dll,用于解析json) 以下是Jayrock的介绍官网: ...

  2. nand以及yaffs2

    用的是tiny210+1312的SDK,友善之臂给的文件系统居然有300多兆,烧写系统可是要人命了,那个等啊...所以,想着把系统给做小一点.和其他一样,我的知识仅限于理论阶段,嘿嘿.今天实践一下. ...

  3. Java多线程实践

    1.实现Runnable接口 import java.util.Random; public class PrintTask implements Runnable{ private final in ...

  4. [IOS Tableview] cell自定义view显示错误问题

    问题介绍:按照tableviewcell的tag自定义cell的view显示的时候,会出现拖动时显示错误情况(在Tableview的范围超出屏幕范围需要滑动的情况下). 我做的是一个下载界面,我为了简 ...

  5. Entity Framework使用Sqlite时的一些配置

    前段时间试着用Entity Framework for Sqlite环境,发现了一些坑坑洼洼,记录一下. 同时试了一下配置多种数据库,包括Sqlite.Sql Server.Sql Server Lo ...

  6. Beta Daily Scrum 第四天

    [目录] 1.任务进度 2.困难及解决 3.燃尽图 4.代码check-in 5.站立会议图 6.总结 1. 任务进度 学号 今日完成 明日完成 612 完成成就界面的统计图表 继续编写成就界面的图表 ...

  7. 捉襟见肘之自定义自拍相机AVFoundation

    因为上篇的问题的,我搜索到解决方法: http://stackoverflow.com/questions/5427656/ios-uiimagepickercontroller-result-ima ...

  8. IIS------Http错误:50019,由于权限不足无法读取配置文件

    转载: http://niutuku.com/tech/2008/273661.shtml 注意:该用户名称必须是:Everyone

  9. 分页进阶--ajax+jquery+struts2

    按照上次的分页逻辑,分页查询的业务大概需要几个“零件”:1.当前页:2.总页数:3.跳转页.后端需要处理的是:按照传送过来请求的页码返回相应地数据,并且接受初始化参数的请求:总页码.第一页的数据. 使 ...

  10. 关于敏捷开发方法(Agile Software Development)的阅读笔记

    对“敏捷开发”(Agile Software Development)这个词,我是在这学期邹欣老师<现代程序设计>课上第一次听到的,刚听到时并不知道其具体指什么,只是从字面上直觉其意思应该 ...