Express+node.js實現在線相冊功能

知識點：
  • 當使用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);
  • mvc
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">
                            ![](images/timg.jpg)
                        </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。】
面包屑導航
  • (1)album.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>    
<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">
                ![](images/timg.jpg)
            </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>
  • router.js
//遍歷相冊中的所有圖片
exports.showAlbum = function(req,res) {
    var album = req.params.album
    res.render("album.ejs",{
        "album": album
    });
    //具體業務交給model
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容