如何在 Angular/Spring Boot 应用程序中接收服务器端的表单数据？

Question

我有一个基于 Spring Boot 和 Angular 的应用程序。 在那里，我有这个表格：

<form name="create-project">
    <div class="input-group">
        <input type="text" class="form-control" ng-model="project.name"
               placeholder="Project name">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button"
                ng-click="createProject(project)">Create project</button>
      </span>
    </div>
</form>

createProject在控制器中定义。

[...]
.controller('projects', function($scope, $http) {
    $http.get('/resource/').success(function(data) {
        $scope.greeting = data;
    });
    $scope.createProject = function(project) {
        console.log("createProject called on the client side, project name: " +
            project.name);
        $http.post('/createProject', {name: project.name}).success(function(){
            console.log("createProject called successfully");
        });
    }
});

在服务器端，我有以下处理createProject请求的方法：

@SpringBootApplication
@RestController
public class MyApplication {
    [...]
    @RequestMapping(value="/createProject", method=RequestMethod.POST)
    public String createProject(final String name) {
        System.out.println("createProject, server side, name: " + name);
        return "";
    }   
}

当我运行应用程序时，在项目名称字段中输入一些文本并按下创建项目按钮，会发生以下情况：

1. 我在客户端看到日志消息（在客户端createProject called on the client side, project name:具有正确的项目名称。
2. 在服务器日志中，我看到createProject, server side, name: null 。

输入的项目名称要么没有传递到服务器，要么不接受。

如何修复它，即确保我可以访问方法MyApplication.createProject输入的项目名称？

Answer 1

你的 JavaScript 代码在我看来还不错。 我认为您需要将@RequestBody添加到您的createProject() 。 目前它正在检查 url 的名称值。 例如 /createProject?name=John。 您正在做的是在请求正文中指定它。 这就是名称为空的原因。

@SpringBootApplication
@RestController
public class MyApplication {
    [...]
    @RequestMapping(value="/createProject", method=RequestMethod.POST)
    public String createProject(@RequestBody final String name) {
        System.out.println("createProject, server side, name: " + name);
        return "";
    }   
}