详解Js 根据文件夹目录获取Json数据输出demo

下面是详解 "JS 根据文件夹目录获取 Json 数据输出 demo" 的完整攻略。

1. 概述

本攻略主要讲解如何使用 JS 根据文件夹目录获取 json 数据，最终输出到页面中。具体实现方式是对文件夹目录进行遍历，生成对应的 json 数据，然后输出到页面中。

2. 准备工作

在开始之前，需要准备一些开发环境和依赖：

Node.js，用于在后台生成 json 数据。
Express 框架，用于搭建本地服务器。
Treeify 模块，用于将 json 数据格式化成可视化树状结构。

安装步骤：

安装 Node.js

官网下载地址：https://nodejs.org/

创建项目并初始化 npm

打开命令行窗口（Windows 用户使用 cmd 或 PowerShell），进入项目目录，执行以下命令：

mkdir my-project
cd my-project
npm init -y

安装 Express 框架和 Treeify 模块

执行以下命令安装：

npm install express treeify

3. 主要实现步骤

在项目中创建一个名为 public 的文件夹，用于存放静态 HTML 和 JS 文件。
在 public 文件夹下创建一个名为 data 的文件夹，用于存放数据文件（例如：json 文件）。
在 data 文件夹下创建一个名为 folder1 的文件夹，用于模拟目录结构，在 folder1 文件夹下创建子文件夹 folder11 和 folder12，并在这两个子文件夹中创建子文件夹和数据文件。
在 public 文件夹下创建一个名为 index.html 的文件，用于显示输出的 json 数据。
在 public 文件夹下创建一个名为 main.js 的文件，用于编写 JS 代码。

接下来，我们开始具体实现。

3.1 生成 json 数据

在 main.js 文件中编写以下代码：

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

function generateJson(dir, cb) {
  const result = { name: path.basename(dir) };
  const children = [];

  fs.readdir(dir, (err, files) => {
    if (err) throw err;

    files.forEach((file) => {
      const filePath = path.join(dir, file);
      if (fs.statSync(filePath).isDirectory()) {
        children.push(generateJson(filePath));
      } else {
        children.push({ name: file });
      }
    });

    result.children = children;

    cb(result);
  });
}

generateJson('./public/data/folder1', (data) => {
  console.log(data);
});

简单解释一下这段代码：

generateJson() 函数用于生成 json 数据，参数 dir 代表要遍历的目录路径，参数 cb 代表回调函数，用于处理遍历完成后的 json 数据。
path.basename() 方法可返回 dir 的 basename，即目录名。
fs.readdir() 方法用于读取目录下的文件。
fs.statSync() 方法用于判断文件是目录还是文件。
遍历所有文件，对于子目录，递归调用 generateJson() 函数，将结果作为子节点的 children 属性；对于文件，直接将文件名作为节点对象即可。
最后调用回调函数，将生成的 json 数据传递出去。

接下来，运行 node main.js 命令，即可在控制台输出对应的 json 数据，示例数据：

{
  "name": "folder1",
  "children": [
    {
      "name": "folder11",
      "children": [
        { "name": "data11.txt" },
        { "name": "folder111" }
      ]
    },
    {
      "name": "folder12",
      "children": [
        { "name": "data12.txt" }
      ]
    }
  ]
}

3.2 输出 json 数据到页面

在 index.html 文件中添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>展示 json 数据</title>
  </head>
  <body>
    <div id="json"></div>
    <script src="main.js"></script>
  </body>
</html>

在 main.js 文件中编写以下代码：

const express = require('express');
const fs = require('fs');
const path = require('path');
const treeify = require('treeify');

const app = express();
const port = 3000;
const dir = './public/data/folder1';

function generateJson(dir, cb) {
  const result = { name: path.basename(dir) };
  const children = [];

  fs.readdir(dir, (err, files) => {
    if (err) throw err;

    files.forEach((file) => {
      const filePath = path.join(dir, file);
      if (fs.statSync(filePath).isDirectory()) {
        children.push(generateJson(filePath));
      } else {
        children.push({ name: file });
      }
    });

    result.children = children;

    cb(result);
  });
}

generateJson(dir, (data) => {
  const jsonStr = treeify.asTree(data, true, true);

  app.get('/', (req, res) => {
    res.send(`<pre>${jsonStr}</pre>`);
  });

  app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
  });
});

简单解释一下这段代码：

express() 函数用于创建 express 实例。
generateJson() 函数同上。
使用 treeify.asTree() 方法将 json 数据转换为可视化树状结构并转为字符串。
app.get() 方法用于处理页面请求，将可视化数据作为 HTML 输出到页面中。
app.listen() 方法用于启动本地服务器并监听端口。

接下来，执行 node main.js 命令，并打开浏览器访问 http://localhost:3000，即可在页面中看到可视化的文件夹目录结构和对应的数据，示例如下：

└─ folder1
   ├─ folder11
   │  ├─ data11.txt
   │  └─ folder111
   └─ folder12
      └─ data12.txt

4. 示例说明

4.1 示例一

文件夹目录：

- public
  - data
    - folder1
      - data1.txt
      - folder11
        - data11.txt
        - folder111
          - data111.txt
      - folder12
        - data12.txt

生成的 json 数据：

{
  "name": "folder1",
  "children": [
    { "name": "data1.txt" },
    {
      "name": "folder11",
      "children": [
        { "name": "data11.txt" },
        {
          "name": "folder111",
          "children": [
            { "name": "data111.txt" }
          ]
        }
      ]
    },
    {
      "name": "folder12",
      "children": [
        { "name": "data12.txt" }
      ]
    }
  ]
}

在页面中显示的可视化树状结构：

└─ folder1
   ├─ data1.txt
   ├─ folder11
   │  ├─ data11.txt
   │  └─ folder111
   │     └─ data111.txt
   └─ folder12
      └─ data12.txt

4.2 示例二