本文将解释为什么直接在
浏览器
端使用 fs 模块创建文件夹不可行，并提供一种基于客户端-服务器架构的解决方案，即使在本地环境中也能实现类似的功能。
在 Web 开发中，经常会遇到需要在服务器端创建文件夹的需求。虽然 Node.js 提供了 fs 模块来操作文件系统，但直接在浏览器端的 JavaScript 代码中使用 fs 模块是不可能的。这是因为浏览器运行环境与 Node.js 运行环境存在本质区别。
浏览器环境 vs. Node.js 环境
浏览器环境是运行在用户客户端的，主要负责渲染网页和处理用户交互。出于安全考虑，浏览器对 JavaScript 的权限进行了严格限制，不允许直接访问本地文件系统。
立即学习
“
前端免费学习笔记（深入）
”；
Node.js 环境则是一个服务器端的 JavaScript 运行环境，它提供了完整的
操作系统
API 访问能力，包括文件系统操作。
因此，试图在浏览器端使用 require("fs") 引入 fs 模块会失败，因为浏览器根本不认识 require 语法，并且即使引入成功，fs 模块的功能也无法在浏览器环境中正常工作。
客户端-服务器架构解决方案
要实现在网页上点击按钮，通过 Node.js 创建文件夹的功能，必须采用客户端-服务器架构。具体步骤如下：
前端 (HTML + JavaScript):
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
创建一个 HTML 页面，包含一个输入框和一个按钮。
使用 JavaScript 监听按钮的
点击事件
。
当按钮被点击时，获取输入框中的文件夹名称。
通过 fetch 或 XMLHttpRequest 将文件夹名称发送到 Node.js 服务器。
后端 (Node.js):
创建一个 Node.js 服务器，监听特定的端口。
接收来自前端的请求，获取文件夹名称。
使用 fs.mkdirSync() 创建文件夹。
向前端返回创建结果。
示例代码
以下是一个简单的示例代码，展示了如何使用 Node.js 和 HTML 实现创建文件夹的功能：
index.html (前端)
server.js (后端)
运行步骤:
将 index.html 和 server.js 保存到同一个目录下。
在命令行中，进入该目录并运行 node server.js 启动 Node.js 服务器。
在浏览器中打开 index.html。
在输入框中输入文件夹名称，点击 "Create Folder" 按钮。
如果一切正常，你会在服务器的当前目录下看到新创建的文件夹，并且浏览器会弹出一个提示框显示创建结果。
注意事项
确保 Node.js 环境已正确安装。
fs.mkdirSync() 是同步方法，在处理大量请求时可能会阻塞服务器，建议使用异步方法 fs.mkdir()。
需要对用户输入的文件夹名称进行安全验证，防止恶意代码注入。
在生产环境中，需要对服务器进行更完善的配置和安全加固。
总结
虽然不能直接在浏览器端使用 fs 模块操作文件系统，但通过客户端-服务器架构，我们可以轻松地实现类似的功能。前端负责收集用户输入并发送请求，后端负责处理请求并操作文件系统。这种架构是 Web 开发中常用的模式，可以解决许多跨环境的问题。
Create Folder
const http = require('http');
const fs = require('fs');
const url = require('url');
const server = http.createServer((req, res) => {
const parsedUrl = url.parse(req.url, true);
if (req.method === 'POST' && parsedUrl.pathname === '/createFolder') {
let body = '';
req.on('data', chunk => {
body += chunk.toString();
});
req.on('end', () => {
try {
const data = JSON.parse(body);
const folderName = data.folderName;
const folderPath = './' + folderName; // 创建在服务器当前目录下
if (!fs.existsSync(folderPath)) {
fs.mkdirSync(folderPath);
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ message: 'Folder created successfully!' }));
} else {
res.writeHead(400, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ message: 'Folder already exists!' }));
}
} catch (error) {
res.writeHead(500, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ message: 'Error creating folder: ' + error.message }));
}
});
} else {
res.writeHead(404, { 'Content-Type': 'text/plain' });
res.end('Not Found');
}
});
const port = 3000;
server.listen(port, () => {
console.log(`Server listening on port ${port}`);
});