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

最新推荐文章于 2024-07-19 10:49:54 发布

rainning_z

最新推荐文章于 2024-07-19 10:49:54 发布

阅读量1.9k

点赞数 2

分类专栏： node.js 文章标签： nodejs 前后端分离 bootstrap express 实例

本文链接：https://blog.csdn.net/ruiti/article/details/83280596

版权

node.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本地相册功能，前端是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<recursionArr.length;j++){
                if(recursionArr[j].length==0) {
                    (recursionArr[j].push(fils.length))
                    break;
                }

            }
            console.log(recursionArr);
            console.log(recursionNum);
            console.log(fils.length);
            recursionNum =recursionNum + fils.length;


            console.log("recursionNum++++++++++++++++");
            console.log(recursionNum);
            (function interator2(fils, i, filsUrl) {
                if (fils.length != 0) {

                    fs.stat("./uploads" +"/"+ filsUrl + "/" + fils[i], function (err, stats) {


                        if (stats.isDirectory()) {

                          //  var curfilsUrl = filsUrl + (fils[i] ? "/" + fils[i] : "");
                            var curfilsUrl = filsUrl + (filsUrl?"/" + fils[i]:fils[i]);
                            console.log(curfilsUrl)
                            allAlbums.push(curfilsUrl);
                            //allAlbums[0].push(fils[i]);
                            recursionArr.push([]);
                            interator(curfilsUrl, "")
                        }
                        i++;
                        recursionNum-=1;
                        console.log("recursionNum------------------");
                        console.log(recursionNum);
                        if (i < fils.length) {

                            interator2(fils, i, filsUrl)

                        } else {
                        }
                        console.log("end"+recursionArr[recursionArr.length-1].length);
                        if(recursionNum==0&&recursionArr[recursionArr.length-1].length!=0){

                            console.log("recursionArr[recursionArr.length]");
                            console.log(recursionArr[recursionArr.length-1].length);
                            console.log("----------------------callback(allAlbums);--------interator2-------------")
                            callback(allAlbums);
                            return;
                        }else{

                        }


                    });


                }

                if(recursionNum==0&&recursionArr[recursionArr.length-1].length!=0){

                    console.log("recursionArr[recursionArr.length]");
                    console.log(recursionArr[recursionArr.length-1].length);
                    console.log("----------------------callback(allAlbums);----interator-----------------")
                    callback(allAlbums);
                    return;
                }else{

                }
            })(fils, 0, pathName)


        })


    })("", "");


}

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