AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 【已翻译100%】

简介:

本文为开发者呈现了一些概念和相关的示例代码,介绍了用ngResource($resource)服务POST方式提交数据到和服务器端SpringMVC环境下的RESTFul APIs。示例代码可以在如下页面找到:http://hello-angularjs.appspot.com/angularjs-restful-apis-post-method-code-example。相对于使用$http服务,我更喜欢这种方法的主要理由是ngResource允许你使用抽象方式(例如$resource类),你可以使用它的实例上的处理方法与RESTFul APIs交互。这样就可以简单方便地实现RESTFul集成。在$resource类的对象上,可以直接调用处理方法(例如get、save等)。因此,在其实例上,就可以使用"$"作为前缀直接调用这些方法。具体的例子如下所示。

这篇文章里,用以下两个情景用例来解释:

  • 保存/持久化 新的数据对象
  • 更新存在的数据对象

代码片段包含了AngularJs代码和Spring MVC代码,以能够让你简单快速的上手。

想要$resource 服务工作,需要添加一段实际代码:

应用angular-resource.js文件,你可以使用Google Hosted Libraries来实现。

下面采用的代码是最新的angularJs版本。(下面就是引入服务的代码)

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js">


下面的代码告诉你如何在创建控制器时引入ngResource模块和注入$resource服务:

var helloApp = angular.module("helloApp", [ 'ngResource' ]);
helloApp.controller("HttpController", [ '$scope', '$resource',     function($scope, $resource) {
    //
    // 在这写你的实际业务代码...   
    //                                    
} ]);

保存/持久化新对象 (其实就是传给后台存进数据库的一个过程)

下面的代码演示了如何使用POST方法提交form表单中的user信息(这部分是由controller来做),controller会把uers信息提交给REST URL “/user/new”(这部分是Spring MVC的控制器执行)。

AngularJS代码

var helloApp = angular.module("helloApp", [ 'ngResource' ]);
helloApp.controller("HttpController", [ '$scope', '$resource',     function($scope, $resource) {
    $scope.users = [
        { 'firstname':'Ajitesh',
        'lastname':'Shukla',
        'address':'Hyderbad',
        'email':'ajitesh101@gmail.com'},
        { 'firstname':'Sumit',
            'lastname':'Jha',
            'address':'Muzaffarpur',
            'email':'sumitjha2011@yahoo.com'},                                                                        
        ];

    $scope.saveUser = function(){                            
        // 创建一个resource对象
        //
        var User = $resource('/user/new');
        // 调用save方法
        //(其实和我们$http.post(url,data).success(function(){})是一样一样的,只是它封装一下而已)

User.save({firstname:$scope.firstname,lastname:$scope.lastname,address:$scope.address,email:$scope.email}, function(response){
            $scope.message = response.message;
        });

    }

} ]);

Spring MVC 代码

请注意User对象的字段要和JSON数据的要一致。同时确保Jackson包已经引入了,并且正常工作了。这是最重要的步骤。我推荐参考这篇文章 how to fix 415 Unsupported Mediatype error 来帮助你实现前面两个步骤。(1.Spring转对象的时候,是按照字段名来转的,比如你的Java的User对象的firstname会绑定Json对象的firstname,所以需要保持一致,否则帮出来的数据可能不对。2.不引人Jackson包,那么Json对象和Java对象不能想换转化,也就不能正常工作了)

/ 创建一个新user
//
@RequestMapping(value = "/user/new", method = RequestMethod.POST)    
public  @ResponseBody String saveUserRestful( @RequestBody User user )   {        
    //
    // 处理输入参数的代码
    //    
    String response = "{\"message\":\"Post With ngResource: The user firstname: " + user.getFirstname() + ", lastname: " + user.getLastname() + ", address: " + user.getAddress() + ", email: " + user.getEmail()+"\"}";
    return response;
}

更新已存在的数据对象

下面的代码演示了如何通过POST方法提交表单信息来更新user对象,请求会发送到服务器的REST URL "/user/{id}",也包括Spring MVC的方法。

Spring MVC 代码

请注意User对象的字段要和JSON数据的要一致。同时确保Jackson包已经引入了,并且正常工作了。这是最重要的步骤。我推荐参考这篇文章 how to fix 415 Unsupported Mediatype error 来帮助你实现前面两个步骤。(1.Spring转对象的时候,是按照字段名来转的,比如你的Java的User对象的firstname会绑定Json对象的firstname,所以需要保持一致,否则帮出来的数据可能不对。2.不引人Jackson包,那么Json对象和Java对象不能想换转化,也就不能正常工作了)

/ 创建一个新user
//
@RequestMapping(value = "/user/new", method = RequestMethod.POST)    
public  @ResponseBody String saveUserRestful( @RequestBody User user )   {        
    //
    // 处理输入参数的代码
    //    
    String response = "{\"message\":\"Post With ngResource: The user firstname: " + user.getFirstname() + ", lastname: " + user.getLastname() + ", address: " + user.getAddress() + ", email: " + user.getEmail()+"\"}";
    return response;
}

更新已存在的数据对象

下面的代码演示了如何通过POST方法提交表单信息来更新user对象,请求会发送到服务器的REST URL "/user/{id}",也包括Spring MVC的方法。

ngularJS代码

var helloApp = angular.module("helloApp", [ 'ngResource' ]);
helloApp.controller("HttpController", [ '$scope', '$resource', function($scope, $resource) {
    $scope.users = [
        { 'firstname':'Ajitesh',
        'lastname':'Shukla',
        'address':'Hyderbad',
        'email':'ajitesh101@gmail.com'},
        { 'firstname':'Sumit',
            'lastname':'Jha',
            'address':'Muzaffarpur',
            'email':'sumitjha2011@yahoo.com'},                                                                        
        ];

    $scope.updateUser = function(){                            
        // Create a resource class object
        //
        var User = $resource('/user/:userId', {userId:'@id'});
        // Create an instance of User resource
        var user = User.get({userId:25});
        // Update the new values entered in the form fields
        //
        user.id = 25;
        user.firstname = $scope.firstname;
        user.lastname = $scope.lastname;
        user.address = $scope.address;
        user.email = $scope.email;
        // Call '$' prefixed action menthod to post ("save" )
        //
        user.$save(function(response){
            $scope.message = response.message;
        });
        // Push the new objects in the $scope.users                     
        //
        $scope.users.push({ 'firstname':$scope.firstname, 'lastname': $scope.lastname, 'address':$scope.address, 'email':$scope.email });
        $scope.firstname='';
        $scope.lastname='';
        $scope.address='';
        $scope.email='';
    }        

} ]);

Spring MVC 代码

请注意下面几点

-用例的路径变量(就是"/user/{id}"这东西)

-Java的User对象要和Json对象匹配(字段名,或者说是属性名)

-确保Jackson包引入并且正常工作(确保你后台能正常转化Json和java对象)

// 更新 user
//    
@RequestMapping(value = "/user/{id}", method = RequestMethod.POST)    
public  @ResponseBody String updateUserProfile( @PathVariable("id") long userId,  @RequestBody User user  )   {        
    //
    // Code processing the input parameters
    //    
    String response = "{\"message\":\"Post With ngResource - id: " + String.valueOf( userId ) + ",firstname: " + user.getFirstname() + ", lastname: " + user.getLastname() + ", address: " + user.getAddress() + ", email: " + user.getEmail() +"\"}";
    return response;
}
相关文章
用 Koa 框架实现一个简单的 RESTful API
用 Koa 框架实现一个简单的 RESTful API
207 26
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
238 4
|
Java API 数据库
如何使用Spring Boot构建RESTful API,以在线图书管理系统为例
【10月更文挑战第9天】本文介绍了如何使用Spring Boot构建RESTful API,以在线图书管理系统为例,从项目搭建、实体类定义、数据访问层创建、业务逻辑处理到RESTful API的实现,详细展示了每个步骤。通过Spring Boot的简洁配置和强大功能,开发者可以高效地开发出功能完备、易于维护的Web应用。
390 3
|
JSON API 数据格式
构建RESTful APIs:使用Python和Flask
【10月更文挑战第6天】本文介绍了如何使用Python和Flask构建一个简单的RESTful API。首先简述了API的重要性及RESTful API的设计理念,接着详细说明了Flask框架的基础知识、环境准备、创建基本应用、定义资源和路由、请求与响应处理以及错误处理等内容。通过具体示例,展示了如何实现常见的HTTP方法,如GET、POST、PUT和DELETE,以操作“图书”资源。最后,提供了运行和测试API的方法,总结了Flask在构建API方面的优势。
126 3
|
10月前
|
前端开发 Java 数据库连接
Spring MVC 扩展和SSM框架整合
通过以上步骤,我们可以将Spring MVC扩展并整合到SSM框架中。这个过程包括配置Spring MVC和Spring的核心配置文件,创建控制器、服务层和MyBatis的Mapper接口及映射文件。在实际开发中,可以根据具体业务需求进行进一步的扩展和优化,以构建更加灵活和高效的企业级应用程序。
275 5
|
监控 前端开发 API
一款基于 .NET MVC 框架开发、功能全面的MES系统
一款基于 .NET MVC 框架开发、功能全面的MES系统
434 5
|
JSON JavaScript 中间件
Koa框架下的RESTful API设计与实现
在现代 Web 开发中,构建高效、可维护的 API 是至关重要的。Koa 是一个流行的 Node.js Web 应用框架,它具有简洁、灵活和强大的特性,非常适合用于设计和实现 RESTful API。
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
322 4
|
JSON API 数据格式
构建RESTful APIs:使用Python和Flask
构建RESTful APIs:使用Python和Flask
188 1
|
JSON API 数据格式
构建RESTful APIs:使用Python和Flask
【10月更文挑战第12天】本文介绍了如何使用Python和Flask构建一个简单的RESTful API。首先概述了API的重要性及RESTful API的基本概念,接着详细讲解了Flask框架的特性和安装方法。通过创建一个基本的Flask应用,定义了处理“图书”资源的GET、POST、PUT和DELETE方法的路由,展示了如何处理请求和响应,以及如何进行错误处理。最后,提供了运行和测试API的方法,总结了Flask在构建RESTful API方面的优势。
139 1