知识点：
- 当使用app.use(express.static("./public"))的时候，如果public中有文件夹admin，里面有html等其他文件的时候; app.get("/admin",function(req,res){res.send("2222");});语句将不会被执行，因为已经被静态的admin文件夹占据了路由；
- 引入中间件：
（1）在router.js中，用
exports.showIndex = function(req,res) {res.send("我是首页");}导出。
（2）在app.js中，
用var router = require("./controller/router.js");引入
用app.get("/",router.showIndex);使用
//在package.json中用{ “main”:"router.js"}后就可以直接引文件夹，而不用引router.js
var express = require("express");
var app = express();
var router = require("./controller");
//在package.json中用{ “main”:"router.js"}后就可以直接引文件夹，而不用引router.js
app.use(express.static("./public"));
app.get("/",router.showIndex);
// app.get("/admin",function(req,res) {
// res.send("靠靠靠靠靠");
// }); //不能再用这个路由了，因为静态文件public中有admin文件夹，该路由已经被占用了
app.listen(3006);
m:models
v:views
c:controller
(1)app.js入口文件
var express = require("express");
var app = express();
var router = require("./controller/router.js");
app.set("view engine", "ejs");
app.use(express.static("./public"));
app.get("/",router.showIndex);
app.get("/:album",router.showAlbum);
// app.get("/admin",function(req,res) {
// res.send("靠靠靠靠靠");
// }); //不能再用这个路由了，因为静态文件public中有admin文件夹，该路由已经被占用了
app.listen(
(2)router.js
var file = require("../models/file.js");
exports.showIndex = function(req,res) {
// res.render("index.ejs",{
// "album": file.getALLAlbum()
// });
// node.js的变成思维，就是所有的东西都是异步的，所以，
// 内层函数不是return回来东西，而是调用高层函数提供的回掉函数
// 把数据当作毁掉函数的参数来使用
file.getALLAlbum(function(allAlbums){
res.render("index.ejs",{
"album": allAlbums
});
})
}
exports.showAlbum = function(req,res) {
res.send("相册" + req.params.album);
}
例子：
student.getId(11212,function(detail){
res.render("index.ejs",{
"name": detail.name
});
});
(3)file.js
var fs = require("fs");
exports.getALLAlbum = function(callback){
fs.readdir("./uploads",function(err,files){
var allAlbums = [];
(function iterator(i){
if(i == files.length){
//遍历结束
console.log(allAlbums);
callback(allAlbums);
return;
}
fs.stat("./uploads/"+files[i],function(err,stats){
if(stats.isDirectory()){
allAlbums.push(files[i]);
}
iterator(i+1);
});
})(0);
});
}
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</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="#">上传</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<% for(var i=0; i<album.length; i++){ %>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
</a>
<div><%= album[i] %></div>
</div>
<% }%>
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
-
fs.readdir (path[, options], callback(err,files)) 读取一个目录的内容
(1)path,:要读取目录的完整路径及目录名
(2)callback(): 回调有两个参数 (err, files) : err错误对象，files数组，存放读取到的目录中的所有文件名，其中 files 是目录中不包括 '.' 和 '..' 的文件名的数组，
(3)options : 可选的 options 参数用于传入回调的文件名，它可以是一个字符串并指定一个字符编码，或是一个对象且由一个 encoding 属性指定使用的字符编码。 如果 encoding 设为 'buffer'，则返回的文件名会被作为 Buffer 对象传入。
- **fs.stat(path, callback) 获取文件信息 **
参数使用说明如下：
path - 文件路径。
callback - 回调函数，带有两个参数如：(err, stats), stats 是 fs.Stats 对象。
【stats.isFile() 如果是文件返回 true，否则返回 false。】
【stats.isDirectory() 如果是目录返回 true，否则返回 false。】
面包屑导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</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="#">上传</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<ol class="breadcrumb"> //面包屑导航------------------------------
<li><a href="/">全部相册</a></li>
<li class="active"><%= album %></li>
</ol> //----------------------
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
</a>
<div></div>
</div>
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
//遍历相册中的所有图片
exports.showAlbum = function(req,res) {
var album = req.params.album
res.render("album.ejs",{
"album": album
});
//具体业务交给model
}
