使用 HTML 和 Node.js 创建文件夹：客户端与服务器的正确姿势-html教程-PHP中文网

使用 HTML 和 Node.js 创建文件夹：客户端与服务器的正确姿势

心靈之曲

发布： 2025-08-13 18:46:32

原创

791人浏览过

使用 html 和 node.js 创建文件夹：客户端与服务器的正确姿势

本文旨在阐明如何使用 HTML 前端界面结合 Node.js 后端逻辑，实现在服务器端动态创建文件夹的功能。文章深入解析了客户端 JavaScript 代码与 Node.js 环境的差异，并提供了搭建简易本地服务器的方案，从而解决直接在浏览器环境中调用 fs 模块的限制。通过本文，读者将理解客户端与服务器交互的原理，并掌握使用 Node.js 处理文件系统操作的正确方法。

直接在浏览器端使用 fs 模块创建文件夹是不可能的。这是因为 fs 模块是 Node.js 提供的，用于在服务器端进行文件系统操作的模块，而浏览器端的 JavaScript 运行环境并不具备直接访问文件系统的权限。尝试在浏览器端引入 fs 模块会报错，因为浏览器无法识别 require 语法，并且即使识别，也没有 fs 对象。

要实现通过网页按钮点击创建文件夹的功能，需要采用客户端-服务器架构。前端负责收集用户输入，并通过 HTTP 请求将数据发送到后端服务器，后端服务器使用 Node.js 处理请求，调用 fs 模块创建文件夹，并将结果返回给前端。

解决方案：搭建简易本地服务器

立即学习“前端免费学习笔记（深入）”；

创建 Node.js 服务器

首先，创建一个 Node.js 文件（例如 server.js），并引入必要的模块：

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

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    const parsedUrl = url.parse(req.url, true);
    const pathname = parsedUrl.pathname;

    if (pathname === '/createFolder' && req.method === 'POST') {
        let body = '';
        req.on('data', chunk => {
            body += chunk.toString();
        });
        req.on('end', () => {
            try {
                const data = JSON.parse(body);
                const folderName = data.folderName;
                const folderPath = path.join(__dirname, 'createdFolders', folderName); // 文件夹创建路径
                fs.mkdirSync(folderPath, { recursive: true }); // 递归创建目录

                res.statusCode = 200;
                res.setHeader('Content-Type', 'application/json');
                res.end(JSON.stringify({ message: 'Folder created successfully!' }));

            } catch (error) {
                console.error('Error creating folder:', error);
                res.statusCode = 500;
                res.setHeader('Content-Type', 'application/json');
                res.end(JSON.stringify({ message: 'Error creating folder.' }));
            }
        });
    } else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/plain');
        res.end('Not Found');
    }
});

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

登录后复制

代码解释:

http: 用于创建 HTTP 服务器。
fs: 用于进行文件系统操作。
url: 用于解析 URL。
path: 用于处理文件路径。
服务器监听 http://127.0.0.1:3000/ 端口。
当接收到 /createFolder 的 POST 请求时，解析请求体中的 JSON 数据，获取文件夹名称，使用 fs.mkdirSync 创建文件夹。 { recursive: true } 保证了父目录不存在时也能正常创建。
创建成功或失败后，返回 JSON 格式的响应。
创建的文件夹位于服务器脚本所在的目录下的 createdFolders 文件夹中。需要提前创建 createdFolders 文件夹，否则可能出现问题。

修改 HTML 和 JavaScript 代码

修改 index.html 和 script.js 文件，使用 fetch API 发送 POST 请求到服务器：

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

查看详情

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Folder</title>
</head>
<body>
    <input type="text" id="folderName" placeholder="Enter folder name">
    <button id="createBtn">Create Folder</button>
    <div id="message"></div>

    <script src="script.js"></script>
</body>
</html>

登录后复制

script.js:

const createBtn = document.getElementById('createBtn');
const folderNameInput = document.getElementById('folderName');
const messageDiv = document.getElementById('message');

createBtn.addEventListener('click', () => {
    const folderName = folderNameInput.value;

    fetch('http://127.0.0.1:3000/createFolder', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ folderName: folderName })
    })
    .then(response => response.json())
    .then(data => {
        messageDiv.textContent = data.message;
    })
    .catch(error => {
        console.error('Error:', error);
        messageDiv.textContent = 'An error occurred.';
    });
});

登录后复制

代码解释:

前端通过 fetch API 向 http://127.0.0.1:3000/createFolder 发送 POST 请求。
请求头 Content-Type 设置为 application/json，表明请求体中的数据是 JSON 格式。
请求体包含一个 JSON 对象，其中 folderName 属性的值为用户输入的文件夹名称。
接收到服务器的响应后，将响应信息显示在页面上。

运行程序

首先，在命令行中进入包含 server.js 文件的目录，运行以下命令启动服务器：
```
node server.js
```
登录后复制
然后，使用浏览器打开 index.html 文件。在输入框中输入文件夹名称，点击 "Create Folder" 按钮，即可在服务器端的 createdFolders 目录下创建文件夹。