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 相关文章推荐
基于jQuery的前端数据通用验证库
Aug 08 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
优雅地使用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
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
node.js基础知识小结
2018/02/26 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
python操作日期和时间的方法
2014/03/11 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python 12306抢火车票脚本
2018/02/07 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Django跨域请求原理及实现代码
2020/11/14 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
优秀女职工事迹材料
2014/02/06 职场文书
司机职责范本
2014/03/08 职场文书
小学生成绩单评语
2014/12/31 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang