Express开发实例(2) —— Jade模板引擎
前一篇通过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模板引擎的更多相关文章
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Express框架之Jade模板引擎使用
日期:2018-7-8 十月梦想 node.js 浏览:2952次 评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...
- 【转】在Express项目中使用Handlebars模板引擎
原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- 在express站点中使用ejs模板引擎
在express站点中使用ejs模板引擎 文/玄魂 目录 在express站点中使用ejs模板引擎 前言 1.1 安装 1.2修改app.js 1.3创建测试页面 前言 使用 vs创建 ...
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
- 初次入坑jade模板引擎(一)
最近由于工作需要全栈开发,nodejs做后端,在写一个后台管理系统的时候,我一直在考虑用怎样的方式去写,尝试过依然采用前后端分离的结构.使用json数据进行数据交互的模式,但是尝试过才知道,真的很花时 ...
随机推荐
- 使用Jayrock开源组件开发基于JSON-RPC协议的接口
最近接手一个以前的项目,无意间发现此项目开发接口的组件:Jayrock(接口组件估计用的少,用的最多的估计是这个Jayrock.json.dll,用于解析json) 以下是Jayrock的介绍官网: ...
- nand以及yaffs2
用的是tiny210+1312的SDK,友善之臂给的文件系统居然有300多兆,烧写系统可是要人命了,那个等啊...所以,想着把系统给做小一点.和其他一样,我的知识仅限于理论阶段,嘿嘿.今天实践一下. ...
- Java多线程实践
1.实现Runnable接口 import java.util.Random; public class PrintTask implements Runnable{ private final in ...
- [IOS Tableview] cell自定义view显示错误问题
问题介绍:按照tableviewcell的tag自定义cell的view显示的时候,会出现拖动时显示错误情况(在Tableview的范围超出屏幕范围需要滑动的情况下). 我做的是一个下载界面,我为了简 ...
- Entity Framework使用Sqlite时的一些配置
前段时间试着用Entity Framework for Sqlite环境,发现了一些坑坑洼洼,记录一下. 同时试了一下配置多种数据库,包括Sqlite.Sql Server.Sql Server Lo ...
- Beta Daily Scrum 第四天
[目录] 1.任务进度 2.困难及解决 3.燃尽图 4.代码check-in 5.站立会议图 6.总结 1. 任务进度 学号 今日完成 明日完成 612 完成成就界面的统计图表 继续编写成就界面的图表 ...
- 捉襟见肘之自定义自拍相机AVFoundation
因为上篇的问题的,我搜索到解决方法: http://stackoverflow.com/questions/5427656/ios-uiimagepickercontroller-result-ima ...
- IIS------Http错误:50019,由于权限不足无法读取配置文件
转载: http://niutuku.com/tech/2008/273661.shtml 注意:该用户名称必须是:Everyone
- 分页进阶--ajax+jquery+struts2
按照上次的分页逻辑,分页查询的业务大概需要几个“零件”:1.当前页:2.总页数:3.跳转页.后端需要处理的是:按照传送过来请求的页码返回相应地数据,并且接受初始化参数的请求:总页码.第一页的数据. 使 ...
- 关于敏捷开发方法(Agile Software Development)的阅读笔记
对“敏捷开发”(Agile Software Development)这个词,我是在这学期邹欣老师<现代程序设计>课上第一次听到的,刚听到时并不知道其具体指什么,只是从字面上直觉其意思应该 ...