简单的 Nodejs jade 实现Hello world

更多功能可去github查看下载

首先要安装几个扩展这里不讲怎么装了。

文件结构如下：

一定要注意路径

server.js

'user strict'

var port = 8888;
const express = require('express'),
  app = express(),
  bodyParser = require('body-parser'),
  path = require('path'),
  fs = require('fs');;

app.set('views','./static/pages');
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname,'./static')));

app.get('/image', function (req, res) {
  var files =fs.readdirSync('./static/images');
  res.render('index',{  
    title:'标题' , 
    contentTitle: 'Hello World', 
    imgs:files,  
    description:'我的图片'  
  })  
});

app.get('*', function(req, res){  
  res.render('404',{})  
});

var server = app.listen(port, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log("网址访问路径 http://%s:%s", host, port);
});

注意语句 block content

layout.jade

doctype  
html  
  head  
    meta(charset='utf-8')  
    title #{title}  
    include ./head
  body

    block content 

专门建了一个head 来放样式

head.jade

link(href="/css/main.css" rel='stylesheet')  

index.jade

extends ../layout  
block content  
  h1 #{contentTitle} 
  p #{description}  
  each img in imgs  
      img(src="images/#{img}" class="row-img")

（可以加一个放js的地方，与css类似，此处不多说啦。）

main.css

h1 {
  color: red;
}
.row-img {
  width:140px;
  height:140px;
  margin:5px
}

代码写完了，命令行进入项目server.js 所在目录

node server.js

打开浏览器查看

http://127.0.0.1:8888/image