如何用Node.js提供HTML页面并将页面用户输入写入JSON文件

Hey there! I totally get where you're coming from—when you're new to Node.js, wrapping your head around how frontend (HTML/JS) and backend (Node.js) interact can feel super confusing. Let's break this down clearly, because here's the key thing: browser-based JavaScript can't write files directly (it's a security restriction), so we need to send that user data from your frontend to your Node.js backend, which will handle writing it to the JSON file for you.

First, let's get a simple server running. We'll use Express (it's friendlier for beginners than Node's native http module):

1. Initialize your project and install dependencies:

npm init -y
npm install express

2. Create a server.js file with this code:

const express = require('express');
const fs = require('fs').promises;
const path = require('path');

const app = express();
const PORT = 3000;

// 1. Parse JSON data sent from the frontend
app.use(express.json());
// 2. Serve your HTML file from a "public" folder
app.use(express.static(path.join(__dirname, 'public')));

// 3. Handle the request to save data to JSON
app.post('/save-user-data', async (req, res) => {
  try {
    // Get the user data object from the frontend request
    const userInput = req.body;

    // Read existing JSON data (or start with an empty array if the file doesn't exist)
    let savedData = [];
    try {
      const fileContent = await fs.readFile(path.join(__dirname, 'user-data.json'), 'utf8');
      savedData = JSON.parse(fileContent);
    } catch (err) {
      console.log('user-data.json not found—creating a new file');
    }

    // Add the new user data to our array
    savedData.push({ ...userInput, timestamp: new Date().toISOString() });

    // Write the updated data back to the JSON file
    await fs.writeFile(
      path.join(__dirname, 'user-data.json'),
      JSON.stringify(savedData, null, 2) // Format JSON for readability
    );

    // Send a success message back to the frontend
    res.status(200).json({ message: 'Data saved successfully!' });
  } catch (err) {
    console.error('Error saving data:', err);
    res.status(500).json({ message: 'Failed to save data' });
  }
});

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

Create a public folder in your project, and put your HTML file inside it (name it index.html). Update the JavaScript part to send data to the backend:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Save User Input</title>
</head>
<body>
  <!-- Example input fields (adjust these to match your actual form) -->
  <input type="text" id="username" placeholder="Username">
  <input type="text" id="favoriteColor" placeholder="Favorite Color">
  <button onclick="submitData()">Save to JSON</button>

  <script>
    async function submitData() {
      // Assemble user input into an object (this is what you already have!)
      const userObject = {
        username: document.getElementById('username').value,
        favoriteColor: document.getElementById('favoriteColor').value
      };

      try {
        // Send the object to the Node.js backend via a POST request
        const response = await fetch('/save-user-data', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json', // Tell backend we're sending JSON
          },
          body: JSON.stringify(userObject) // Convert object to JSON string
        });

        const result = await response.json();
        alert(result.message); // Show success/error message to the user
        
        // Clear input fields after submission
        document.getElementById('username').value = '';
        document.getElementById('favoriteColor').value = '';
      } catch (err) {
        console.error('Error sending data:', err);
        alert('Oops, something went wrong!');
      }
    }
  </script>
</body>
</html>

1. Your project structure should look like this:

your-project/
├── public/
│   └── index.html
├── server.js
└── package.json

2. Start the server:

node server.js

3. Open your browser and go to http://localhost:3000. Enter some data, click the button, and check your project folder—you'll see a user-data.json file with the saved data!

• Frontend ≠ Backend: Browser JS runs on the user's machine, so it can't access your server's files. Node.js runs on your server, so it has permission to read/write files.
• HTTP Requests: We use fetch (built into modern browsers) to send data from frontend to backend via a POST request.
• JSON Parsing: The backend uses express.json() to automatically turn the JSON string from the frontend back into a JavaScript object.

内容的提问来源于stack exchange，提问作者REAH