• 新建項(xiàng)目文件夾 littleAlbum
• littleAlbum 中建立 MVC 三個(gè)文件夾
• littleAlbum 建立 public 文件夾存放靜態(tài)資源
• littleAlbum 建立 uploads 文件夾存放路由資源
• 每一個(gè)項(xiàng)目都有一個(gè) app.js 文件作為入口文件
• 通過 cmd 命令行輸入 npm init 來初始化項(xiàng)目生成 package.json 文件
• 在 public 文件夾下建立 css\fonts\images\js 等靜態(tài)資源文件夾
• 在 views 文件夾下創(chuàng)建 ejs 文件，用于渲染路由界面
• 命令行輸入 npm install express --save 引入 express 功能包 --save 是將修改信息更新到 package.json 文件纤虽，生成 node_modules 文件夾

在 app.js 中設(shè)置模版

• 命令行輸入 npm install ejs --save

var express = require('express');
var app = express();
//設(shè)置模版
app.set('view engine','ejs');
//設(shè)置中間件
//設(shè)置靜態(tài)資源
app.use(express.static('./public'));

• 在 controllers 文件夾下建立 router.js 文件轰传，建立package.json 文件抱婉，并修改package.json 中的 main 使其指向 router.js 文件
• 在 router.js 文件中實(shí)現(xiàn)模版渲染

//在這個(gè)文件中，我們需要設(shè)置一些函數(shù)，用來處理接收到路由后的設(shè)置
//設(shè)置當(dāng)接收到默認(rèn)路由后的處理函數(shù)
exports.showIndex = function(req,res,next){
    //res.render('index',{albums:['小貓','小狗','小白']})
}

在 app.js 文件中設(shè)置顯示主界面路由

//設(shè)置默認(rèn)的路徑
//當(dāng)我們接受到對應(yīng)的請后,我們需要做出處理,為了方便后面的復(fù)用代碼的管理
//我們最好設(shè)置一個(gè)文件用來管理接受到路由后的處理
//一般這個(gè)屬于用來控制界面的設(shè)置,所以我們放在控制器中
app.get('/',router.showIndex)

在 app.js 中引入 router.js；```var router = require('./controllers');

• 在 app.js 中調(diào)用 app.get('/',router.showIndex);
• 在實(shí)際開發(fā)中，渲染時(shí)的數(shù)據(jù)艳吠，是通過 models 下面對應(yīng)的文件來獲取的，這樣數(shù)據(jù)才是動(dòng)態(tài)的孽椰，可以提升代碼擴(kuò)展性
• models 文件夾下創(chuàng)建 files.js 文件用來處理數(shù)據(jù)
• 將所有數(shù)據(jù)文件夾放在 uploads 文件夾下
• file.js 文件

//讀取文件導(dǎo)入 fs 包
var fs = require('fs');
exports.showAllAlbum = function(callBack){
    //讀取文件夾下的信息
    fs.readdir('./uploads',function(err,files){
        if(err){
            callBack('沒有這個(gè)目錄',null);
            return;
        };
        //利用閉包遍歷文件夾下所有文件昭娩，并判斷是否是文件夾
        //創(chuàng)建一個(gè)數(shù)組儲存文件夾
        var albumArr = [];
        (function iterator(i){
            //判斷停止條件
            if(i == files.length){
                console.log(albumArr);
                callBack(null,albumArr);
                return;
            };
            fs.stat('./uploads/',function(err,stats){
                if(stats.isDirectory()){
                    albumArr.push(files[i]);
                };
                iterartor(i+1);
            })
        })(0)
    })
}

• 配置 router.js 文件

//導(dǎo)入數(shù)據(jù)模型包
var file = require('../models/file.js')；
exports.showIndex = function(req,res,next){
    //res.render('index',{albums:['小貓','小狗','小白']})
    //因?yàn)?showAllAlbum 里面有回調(diào)黍匾，那么可能我們在渲染的時(shí)候栏渺，回調(diào)還沒有回來，就沒有對應(yīng)的數(shù)據(jù)可以渲染
    //所以在調(diào)用對應(yīng)的函數(shù)的時(shí)候直接設(shè)置回調(diào)膀捷，然后在對應(yīng)的回調(diào)中處理渲染
    file.showAllAlbum(function(err,albums){
        if(err){
            next();
            return;
        };
        res.render('index',{
            albums:albums;
        })
    })
}

設(shè)置點(diǎn)擊顯示文件夾下文件

• app.js 文件中設(shè)置點(diǎn)擊路由
• 因?yàn)樾枰虞d文件夾下的圖片資源是靜態(tài)資源迈嘹，所以先用 static 加載

//當(dāng)我們加載圖片的時(shí)候,如果放在對應(yīng)的public下面的時(shí)候,會(huì)給對應(yīng)的餓public做靜態(tài)路由
//所以下面的圖片可以直接讀取到
//但是我們?nèi)绻麖膗ploads中獲取出來的的圖片,需要顯示到界面上的時(shí)候,需要給圖片設(shè)置路由
//所以我們可以給uploads中的資源設(shè)置靜態(tài)路由
//一個(gè)node程序中可以設(shè)置多個(gè)靜態(tài)路由
app.use(express.static('./uploads'));
//設(shè)置點(diǎn)擊跳轉(zhuǎn)路由，因?yàn)樾枰邮账c(diǎn)擊的是哪個(gè)文件夾，所以需要傳遞參數(shù)
app.get('/:albumName',router.showImages);

• 在 file.js 文件中處理數(shù)據(jù)

exports.showAllImage = function(albumName,callBack){
    fs.readdir('./uploads/'+albumName,function(err,files){
        if(err){
            callBack('沒有這個(gè)目錄',null);
            return;
        };
        var imagesArr = []
        (function iterator(i){
            if(i == files.length){
                callBack(null,imagesArr);
                console.log(imagesArr);
                return;
            };
            fs.stat('./uploads/'+albumName+'/'+files[i],function(err,stat){               
                imagesArr.push(files[i]);
            });
            iterator(i+1);
        })(0)

    })
}

• 在 router.js 文件中處理數(shù)據(jù)的渲染
• 在 views 文件夾下建立 album.js 文件秀仲，顯示圖片的模版

exports.showImages = function(req,res,next){
    //獲取點(diǎn)擊時(shí)傳過來的參數(shù)
    var albumName = req.params.albumName;
    file.showAllImage(albumName,function(err,imagesArray){
        if(err){
            next();
            return;
        };
        res.render('album',{
            albumname:albumName,
            images:imagesArray
        })
    })
}

設(shè)置上傳界面路由

• 在 app.js 文件中融痛，設(shè)置點(diǎn)擊路由

app.get('/up',router.showUp);

• 在 router.js 中配置路由
• 在 views 文件夾中建立 up.ejs 模版

exports.showUp = function(req,res,next){
    file.showAllAlbum(function(err,albums){
        if(err){
            next();
            return;
        };
        res.render('up',{albums:albums})
    })
}

設(shè)置文件的上傳

• 在 app.js 中設(shè)置文件上傳的 post 請求

app.post('/up',router.doPost)

• 在 router.js 文件中控制文件上傳
• 命令行中輸入npm install formidable --save 安裝 formidable 工具包，并且在 router.js 中引入;
• 創(chuàng)建文件夾 tempload存儲上傳上來的文件

var formidable = require('formidable');
exports.doPost = function(req,res,next){
    var form = new formidable.IncomingForm();
    //設(shè)置上傳的路徑
    //在node中,凡是和文件操作有關(guān)的路徑的設(shè)置,尤其是需要引入包的一些文件,我們可以使用當(dāng)前的盤符作為基本的
    form.uploadDir('./tempload');
    //解析對應(yīng)的文件,使用parse
    form.parse(req,function(err){
        if(err){
            next();
            return;
        };
        res.send('success');
    })
}

設(shè)置顯示錯(cuò)誤頁面

• 在 views 文件夾中建立 err.ejs 文件編寫顯示錯(cuò)誤頁面
• 在 app.js 中直接直接操作渲染

//設(shè)置一個(gè)錯(cuò)誤路由,如果上面所有的都沒有匹配到,我們就設(shè)置錯(cuò)誤的路由,無論是get還是post,我們都要設(shè)置
//錯(cuò)誤路由,所以使用use,上面所有的路由都匹配完成后,其余的路由都是錯(cuò)誤頁面
//所以我們可以直接使用use(funtion)
app.use('/',function(req,res){
    res.render('err');
})