专栏首页xingoo, 一个梦想做发明家的程序员Express开发实例(2) —— Jade模板引擎

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既可运行样例。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Express开发实例(1) —— Hello,world!

    Express是NodeJs开发中最常用的基础模块。NodeJs本身有Http模块,但是易用性并不好,因此有人在此基础上开发了Express模块。 什么是...

    用户1154259
  • JDK并发包常用的知识图

    并发包需要注意的知识点 ? 集合类的体系结构 ?

    用户1154259
  • Mysql日志解析

    修改Mysql配置 Mysql配置地址为: C:\Program Files (x86)\MySQL\MySQL Server 5.5 如果无法修改可以把my....

    用户1154259
  • Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs

    前言   前面也学习了一些Node.js的基本入门知道,现在开始进入Web开发的部分;   Node.js提供了http模块,这个模块中提供了一些底层接口,可...

    Porschev
  • 可穿戴设备:不要纠结“可穿戴”

    塔勒布在《反脆弱》一书诠释了尼采的那句经典名言:“杀不死我的,使我更强大。” 过去人类一再诅咒的压力、混乱、波动和不确定……生命中的许多事物反而会受益于它们。借...

    企鹅号小编
  • 创业成败5要素,排第一的竟是时机

    创业公司成功的最大要素 是什么因素关系着公司的成与败。 根据直觉上的思考顺序,有下面这五大要素: 创意 团队执行力 商业模式 资金 时机 但是在这五大要素中,...

    杨熹
  • 模块式开发

    这两天看到同事的一个小工具,用的是模块式开发,也就是俗称的插件开发,用的是反射+接口的方式实现的。感觉挺好的,也就学习了一下,写个小Demo,在此记录下。 一、...

    逸鹏
  • tkinter打包成exe程序

    python脚本如果在没有安装python的机器上不能运行,所以将脚本打包成exe文件,降低脚本对环境的依赖性,同时运行更加迅速

    用户2398817
  • Python中的循环结构

    Python主要有for循环和while循环两种形式的循环结构,多个循环可以嵌套使用,并且还经常和选择结构嵌套使用。while循环一般用于循环次数难以提前确定的...

    Python小屋屋主
  • Python笔记:通过pydoc查看API文档

    例如我们搭建了python+selenium开发环境,如何才能快速查看本地webdriver的API文档呢。

    Altumn

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动