app.js

/* littleAlbum--.idea--controller（控制層相當于action層）--package.json--router.js--models（做事的是model層相當于dao層）--file.js--node_modules（引入的其他模塊）--public（靜態資源）--css--bootstrap.css--fonts--glyphicons-halflings-regular.ttf--images--404.jpg--js--npm.js--jquery-1.11.3.min.js--bootstrap.js--tempup--uploads（上傳的文件）--views（View層，數據通過ejs模版注入）--album.ejs--err.ejs--index.ejs--up.ejs--app.js--package.json */var express = require("express"); var app = express(); //控制器 var router = require("./controller");//引入的是文件夾，文件夾里面要有index.js或者package.json文件里面的入口js文件。//設置模板引擎 app.set("view engine", "ejs");//路由中間件，網址正好匹配上了public下面的文件（全路徑匹配），就直接返回。匹配不上就向下路由， app.use(express.static("./public"));//靜態頁面，靜態頁面里面的資源路徑如果與app.get()里面的路徑重復，就只走這里。資源圖片cssjs都是在public文件夾，頁面都是在views文件夾。//網址正好匹配上了uploads下面的文件（全路徑匹配），就直接返回。 app.use(express.static("./uploads"));//上面匹配了就停止，上面沒有匹配上，就跑到下面來匹配，首頁 app.get("/", router.showIndex);app.get("/:albumName", router.showAlbum);app.get("/up", router.showUp);app.post("/up", router.doPost); console.log(6);//404，上面都沒有匹配到就404頁面 app.use(function (req, res) {res.render("err"); });app.listen(3000);

router.js

/*** Created by Danny on 2015/9/22 15:30.*/ var file = require("../models/file.js"); var formidable = require('formidable'); var path = require("path"); var fs = require("fs"); var sd = require("silly-datetime");//首頁 exports.showIndex = function(req,res,next){console.log(1);/* 錯誤的：傳統思維，不是node的思維：res.render("index",{"albums" : file.getAllAlbums() getAllAlbums里面是異步的，不能這么寫，只能等這個異步執行完才行，就用回調函數}); *///這就是Node.js的編程思維，就是所有的東西，都是異步的//file函數的返回值通過回調函數實現。file.getAllAlbums(function(err,allAlabums){//實參回調函數的定義//err是字符串if(err){next(); //交給下面適合他的中間件return;}res.render("index",{"albums" : allAlabums});}) }//相冊頁 exports.showAlbum = function(req,res,next){console.log(2);//遍歷相冊中的所有圖片var albumName = req.params.albumName;//具體業務交給modelfile.getAllImagesByAlbumName(albumName,function(err,imagesArray){if(err){next(); //交給下面的中間件return;}res.render("album",{"albumname" : albumName,"images" : imagesArray});}); };//顯示上傳 exports.showUp = function(req,res){//中間件有req、resconsole.log(3);//命令file模塊（我們自己寫的函數）調用getAllAlbums函數//得到所有文件夾名字之后做的事情，寫在回調函數里面file.getAllAlbums( function(err,albums){res.render("up",{albums : albums} );}); };//上傳表單 exports.doPost = function(req,res){console.log(4);var form = new formidable.IncomingForm();form.uploadDir = path.normalize(__dirname + "/../tempup/");// '../表示向上回溯一級' form.parse(req, function(err, fields, files,next) {console.log(fields);console.log(files);//改名if(err){next(); //這個中間件不受理這個請求了，往下走return;}//判斷文件尺寸var size = parseInt(files.tupian.size);if(size > 2000){res.send("圖片尺寸應該小于1M");//刪除圖片 fs.unlink(files.tupian.path);return;}var ttt = sd.format(new Date(), 'YYYYMMDDHHmmss');var ran = parseInt(Math.random() * 89999 + 10000);var extname = path.extname(files.tupian.name);var wenjianjia = fields.wenjianjia;var oldpath = files.tupian.path ;var newpath = path.normalize(__dirname + "/../uploads/" + wenjianjia + "/" + ttt + ran + extname);fs.rename(oldpath,newpath,function(err){if(err){res.send("改名失敗");return;}res.send("成功");});});return; }

file.js

/*** Created by Danny on 2015/9/22 16:32.*/ var fs = require("fs");//這個函數的callback中含有兩個參數，一個是err //另一個是存放所有文件夾名字的array。 exports.getAllAlbums = function(callback){fs.readdir("./uploads",function(err,files){if(err){callback("沒有找到uploads文件",null);}var allAlbums = [];(function iterator(i){if(i == files.length){//遍歷結束，這個線程執行完畢， console.log(allAlbums);callback(null,allAlbums);//這個線程執行完畢調用回調函數。return;}fs.stat("./uploads/" + files[i],function(err,stats){if(err){callback("找不到文件" + files[i] , null);}if(stats.isDirectory()){allAlbums.push(files[i]);}iterator(i + 1);});})(0);}); }//通過文件名，得到所有圖片 exports.getAllImagesByAlbumName = function(albumName,callback){fs.readdir("./uploads/" + albumName,function(err,files){if(err){callback("沒有找到uploads文件",null);return;}var allImages = [];(function iterator(i){if(i == files.length){//遍歷結束 console.log(allImages);callback(null,allImages);return;}fs.stat("./uploads/" + albumName + "/" + files[i],function(err,stats){if(err){callback("找不到文件" + files[i] , null);return;}if(stats.isFile()){allImages.push(files[i]);}iterator(i + 1);});})(0);}); }

albm.ejs

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>小小相冊</title><link href="/css/bootstrap.min.css" rel="stylesheet"><style type="text/css">.row h4{text-align: center;}</style> </head> <body> <nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">小小相冊</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="/">全部相冊<span class="sr-only">(current)</span></a></li><li><a href="/up">上傳</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --> </nav><div class="container"><ol class="breadcrumb"><li><a href="/">全部相冊</a></li><li class="active"><%=albumname%></li></ol><div class="row"><% for(var i = 0 ; i < images.length ; i++){ %><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="<%=images[i]%>" alt="..."></a><h4> </h4></div><%}%></div></div><script src="/js/jquery-1.11.3.min.js"></script><script src="/js/bootstrap.min.js"></script> </body> </html>

err.ejs

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>小小相冊</title><link href="/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">小小相冊</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="#">全部相冊<span class="sr-only">(current)</span></a></li><li><a href="#">上傳</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --> </nav><div class="container"><img src="/images/404.jpg" alt=""/></div><script src="/js/jquery-1.11.3.min.js"></script><script src="/js/bootstrap.min.js"></script> </body> </html>

up.ejs

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>小小相冊</title><link href="/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">小小相冊</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="#">全部相冊<span class="sr-only">(current)</span></a></li><li><a href="#">上傳</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --> </nav><div class="container"><div class="row"><form style="width:40%;" method="post" action="#" enctype="multipart/form-data"><div class="form-group"><label for="exampleInputEmail1">選擇文件夾</label><select class="form-control" name="wenjianjia"><% for(var i = 0 ; i < albums.length ; i++){%><option><%= albums[i] %></option><%}%></select></div><div class="form-group"><label for="exampleInputFile">選擇圖片</label><p>尺寸小于2M</p><input type="file" id="exampleInputFile" name="tupian"></div><button type="submit" class="btn btn-default">上傳</button></form></div></div><script src="/js/jquery-1.11.3.min.js"></script><script src="/js/bootstrap.min.js"></script> </body> </html>

index.ejs

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>小小相冊</title><link href="css/bootstrap.min.css" rel="stylesheet"><style type="text/css">.row h4{text-align: center;}</style> </head> <body> <nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">小小相冊</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="/">全部相冊<span class="sr-only">(current)</span></a></li><li><a href="/up">上傳</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --> </nav><div class="container"><div class="row"><% for(var i = 0 ; i < albums.length ; i++){ %><div class="col-xs-6 col-md-3"><a href="<%= albums[i] %>" class="thumbnail"><img src="images/wjj.jpg" alt="..."></a><h4><%= albums[i] %></h4></div><% } %></div></div><script src="js/jquery-1.11.3.min.js"></script><script src="js/bootstrap.min.js"></script> </body> </html>

jad.js

?

轉載于:https://www.cnblogs.com/yaowen/p/7041711.html

總結

以上是生活随笔為你收集整理的node11---相册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。