如何将值从 AngularJS 传递到 Spring REST 控制器答案

【问题标题】：How to pass a value from AngularJS to Spring REST controller如何将值从 AngularJS 传递到 Spring REST 控制器
【发布时间】：2015-11-19 05:20:28
【问题描述】：

我是 AngularJS 和 Spring MVC 的新手。我正在尝试从 AngularJS 调用 REST 服务并验证登录凭据。

我不确定我是否试图以正确的方式传递参数以将其传递给控制器。如果我缺少任何东西，请有人指导我

Controller.js

var SupportSystems = angular.module('SupportSystems', [ 'ngResource' ]);
SupportSystems
        .controller(
                'LoginController',
                function($scope, $resource) {
                    $scope.authenticate = function() {
                        var authenticateUser = $resource('http://localhost:8080/SupportSystems/SSystems/authenticateUser/:userName', {userName: '@userName'});
                        authenticateUser.save(function(data) {
                            alert("user->" + $scope.userName);
                            alert("pass->" + $scope.password);
                        });
                    }
                });

弹簧控制器

@RequestMapping("/SSystems")
public class SupportSystemsController { `

    @RequestMapping(value="/authenticateUser/{userName}", method=RequestMethod.POST)
    public ResponseEntity<Boolean> authenticateUser(@RequestParam("userName") String userName) {
        System.out.println("username -->" + userName);
        return new ResponseEntity<Boolean>(Boolean.TRUE, HttpStatus.OK);
    }

错误：必需的字符串参数“用户名”不存在。

我需要将用户名和密码的值传递给 Spring 控制器。我正在尝试使用@RequestParam

<body ng-controller="LoginController">

<form class="login-form" name="loginForm" ng-submit="authenticate()">       
    <h2> Login</h2>
    <input type="text" id="userName" class="form-control" name="userName" required autofocus="autofocus" 
    ng-model="userName" />

【问题讨论】：

标签： angularjs spring

【解决方案1】：

回答您原来的问题：您需要使用@PathVariable 插入@RequestParam

建议：建议您将username 和password 数据作为POST 请求的正文提交。

如何使用$http发送POST请求：

$scope.authenticate = function() {
    var data = {
        username: $scope.username,
        password: $scope.password
    };

    var successCallBack = function(response){
        // success response found from server
    };

    var errorCallBack = function(response){
        // error response found from server
    };

    $http.post('http://localhost:8080/SupportSystems/SSystems/authenticateUser', data).then(successCallBack, errorCallBack);
}

如何在 Spring 控制器中处理：

@RequestMapping(value="/authenticateUser", method=RequestMethod.POST)
public ResponseEntity<?> authenticateUser(@Valid @RequestBody AuthenticateUserRequest request) {

    // check the submitted username and password
    if(request.getUserName().equals("nayan") && request.getPassword().equals("pass")){
        return new ResponseEntity<>(null, HttpStatus.OK);
    } else {
        return new ResponseEntity<>(null, HttpStatus.BAD_REQUEST);
    }
}

您的AuthenticateUserRequest 类可能如下所示：

public class AuthenticateUserRequest {

    @NotNull
    private String username;

    @NotNull
    private String password;

    public String getUsername(){return this.username;}
    public void setUsername(String username){this.username = username;}
    public String getPassword(){return this.password;}
    public void setPassword(String password){this.password = password;}

}

注意事项：

@Valid 注释是可选的。如果存在，它将确保必须将 username 和 password 提交给控制器。 @NotNull 注释检查此验证。
在大多数情况下，您会将提交的username 和password 值与数据库中的值进行匹配。为了简单起见，我跳过了它。

【讨论】：

我在下面使用了 $http 并且能够获取值。你能解释更多关于有效载荷 var data = 'userName=' + $scope.userName + '&password=' + $scope.password; $http.post('localhost:8080/SupportSystems/SSystems/authenticateUser', 数据)
我已经用一些示例代码更新了答案。希望对您有所帮助。