如何使用express、nodejs在前端部分提交提交按钮直接在postman API中打印用户详细信息

问题描述 投票：0回答：1

我想通过提交提交按钮直接在邮递员中打印用户响应。

以上是我的代码

import express from "express";
import {dirname} from 'path';
import {fileURLToPath} from "url";
import bodyParser from "body-parser";
import fs from "fs";

const __dirname=dirname(fileURLToPath(import.meta.url));
const app = express();

app.use(bodyParser.urlencoded({extended:true}));


app.get("/", (req, res) => {
  res.sendFile(__dirname+"/public/index.html");
});

app.post("/submit",(req,res)=>{
    console.log(req.body);
    const { email, name,password } = req.body;

   
  
  
fs.appendFile("file.txt",`${email},${name},${password}\n`,(err)=>{
    if (err) throw err;
    console.log("file saved success");
    res.redirect("/");
});
});

app.listen(3000, () => {
    console.log(" port running on 3000");
  });

我尝试了chatgpt给出的许多解决方案，但都不起作用

node.js express postman
1个回答
0
投票

Express Side
：Multer 是用于处理多部分/表单数据的中间件，通常用于上传文件。它允许 Express 解析包含文件的 POST 请求中发送的表单数据。 cors 与 CORS 中间件一起可以处理多部分/表单数据请求并管理跨源资源共享 (CORS) 策略。 HTML POST 调用不会有问题。

FormData
：当从客户端提交带有 enctype multipart/form-data 的表单时，它会以 FormData 对象的形式发送数据。这种格式也允许发送文件和非文本数据，例如 JSON。

Response POST by JSON
：尽管表单数据以 multipart/form-data 格式发送，但 Express 仍然可以使用 JSON 进行响应。使用 Multer 处理表单数据后，Express 可以将 JSON 数据发送回客户端，通常包含有关请求成功或失败的信息。

Middleware Integration
：Multer 通过 app.use(multer().none()) 集成到 Express 中间件堆栈中。此设置允许 Express 解析 POST 请求中发送的表单数据，并使其在 req.body 对象中可访问。

JSON Response
：处理完表单数据后，Express 可以使用 res.json() 发送 JSON 响应。此响应可以包含任何相关数据，例如成功消息、错误详细信息或已处理的表单数据，然后客户端 JavaScript 可以相应地处理这些数据。

HTML 端 

JSON Display
：JavaScript 代码从服务器获取 JSON 数据并将其以可读格式显示在 HTML 页面上。

Form Data
用于 POST 调用：HTML 表单收集用户输入（电子邮件、用户名、密码），JavaScript 将其作为 HTTP POST 请求中的 JSON 发送到服务器。

Response Handling
：JavaScript 等待并接收来自服务器的 JSON 响应，然后将其显示在 HTML 页面上。

此代码可以工作。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Registry</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #container {
            width: 400px;
            background-color: #f7f7f7;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input {
            width: 100%;
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        button {
            width: 100%;
            padding: 10px 0;
            border-radius: 5px;
            border: none;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        pre {
            background-color: #f0f0f0;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
        }
    </style>

</head>
<body>
    <div id="container">
        <form id="userForm">
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="emailInput" name="email" value="[email protected]" required>
            </div>
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="nameInput" name="username" value="tom_cruise" required>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="passwordInput" name="password" value="1234" required>
            </div>
            <button type="button" id="button">Register</button>
        </form>
        <pre id="meaning"></pre>
    </div>
    <script>
        const button = document.querySelector("#button");
        const meaning = document.querySelector("#meaning");

        button.addEventListener("click", async () => {
            const email = document.querySelector("#emailInput").value;
            const username = document.querySelector("#nameInput").value;
            const password = document.querySelector("#passwordInput").value;

            const url = `http://localhost:3000/register`;

            try {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ email, username, password })
                });
                const data = await response.json();

                displayMeanings(data);
            } catch (error) {
                meaning.innerHTML = `<p>Error fetching data: ${error.message}</p>`;
            }
        });

        function displayMeanings(data) {
            meaning.textContent = JSON.stringify(data, null, 2);
        }
    </script>
</body>
</html>


server.js

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const cors = require('cors'); // Import cors module
const fs = require('fs');

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

function readUsersFromFile() {
    try {
        const data = fs.readFileSync('users_log.json', 'utf8');
        return JSON.parse(data);
    } catch (err) {
        return [];
    }
}

function writeUsersToFile(users) {
    fs.writeFileSync('users_log.json', JSON.stringify(users, null, 2), 'utf8');
}

const upload = multer();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// Enable CORS for all routes
app.use(cors());


app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

// POST route for registering users
app.post('/register', upload.none(), (req, res) => {
    const { email, username, password } = req.body;

    // You can perform validation here

    const newUser = { email, username, password };
    
    let users = readUsersFromFile();
    
    users.push(newUser);
    
    writeUsersToFile(users);

    // Send JSON response for the newly registered user
    res.json({
        success: true,
        message: 'User registered successfully',
        user: newUser
    });
});

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

安装依赖项

npm install express body-parser multer cors

运行服务器

node server.js

Postman 的 API 测试

注册表

打开浏览器并输入用户的凭据，然后按按钮

http://localhost:3000/

结果

在 users_log.json 中

[
  {
    "email": "[email protected]",
    "username": "tom_cruise",
    "password": "1234"
  },
  {
    "email": "michael [email protected]",
    "username": "michael_jackson",
    "password": "1234"
  }
]
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.