nodejs 前后端分离的实现 本地相册实例

本地相册功能，前端是bootstrap.js+underCore.js+jq,后端是nodejs:exress,结构是mvc，v是直接静态呈现，数据交互用的是ajax,

贴下github地址有兴趣的可以自己下载：https://github.com/rainningLovexiang/CSDN/tree/photoAlbum，

看下目录

 

首先是

app.js,这是主方法

var express=require("express");
var app =express();

var router=require("./controller/router.js");
//注册模板引擎
app.set("view engine","ejs");

//利用 Express 托管静态文件
//路由中间件,静态页面
app.use(express.static("./public"));
app.use(express.static("./public/html"));
app.use(express.static("./public/js"));
app.use(express.static("./public/css"));
app.use(express.static("./public/images"));
app.use(express.static("./uploads"));

//首页页面跳转
app.get("/",router.showIndex);
//获取文件夹内所有文件夹及图片
app.get("/indexContent",router.getIndexContain);
//获取所有文件夹名称
app.get("/albumsFilesName",router.getAlbumsFilesName);
//上传数据
app.post("/upLoadsImage",router.upLoadsImage);
//监听3000端口及IP
app.listen(3000,"127.0.0.1");

然后是controller里面的router.js这个作为控制层

//引包
var file = require("../model/file");
var formidable = require('formidable');
var path = require("path");
var fs = require("fs");
var sd = require("silly-datetime");
var rd = require("rd");

//跳转首页的方法
exports.showIndex = function (req, res) {
    //redirect：重定向到首页（静态资源）
    res.redirect("/main.html")
}
//获取当前文件夹所有的资源
exports.getIndexContain = function (req, res, next) {
    //console.log(req);

    console.log(req.query);
    var albumPath = req.query.albumPath;
    console.log(albumPath);
//获取所有文件具体方法：nodejs 所有的方法以异步回调为主，（在可以异步的情况下不要同步）
    file.getAllphotoAlbums(albumPath, function (allblums) {
        res.json(allblums)
    })
}
//获取文件夹目录集合（自写方法）
exports.getAlbumsFilesName = function (req, res) {
    file.getAllphotoAlbumsName(function (allblumsFiles) {
        res.json(allblumsFiles)
    })
}
//获取文件夹目录集合（调用已经有的包）
exports.getAlbumsFilesName1 = function (req, res) {
    // file.getRD(function (allblumsFiles) {
    //   res.json(allblumsFiles)
    //})
    // 异步列出目录下的所有文件
    rd.read('./uploads', function (err, files) {
        if (err) throw err;
        // files是一个数组，里面是目录/tmp目录下的所有文件（包括子目录）
        // console.log(files);
        var newFiles = [];
        console.log(files);
        for (var i = 1; i < files.length; i++) {
            var file = (files[i].replace(/\\/g, "/"))
            if (file.indexOf(".") == -1) {
                newFiles.push(file.slice(file.indexOf("uploads/") + 8))
            }
        }
        console.log(newFiles);
        res.json(newFiles)
    });
}
//post 上传图片及数据
exports.upLoadsImage = function (req,res) {
    var form = new formidable.IncomingForm();
    console.log("------------1----------1");
    form.uploadDir = path.normalize(__dirname+"/../tempFile/");
    console.log("-----------3----------1");
    form.parse(req, function(err, fields, files,next) {
        if(err){
            next();
            return;
        }
        console.log(files);
        var size=parseInt(files.pic.size);
       /* if(size>102400){
            res.send("图片尺寸应该小于1M");
            fs.unlink(files.pic.path,function (err) {

            });
            return;
        }*/

        var wenjianjia=fields.albumsFilesName;

        console.log("wenjianjia");
        console.log(wenjianjia);
        var oldPath=files.pic.path;
        console.log("oldPath");
        console.log(oldPath);
        var ttt=sd.format(new Date(),'YYYYMMDDHHmmss');
        ran=parseInt(Math.random()*89999+100000);
        var extname=path.extname(files.pic.name);
        var newPath=path.normalize(__dirname+"/../uploads/"+wenjianjia+"/"+ttt+extname)
        fs.rename(oldPath,newPath,function(err){
            if(err){
                res.send("改名失败")
                return;
            }
            console.log("Error renaming file:", err );
          //  res.send("成功")
            res.redirect("/main.html?albumPath=/"+wenjianjia)

        })
        console.log(fields)
        console.log(files)
    });
}

model下的file.js

var fs = require("fs");
//获取当前目录下的数据
exports.getAllphotoAlbums = function (albumPath, callback) {
    console.log("albumPath")
    console.log(albumPath)
    fs.readdir("./uploads" + albumPath, function (err, fils) {
        if (err) {
            console.log(err);
            return;
        }
        console.log(fils);
        callback(fils);
        return;
    })
}
//获取总目录下所有子目录集合（深度遍历）
exports.getAllphotoAlbumsName = function (callback) {
console.log("#########################Start#############################")
    var recursionNum = 0;
    var allAlbums = [];
    var recursionArr=[];
    recursionArr.push([]);
    (function interator(pathName, ablumsName) {

        fs.readdir("./uploads/" + pathName + ablumsName, function (err, fils) {

            if (err) {
                console.log(err);
                return;
            }
            console.log(fils);
           // recursionArr[recursionArr.length]=fils.length;
            console.log(recursionArr);
            for(var j=0;j

前端项目可以自行去看，前端都不是很难。有难得可以沟通。

主要实现了两个功能一个查看，一个上传，没有做新建文件夹的功能。对初级学习node的可以好好看下，尤其是自己写的深度递归遍历文件夹。还是有一点点难度。共勉。