如何在Express Node.js中调用已有端点并结合EJS渲染视图？

Hey there! Let's clarify your problem first and walk through how to make this work. It sounds like your core goal is: Build a new application that calls your existing Express POST endpoints (like /user/login) and renders the appropriate EJS views based on the endpoint's response — that's a totally clear and common use case, so you're on the right track.

First, let's make sure your /user/login endpoint sends back a predictable JSON response (since you need to parse this to decide what view to render). Here's a completed version of your example code that handles success/failure cases properly:

// Your existing Express router code
router.post('/user/login', function (req, res) {
  const userLoginId = req.body.loginId; 
  const userPassword = req.body.password;

  // Replace this with your actual authentication logic (DB check, etc.)
  if (userLoginId === 'test@example.com' && userPassword === 'secure123') {
    // Success case: return user data and success flag
    res.json({
      success: true,
      user: { id: 1, email: userLoginId, name: 'Test User' }
    });
  } else {
    // Failure case: return error message with 401 status
    res.status(401).json({
      success: false,
      message: 'Invalid login credentials'
    });
  }
});

Note: Don't forget to include app.use(express.json()) and app.use(express.urlencoded({ extended: true })) in your Express setup to parse request bodies.

You have two main ways to call this endpoint, depending on whether you want to handle the call client-side or server-side:

Option 1: Client-Side Call (Frontend Form Submission) #

If you're using an EJS view with a login form, you can use JavaScript fetch to submit the form data to your endpoint, then update the page or redirect based on the response:

Here's your login.ejs view:

<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
</head>
<body>
  <h1>Login</h1>
  <% if (errorMessage) { %>
    <p style="color: red;"><%= errorMessage %></p>
  <% } %>
  <form id="loginForm">
    <div>
      <label>Email:</label>
      <input type="email" name="loginId" required>
    </div>
    <div>
      <label>Password:</label>
      <input type="password" name="password" required>
    </div>
    <button type="submit">Login</button>
  </form>

  <script>
    document.getElementById('loginForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const loginData = Object.fromEntries(formData);

      try {
        const response = await fetch('/user/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(loginData)
        });

        const result = await response.json();

        if (result.success) {
          // Redirect to dashboard view on success
          window.location.href = '/dashboard';
        } else {
          // Show error message in the login view
          const errorElement = document.createElement('p');
          errorElement.style.color = 'red';
          errorElement.textContent = result.message;
          e.target.appendChild(errorElement);
        }
      } catch (err) {
        console.error('Login failed:', err);
        alert('An error occurred during login');
      }
    });
  </script>
</body>
</html>

Option 2: Server-Side Call (Proxy the Request) #

If you want your new app's backend to call the existing endpoint (e.g., if the endpoint is on a separate server), you can use a library like axios to make the request, then render the appropriate EJS view directly:

First, install axios:

npm install axios

Then, in your new app's router:

const axios = require('axios');
const express = require('express');
const router = express.Router();

// Render empty login form
router.get('/login', (req, res) => {
  res.render('login');
});

// Handle login submission by calling the existing endpoint
router.post('/login', async (req, res) => {
  try {
    // Call your existing login endpoint (replace with your actual API URL)
    const response = await axios.post('http://your-existing-api-domain/user/login', {
      loginId: req.body.loginId,
      password: req.body.password
    });

    const result = response.data;
    if (result.success) {
      // Store user in session (if using express-session)
      req.session.user = result.user;
      // Render dashboard with user data
      res.render('dashboard', { user: result.user });
    } else {
      // Render login view with error message
      res.render('login', { errorMessage: result.message });
    }
  } catch (err) {
    // Handle API connection errors
    res.render('login', { errorMessage: 'Failed to connect to authentication service' });
  }
});

// Protected dashboard route
router.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    return res.redirect('/login');
  }
  res.render('dashboard', { user: req.session.user });
});

module.exports = router;

• Session Management: Use express-session to persist user authentication across requests so you don't have to re-authenticate on every page load.
• Error Handling: Always account for both business logic errors (like bad credentials) and technical errors (like API downtime) to keep your app robust.
• EJS Dynamic Data: Pass variables like user info or error messages to your EJS views via the second argument in res.render() — this lets you tailor the view content to the endpoint's response.

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