本文旨在阐明如何使用 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 请求到服务器：
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 目录下创建文件夹。
注意事项:
- 确保 Node.js 环境已正确安装。
- 确保 server.js 文件和 index.html 文件位于同一目录下。
- createdFolders 文件夹需要手动创建，否则可能出错。
- 服务器端的文件夹创建路径需要根据实际情况进行调整。
- 可以使用 nodemon 自动重启服务器，方便开发调试。
总结:
通过搭建一个简单的 Node.js 服务器，可以轻松地实现通过网页前端界面创建文件夹的功能。这种客户端-服务器架构是 Web 开发中常见的模式，可以有效地解决浏览器端 JavaScript 无法直接访问文件系统的问题。理解客户端与服务器之间的交互原理，是进行 Web 开发的基础。
