Jade进阶使用

最新推荐文章于 2019-04-14 14:30:00 发布

短工邦

最新推荐文章于 2019-04-14 14:30:00 发布

阅读量1k

点赞数 2

分类专栏： Parse 文章标签： Jade

本文链接：https://blog.csdn.net/duangongbang/article/details/51207840

版权

Parse 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

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}

重启服务，效果如下
这里写图片描述

短工邦

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jade进阶使用

作者：短工邦技术部 - 陈文哲Jade优点要使用Jade，其实不是那么容易接受的，几个优点我列出来。 1. 熟悉的话，开发确实比较快，适合全栈开发。 2. 强制使用缩进，但比较简洁，也不像html又要写开头又要写结尾。 3. 模板继承方便新的目录结构
复制链接

扫一扫

专栏目录