Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解


Posted in Javascript onApril 20, 2019

前言

用来干什么:想干嘛干嘛
为什么写:写来玩,学习node.js文件系统相关api;树结构这种东西还是挺不错的,会用会造才是真的会
用了什么: fs.readdir(dir), fs.stat(dir).isFile(), path处理路径等

思路:

  1. 读取当前文件夹(不是文件夹的另作处理),获得其下所有文件和目录组成的数组;
  2. 循环该数组,判断是文件夹还是文件,文件的话直接push到childFiles(对象有两个属性:short文件名,full完整文件路径)
  3. 文件夹的话,先把当前文件夹作为key,存到父级文件夹的childDir属性下,然后自调用传当前文件夹路径
  4. 每一层文件夹都包含三个属性:dir文件夹路径,childFiles子文件,childDir子文件夹,存储为对象结构
  5. 以上步骤重复,直到达到最底层空文件夹或该文件夹只有文件

输出的样子components-dir-tree.json

{
  "dir": "D:\\node-test\\components",
  "childFiles": [
    {
      "short": "components-dir-tree.json",
      "full": "D:\\node-test\\components\\components-dir-tree.json"
    },
    {
      "short": "file.js",
      "full": "D:\\node-test\\components\\file.js"
    },
    {
      "short": "index.js",
      "full": "D:\\node-test\\components\\index.js"
    }
  ],
  "childDir": {
    "no": null,
    "test": {
      "dir": "D:\\node-test\\components\\test",
      "childFiles": [],
      "childDir": {
        "aa": {
          "dir": "D:\\node-test\\components\\test\\aa",
          "childFiles": [
            {
              "short": "bb.js",
              "full": "D:\\node-test\\components\\test\\aa\\bb.js"
            }
          ],
          "childDir": {
            "cc": null
          }
        }
      }
    }
  }
}

。

目录结构(仅components)

...
|-- components
    -- index.js
    -- file.js
    -- components-dir-tree.json  // 生成的文件树对象的输出文件,方便查看
    -- no
    -- test
       -- aa
        -- cc

使用

将输出结果格式化写入到json文件,看起来一目了然

components/index.js:
/**
 * init
 */
require('console-color-mr'); // 命令行样式
const fs = require('fs');
const path = require('path');
const { getDirTree, getDirName } = require('./file.js');

const componentDir = path.resolve(__dirname, './');
// console.log('componentDir: ', componentDir);

const ComponentInit = (function init() {
 console.log('______ init ______'.blueBG, '\n');
 let treeObj = getDirTree(componentDir);
 // console.log('treeObj: ',treeObj);
 if (treeObj) {
  let outdir = `${__dirname}\\${getDirName(componentDir)}-dir-tree.json`;
  // 写入文件
  fs.writeFile(outdir, JSON.stringify(treeObj, '', '\t'), 'utf8', (err) => {
   if (err) throw err;
   console.log(`目录树已输出为文件保存: ${outdir}`.greenBG);
  });
 }
 return init;
})();

module.exports = ComponentInit;

主函数 getDirTree:

/components/file.js
const fs = require('fs');

/**
 * 获取目录下的文件树
 * @param {读取的路径} dir
 * @returns 返回 dir 目录下的文件树
 */
function getDirTree(dir) {
 let obj = {
  dir: dir, // 文件夹路径
  childFiles: [], // 子文件
  childDir: {} // 子目录
 };
 let objStr = JSON.stringify(obj);
 if (isFile(dir)) return console.log(`${dir}: 不是文件夹`.redBG);
 
 // 读取目录
 let files = readDir(dir);
 if (!files.length) console.log(`${dir}: 文件夹为空`.redBG);
 
 // 遍历文件
 files.forEach(file => {
  let tempdir = `${dir}\\${file}`;
  if (isFile(tempdir)) {
   obj.childFiles.push({
    short: file, // 文件名
    full: tempdir // 完整路径
   });
   
  } else {
   // console.log('tempdir: ',tempdir);
   let dirname = getDirName(tempdir);
   // 在当前文件夹的对象下 childDir 属性(1),以文件夹名作为key(2),
   // (2)的值是该目录下 路径dir、childFiles子文件、childDir子文件夹组成的对象或null
   obj.childDir[dirname] = getDirTree(tempdir);
  }
 });
 return JSON.stringify(obj) === objStr ? null : obj;
}

工具函数 readDir/isFile

// 读取路径下的文件、文件夹
function readDir(dir) {
 return fs.readdirSync(dir, (err, files) => {
  if (err) throw err;
  // console.log(`${dir}, files: `.green, files);
  // if (!files.length) console.log(`${dir}: 文件夹为空`.redBG);
  return files;
 })
}

// 判断制定路径是否是文件
function isFile(dir) {
 return fs.statSync(dir).isFile();
}

// 获取目录名
function getDirName(dir) {
 let tempdir = dir.substr(dir.lastIndexOf('\\')+1, dir.length);
 return tempdir;
}

// const components_out = readFile(path.resolve(__dirname, './components-dir-tree.json'));
// console.log('components-dir-tree: ', components_out);

// 读取指定目录的文件
function readFile(dir) {
 let result = fs.readFileSync(dir, 'utf-8');
 return (
  result 
  ? {
   dir: dir,
   result: result
  } 
  : null
 );
}

module.exports = {
 getDirTree,
 readDir,
 isFile,
 readFile
}

完结,撒花,撒花!

以上所述是小编给大家介绍的Node.js读指定文件夹输出该文件夹文件树详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一起来写段JS drag拖动代码
Dec 09 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
优雅地使用loading(推荐)
Apr 20 #Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 #Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 #Javascript
函数式编程入门实践(一)
Apr 20 #Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 #Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 #Javascript
详解vue使用$http服务端收不到参数
Apr 19 #Javascript
You might like
PHP5 安装方法
2006/10/09 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
禁止F5等快捷键的JS代码
2007/03/06 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
Python中的字符串类型基本知识学习教程
2016/02/04 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
幼儿园亲子活动方案
2014/01/29 职场文书
商场端午节活动方案
2014/01/29 职场文书
党校培训自我鉴定
2014/02/01 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
新闻报道策划方案
2014/06/11 职场文书
开展读书活动总结
2014/06/30 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
Mysql数据库命令大全
2021/05/26 MySQL