littleAlbumプロジェクトプロセス

新規プロジェクトフォルダlittleAlbum

littleAlbumでMVC 3フォルダ

を作成

littleAlbum作成publicフォルダ静的リソース

littleAlbum uploadsフォルダ格納ルーティングリソース

を確立する

各プロジェクトにはappがあります.jsファイルはエントリファイルとして

cmdコマンドライン入力npm initによりプロジェクトを初期化package.jsonファイル

を生成する.

publicフォルダの下にcssfontsimagesjsなどの静的リソースフォルダ

を作成する

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