您的当前位置：首页正文

Jade进阶使用

来源：爱够旅游网

作者：短工邦技术部 - 陈文哲

Jade优点

要使用Jade，其实不是那么容易接受的，几个优点我列出来。
1. 熟悉的话，开发确实比较快，适合全栈开发。
2. 强制使用缩进，但比较简洁，也不像html又要写开头又要写结尾。
3. 模板继承方便

新的目录结构

views
- includes //公用
  - head.jade
  - header.jade
- pages //放置页面
  - index.jade
- layout.jade
app.js

app.js

首先app.js做一些变化，伪造一个数组遍历给视图（往后接入数据库交互，就是操作这些数据。）

var express = require('express')
var port = process.env.PORT || 3000
var app = express()

app.set('views','./views/pages')        //设置视图目录
app.set('view engine','jade')           //设置默认的模板引擎
app.listen(port)                        //监听

console.log("启动服务")

app.get('/',function(req,res) {
    res.render('index',{
        title:'短工邦技术部',
        Members:[
            {
                Name:'陈文哲',
                Job:'负责人'
            },
            {
                Name:'陈文超',
                Job:'技术经理'
            },
            {
                Name:'黄俊贤',
                Job:'设计师'
            },
            {
                Name:'罗辙',
                Job:'平面设计师'
            },
            {
                Name:'吴涛',
                Job:'iOS开发工程师'
            },
            {
                Name:'陈恩湖',
                Job:'iOS开发工程师'
            },
            {
                Name:'陈精松',
                Job:'Web开发工程师'
            },
            {
                Name:'郑炫松',
                Job:'Web开发工程师'
            },
            {
                Name:'李嘉',
                Job:'Web开发工程师'
            }
        ]
    })
})

includes

head.jade代码如下

script(src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js")
//其他任何共同放在<head></head>的代码

header.jade代码如下

.header
    h1 #{title}
    small 广州领聘信息科技有限公司

layout.jade

layout用来组织includes的文件，然后被具体页面所调用。（人为规范这样子使用而已）

doctype
html
    head
        meta(charset="utf-8")
        title #{title}
        include ./includes/head
    body
        include ./includes/header
        block content

index.jade

使用模板继承，模块清晰，简洁，也容易维护。

extend ../layout

block content
    table
        tr
            td 姓名
            td 职位
        each item in Members
            tr
                td #{item.Name}
                td #{item.Job}

重启服务，效果如下

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文