【介绍】
做一个demo，页面上传图片和图片名称，然后显示出上传的图片及其名称(使用jade模板)
【问题】
1.jade模板如何安装？
2.jade模板怎么使用，语法规则？
3.代码逻辑？
1.jade模板如何安装？
jade模板的安装很简单，只需要在指定路径下执行命令 npm install jade
安装之后是这样的（下图），文件路径下node_modules也出现jade
2.jade模板语法
jade是一个模板引擎，使用一定的语法规则写出html页面，并可以把变量传入其中。写html页面的时候有一些规则：
(1)标签与子标签的关系。是通过空格来控制的，在其右侧的全是它的子标签，当往下遇到一个与其同列的标签时，表示标签闭合。
(2)标签的书写。在jade里面，html表示的是<html></html>
(3)id和class。在jade中，普通的html语句<div id="contain" class="main other-class"></div>被改写成
div#contain.main.other-class
(4)属性。在jade中，属性值是写在括号里面的，像<link rel="stylesheet" href="static/style.css">被改写成
link(rel="stylesheet", href="statc/style.css")
3.代码逻辑
(1)编辑页面index.jade和show.jade，index.jade是form表单页面，show.jade是展现图片页面
index.jade
html
head
meta(charset="utf-8")
title choose a picture
body
form(ENCTYPE="multipart/form-data", action="upload", method="POST")
input(type="file" name="theImage")
input(type="submit" value="上传图片")
show.jade
html
head
meta(charset="utf-8")
title show image
body
div
p.title 图片展示
img.image(src="#{imageURL}")
(2)逻辑处理server.js
1.require使用到的模块。
2.编写服务器，res对象添加render函数，用来解析jade，输出页面。
3.路由实现。‘/‘展现index页面,‘/upload‘处理上传文件并展现show页面。
4.编写展现index页面和upload函数的逻辑
var http = require(‘http‘),
url = require(‘url‘),
fs = require(‘fs‘),
querystring = require(‘querystring‘),
static_module = require(‘./node_modules/static_module/static_module‘),
jade = require(‘jade‘),
formidable = require(‘formidable‘);
http.createServer(function(req, res){
res.render = function(jadeTemplate, options){
var str = fs.readFileSync(jadeTemplate, ‘utf8‘);
var fn = jade.compile(str, {filename: jadeTemplate, pretty : true});
var page = fn(options);
res.writeHead(200, {‘Content/type‘ : ‘text/html‘}); //输出页面
res.end(page);
};
var pathname = decodeURI(url.parse(req.url).pathname);
if(pathname == ‘favicon.ico‘){
return;
}
switch(pathname){
case ‘/‘:
showIndex(req, res);
break;
case ‘/upload‘:
upload(req, res);
break;
default:
static_module.getStaticFile(pathname, res, req);
}
function showIndex(req, res){
res.render(‘index.jade‘, {});
};
function upload(req, res){
var form = new formidable.IncomingForm();
form.parse(req, function(error, fields, files){
var fileName = Date.parse(new Date()) + ‘-‘ + files.theImage.name;
fs.renameSync(files.theImage.path, __dirname + ‘/uploadFile/‘ + fileName);
res.render(‘show.jade‘, {‘imageURL‘ : ‘/uploadFile/‘ + fileName});
});
};
}).listen(1337);
static_module模块逻辑：
/**
*
* 定义全局常用变量
*/
var BASE_DIR = __dirname,
CONF = BASE_DIR + ‘/conf/‘,
STATIC = __dirname + ‘/../..‘,
CACHE_TIME = 60*60*24*365,
mmieConf;
/**
*
* require本模块需要的Node.js模块
*/
var sys = require(‘util‘),
http = require(‘http‘),
fs = require(‘fs‘),
url = require(‘url‘),
path = require(‘path‘);
mmieConf = getMmieConf();
/**
*
* 响应静态资源请求
* @param string pathname
* @param object res
* @return null
*/
exports.getStaticFile = function(pathname, res, req){
var extname = path.extname(pathname);
extname = extname ? extname.slice(1) : ‘‘;
var realPath = STATIC + pathname;console.info(realPath);
var mmieType = mmieConf[extname] ? mmieConf[extname] : ‘text/plain‘;
fs.exists(realPath, function (exists) {
if (!exists) {
res.writeHead(404, {‘Content-Type‘: ‘text/plain‘});
res.write("This request URL " + pathname + " was not found on this server.");
res.end();
} else {
var fileInfo = fs.statSync(realPath);
var lastModified = fileInfo.mtime.toUTCString();
/* 设置缓存 */
if ( mmieConf[extname]) {
var date = new Date();
date.setTime(date.getTime() + CACHE_TIME * 1000);
res.setHeader("Expires", date.toUTCString());
res.setHeader("Cache-Control", "max-age=" + CACHE_TIME);
}
if (req.headers[‘if-modified-since‘] && lastModified == req.headers[‘if-modified-since‘]) {
res.writeHead(304, "Not Modified");
res.end();
} else {
fs.readFile(realPath, "binary", function(err, file) {
if (err) {
res.writeHead(500, {‘Content-Type‘: ‘text/plain‘});
res.end(err);
} else {
res.setHeader("Last-Modified", lastModified);
res.writeHead(200, {‘Content-Type‘: mmieType});
res.write(file, "binary");
res.end();
}
});
}
}
});
}
//获取MMIE配置信息，读取配置文件
function getMmieConf(){
var routerMsg = {};
try{
var str = fs.readFileSync(CONF + ‘mmie_type.json‘,‘utf8‘);
routerMsg = JSON.parse(str);
}catch(e){
sys.debug("JSON parse fails")
}
return routerMsg;
}
另外：
(1)使用了静态文件管理模块 ./static_module.js，根据路径来读取到静态文件。
(2)图片的获得使用了formidable模块。
var formidable = require(‘formidable‘);
var form = new formidable.IncomingForm(); //不知道这是干啥的，就是new了一个formidable.IncomingForm()对象
form.parse(req, function(error, fields, files){//异步回调
console.info(files.image, files.image.path,files.image.name);
//依次是图片文件，图片文件路径，图片文件名称
});
(3)上传文件，form表单应该设置属性ENCTYPE="multipart/form-data"