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;
}
相关文章
|
2月前
|
前端开发 Java 测试技术
微服务——SpringBoot使用归纳——Spring Boot中的MVC支持——@RequestParam
本文介绍了 `@RequestParam` 注解的使用方法及其与 `@PathVariable` 的区别。`@RequestParam` 用于从请求中获取参数值(如 GET 请求的 URL 参数或 POST 请求的表单数据),而 `@PathVariable` 用于从 URL 模板中提取参数。文章通过示例代码详细说明了 `@RequestParam` 的常用属性,如 `required` 和 `defaultValue`,并展示了如何用实体类封装大量表单参数以简化处理流程。最后,结合 Postman 测试工具验证了接口的功能。
105 0
微服务——SpringBoot使用归纳——Spring Boot中的MVC支持——@RequestParam
|
2月前
|
JSON 前端开发 Java
微服务——SpringBoot使用归纳——Spring Boot中的MVC支持——@RequestBody
`@RequestBody` 是 Spring 框架中的注解,用于将 HTTP 请求体中的 JSON 数据自动映射为 Java 对象。例如,前端通过 POST 请求发送包含 `username` 和 `password` 的 JSON 数据,后端可通过带有 `@RequestBody` 注解的方法参数接收并处理。此注解适用于传递复杂对象的场景,简化了数据解析过程。与表单提交不同,它主要用于接收 JSON 格式的实体数据。
126 0
|
2月前
|
前端开发 Java 微服务
微服务——SpringBoot使用归纳——Spring Boot中的MVC支持——@PathVariable
`@PathVariable` 是 Spring Boot 中用于从 URL 中提取参数的注解,支持 RESTful 风格接口开发。例如,通过 `@GetMapping(&quot;/user/{id}&quot;)` 可以将 URL 中的 `{id}` 参数自动映射到方法参数中。若参数名不一致,可通过 `@PathVariable(&quot;自定义名&quot;)` 指定绑定关系。此外,还支持多参数占位符,如 `/user/{id}/{name}`,分别映射到方法中的多个参数。运行项目后,访问指定 URL 即可验证参数是否正确接收。
86 0
|
2月前
|
JSON 前端开发 Java
微服务——SpringBoot使用归纳——Spring Boot中的MVC支持——@RequestMapping
@RequestMapping 是 Spring MVC 中用于请求地址映射的注解,可作用于类或方法上。类级别定义控制器父路径,方法级别进一步指定处理逻辑。常用属性包括 value(请求地址)、method(请求类型,如 GET/POST 等,默认 GET)和 produces(返回内容类型)。例如:`@RequestMapping(value = &quot;/test&quot;, produces = &quot;application/json; charset=UTF-8&quot;)`。此外,针对不同请求方式还有简化注解,如 @GetMapping、@PostMapping 等。
96 0
|
2月前
|
JSON 前端开发 Java
微服务——SpringBoot使用归纳——Spring Boot中的MVC支持——@RestController
本文主要介绍 Spring Boot 中 MVC 开发常用的几个注解及其使用方式,包括 `@RestController`、`@RequestMapping`、`@PathVariable`、`@RequestParam` 和 `@RequestBody`。其中重点讲解了 `@RestController` 注解的构成与特点:它是 `@Controller` 和 `@ResponseBody` 的结合体,适用于返回 JSON 数据的场景。文章还指出,在需要模板渲染(如 Thymeleaf)而非前后端分离的情况下,应使用 `@Controller` 而非 `@RestController`
98 0
|
1月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
230 70
|
10天前
|
Java 开发者 Spring
Spring框架 - 深度揭秘Spring框架的基础架构与工作原理
所以,当你进入这个Spring的世界,看似一片混乱,但细看之下,你会发现这里有个牢固的结构支撑,一切皆有可能。不论你要建设的是一座宏大的城堡,还是个小巧的花园,只要你的工具箱里有Spring,你就能轻松搞定。
52 6
|
29天前
|
Java Spring
Spring框架的学习与应用
总的来说,Spring框架是Java开发中的一把强大的工具。通过理解其核心概念,通过实践来学习和掌握,你可以充分利用Spring框架的强大功能,提高你的开发效率和代码质量。
74 20
|
3月前
|
存储 人工智能 开发框架
Spring AI Alibaba 应用框架挑战赛圆满落幕,恭喜获奖选手
第二届开放原子大赛 Spring AI Alibaba 应用框架挑战赛决赛于 2 月 23 日在北京圆满落幕。
192 31
|
3月前
|
前端开发 Java 数据库连接
Spring框架初识
Spring 是一个分层的轻量级开源框架,核心功能包括控制反转(IOC)和面向切面编程(AOP)。主要模块有核心容器、Spring 上下文、AOP、DAO、ORM、Web 模块和 MVC 框架。它通过 IOC 将配置与代码分离,简化开发;AOP 提供了声明性事务管理等增强功能。
114 21
Spring框架初识