创建文件管理器树

Question

所以，这是我的第一个问题，是的，我正在制作一个电子应用程序 (html/css/js/nodejs)，我现在做得很好，所以我想创建一个“树文件管理器”这是我的应用程序类型的大多数概念中的一个重要功能。我希望能够创建删除、移动和重命名文件夹中的文件夹和内容，我不想要现代文件管理器，但至少需要一个功能性的。我已经搜索了好几天，一无所获。请链接资源或解释我该如何实现，谢谢。

Answer 1

Electron 带有 Node.js，它具有强大的文件系统 API，您可以将其用于文件管理器的所有功能。

我写了几个函数来帮助你入门：

• getDirItemInfo() 函数为指定路径创建数据对象
• getDirItems() 函数获取目录的内容并为每个项目创建一个数据对象。

const _path = require('path')
const fs = require('fs')

async function getDirItemInfo (path) {
  const basePath = _path.parse(path).base
  return await fetchItemObject(path, basePath)
}

async function getDirItems (dirPath) {
  return new Promise((resolve, reject) => {
    // Read directory and get items
    fs.promises.readdir(dirPath)
      .then(basePaths => {
        const statsPromises = basePaths.map(basePath => {
          const path = _path.join(dirPath, basePath)
          return fetchItemObject(path, basePath)
        })
        return Promise.all(statsPromises)
      })
      .then(contents => {
        // Remove items that couldn't be accessed (undefined, null, false) 
        contents = contents
          .filter(Boolean)
        resolve(contents)
      })
      .catch((error) => {
        console.log(error)
      })
  })
}

async function fetchItemObject (path, basePath) {
  try {
    let dirItemCount = null
    const stat = await fs.promises.lstat(path)
    const name = basePath === '' ? path : basePath

    if (stat.isDirectory()) {
      // Count dir items and ignore dirs that couldn't be accessed by readdir
      try {
        const dirItems = await fs.promises.readdir(path)
        dirItemCount = dirItems.length
      }
      catch (error) { 
        console.log(error)
      }
      stat.size = null
    } 

    return ({
      dirItemCount,
      name,
      path,
      stat
    })
  } 
  catch (error) { console.log(error) }
}


// USE FUNCTIONS:
let path1 = _path.normalize('E:/test/test.jpg')
let path2 = _path.normalize('E:/test')

fetchItemObject(path1)
  .then((result) => {
    console.log(result)
  })

getDirItems(path2)
  .then((result) => {
    console.log(result)
  })

您可以在其文档中找到所有 Node.js 文件系统 API：

https://nodejs.org/api/fs.html

另外，这里有一些关于如何在 stackoverflow 上提问的建议 - 尝试就单个问题提出更具体的问题，例如，关于构建目录树（不要只说“我需要这个，这个，这个，还有这个")，并向我们展示你已经编写的代码，这样人们就有了可以使用的东西，而不是仅仅凭自己的想象编写。