標籤：style blog http color io os 使用 ar for
【介紹】
做一個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"
node.js--圖片上傳及顯示
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
