littleAlbum 项目流程

• 新建项目文件夹 littleAlbum
• littleAlbum 中建立 MVC 三个文件夹
• littleAlbum 建立 public 文件夹存放静态资源
• littleAlbum 建立 uploads 文件夹存放路由资源
• 每一个项目都有一个 app.js 文件作为入口文件
• 通过 cmd 命令行输入 npm init 来初始化项目生成 package.json 文件
• 在 public 文件夹下建立 css\fonts\images\js 等静态资源文件夹
• 在 views 文件夹下创建 ejs 文件，用于渲染路由界面
• 命令行输入 npm install express --save 引入 express 功能包 --save 是将修改信息更新到 package.json 文件，生成 node_modules 文件夹

在 app.js 中设置模版

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

var express = require('express');
var app = express();
//设置模版
app.set('view engine','ejs');
//设置中间件
//设置静态资源
app.use(express.static('./public'));

• 在 controllers 文件夹下建立 router.js 文件，建立package.json 文件，并修改package.json 中的 main 使其指向 router.js 文件
• 在 router.js 文件中实现模版渲染

//在这个文件中，我们需要设置一些函数，用来处理接收到路由后的设置
//设置当接收到默认路由后的处理函数
exports.showIndex = function(req,res,next){
    //res.render('index',{albums:['小猫','小狗','小白']})
}

在 app.js 文件中设置显示主界面路由

//设置默认的路径
//当我们接受到对应的请后,我们需要做出处理,为了方便后面的复用代码的管理
//我们最好设置一个文件用来管理接受到路由后的处理
//一般这个属于用来控制界面的设置,所以我们放在控制器中
app.get('/',router.showIndex)

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

• 在 app.js 中调用 app.get('/',router.showIndex);
• 在实际开发中，渲染时的数据，是通过 models 下面对应的文件来获取的，这样数据才是动态的，可以提升代码扩展性
• models 文件夹下创建 files.js 文件用来处理数据
• 将所有数据文件夹放在 uploads 文件夹下
• file.js 文件

//读取文件导入 fs 包
var fs = require('fs');
exports.showAllAlbum = function(callBack){
    //读取文件夹下的信息
    fs.readdir('./uploads',function(err,files){
        if(err){
            callBack('没有这个目录',null);
            return;
        };
        //利用闭包遍历文件夹下所有文件，并判断是否是文件夹
        //创建一个数组储存文件夹
        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 文件

//导入数据模型包
var file = require('../models/file.js')；
exports.showIndex = function(req,res,next){
    //res.render('index',{albums:['小猫','小狗','小白']})
    //因为 showAllAlbum 里面有回调，那么可能我们在渲染的时候，回调还没有回来，就没有对应的数据可以渲染
    //所以在调用对应的函数的时候直接设置回调，然后在对应的回调中处理渲染
    file.showAllAlbum(function(err,albums){
        if(err){
            next();
            return;
        };
        res.render('index',{
            albums:albums;
        })
    })
}

设置点击显示文件夹下文件

• app.js 文件中设置点击路由
• 因为需要加载文件夹下的图片资源是静态资源，所以先用 static 加载

//当我们加载图片的时候,如果放在对应的public下面的时候,会给对应的饿public做静态路由
//所以下面的图片可以直接读取到
//但是我们如果从uploads中获取出来的的图片,需要显示到界面上的时候,需要给图片设置路由
//所以我们可以给uploads中的资源设置静态路由
//一个node程序中可以设置多个静态路由
app.use(express.static('./uploads'));
//设置点击跳转路由，因为需要接收所点击的是哪个文件夹，所以需要传递参数
app.get('/:albumName',router.showImages);

• 在 file.js 文件中处理数据

exports.showAllImage = function(albumName,callBack){
    fs.readdir('./uploads/'+albumName,function(err,files){
        if(err){
            callBack('没有这个目录',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 文件中处理数据的渲染
• 在 views 文件夹下建立 album.js 文件，显示图片的模版

exports.showImages = function(req,res,next){
    //获取点击时传过来的参数
    var albumName = req.params.albumName;
    file.showAllImage(albumName,function(err,imagesArray){
        if(err){
            next();
            return;
        };
        res.render('album',{
            albumname:albumName,
            images:imagesArray
        })
    })
}

设置上传界面路由

• 在 app.js 文件中，设置点击路由

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})
    })
}

设置文件的上传

• 在 app.js 中设置文件上传的 post 请求

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

• 在 router.js 文件中控制文件上传
• 命令行中输入npm install formidable --save 安装 formidable 工具包，并且在 router.js 中引入;
• 创建文件夹 tempload存储上传上来的文件

var formidable = require('formidable');
exports.doPost = function(req,res,next){
    var form = new formidable.IncomingForm();
    //设置上传的路径
    //在node中,凡是和文件操作有关的路径的设置,尤其是需要引入包的一些文件,我们可以使用当前的盘符作为基本的
    form.uploadDir('./tempload');
    //解析对应的文件,使用parse
    form.parse(req,function(err){
        if(err){
            next();
            return;
        };
        res.send('success');
    })
}

设置显示错误页面

• 在 views 文件夹中建立 err.ejs 文件编写显示错误页面
• 在 app.js 中直接直接操作渲染

//设置一个错误路由,如果上面所有的都没有匹配到,我们就设置错误的路由,无论是get还是post,我们都要设置
//错误路由,所以使用use,上面所有的路由都匹配完成后,其余的路由都是错误页面
//所以我们可以直接使用use(funtion)
app.use('/',function(req,res){
    res.render('err');
})