前端向后端传参问题：Java Spring后端+JS前端登录表单开发

Alright, let's work through this issue where your Angular frontend can't send login data to your Spring backend. I see you're using Angular directives like ng-submit and ng-model, so let's break down the fixes step by step:

1. Fix the Frontend Angular Submit Logic #

First, your ng-submit is missing parentheses—Angular needs a function call, not just the function name. Update your form tag to:

<form ng-submit="login()">
  <input type="text" ng-model="form.username" placeholder="username">
  <input type="password" ng-model="form.password" placeholder="password">
  <button type="submit">Login</button>
</form>

Next, define the login() function in your Angular controller to send the form data via a POST request. Make sure you initialize the form object to avoid undefined issues:

// Assuming you're using AngularJS (based on ng-* directives)
angular.module('yourAppName', [])
  .controller('LoginController', function($scope, $http) {
    // Initialize the form object to hold username/password
    $scope.form = {};

    $scope.login = function() {
      // Send POST request to your Spring backend endpoint
      $http.post('/api/login', $scope.form)
        .then(function(response) {
          // Handle successful login (e.g., redirect to dashboard)
          console.log('Login worked!', response.data);
          window.location.href = '/dashboard';
        })
        .catch(function(error) {
          // Handle errors (e.g., display validation messages)
          console.error('Login failed:', error.data);
          $scope.errorMessages = error.data;
        });
    };
  });

Don't forget to attach the controller to your HTML (e.g., add ng-controller="LoginController" to a parent div or the form itself).

2. Set Up the Spring Backend to Receive & Validate Data #

First, create a DTO (Data Transfer Object) to encapsulate the login request—this makes validation cleaner and more maintainable:

import javax.validation.constraints.NotBlank;

public class LoginRequest {
    @NotBlank(message = "Username can't be empty")
    private String username;

    @NotBlank(message = "Password can't be empty")
    private String password;

    // Getters and setters (required for Spring to deserialize JSON)
    public String getUsername() { return username; }
    public void setUsername(String username) { this.username = username; }
    public String getPassword() { return password; }
    public void setPassword(String password) { this.password = password; }
}

Then, create a RestController endpoint to receive the POST request, run validation, and handle login logic:

import org.springframework.http.ResponseEntity;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.validation.Valid;
import java.util.List;
import java.util.stream.Collectors;

@RestController
@RequestMapping("/api")
public class AuthController {

    @PostMapping("/login")
    public ResponseEntity<?> handleLogin(
            @Valid @RequestBody LoginRequest loginRequest,
            BindingResult bindingResult
    ) {
        // Check for validation errors first
        if (bindingResult.hasErrors()) {
            // Collect error messages to send back to frontend
            List<String> errors = bindingResult.getAllErrors()
                    .stream()
                    .map(error -> error.getDefaultMessage())
                    .collect(Collectors.toList());
            return ResponseEntity.badRequest().body(errors);
        }

        // Your actual authentication logic goes here (e.g., check DB for user)
        boolean isAuthenticated = validateCredentials(loginRequest.getUsername(), loginRequest.getPassword());

        if (isAuthenticated) {
            return ResponseEntity.ok("Login successful");
        } else {
            return ResponseEntity.status(401).body("Invalid username or password");
        }
    }

    // Replace this with your real credential validation (e.g., query user repository)
    private boolean validateCredentials(String username, String password) {
        return "testuser".equals(username) && "testpass".equals(password);
    }
}

3. Fix Cross-Origin (CORS) Issues (If Needed) #

If your frontend runs on a different port/domain than your backend (e.g., frontend on localhost:4200, backend on localhost:8080), you'll hit CORS errors. Add a CORS configuration to your Spring app:

Either add @CrossOrigin to your controller:

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:4200") // Replace with your frontend URL
public class AuthController {
    // ... existing code ...
}

Or set up a global CORS config for all endpoints:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:4200") // Your frontend URL
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

4. Debug Like a Pro #

Use your browser's DevTools (F12 → Network tab) to:

• Check if the POST request is being sent to the correct endpoint
• Verify the Request Payload contains the username and password
• Look at the backend's response status code and content to pinpoint issues (e.g., 400 = validation errors, 401 = bad credentials, 404 = wrong endpoint path)

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