• AngularJS ——ngResource、RESTful APIs 使用


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

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

    更新存在的数据对象

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

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

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

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js">
    </script>
    下面的代码告诉你如何在创建控制器时引入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的方法。


    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.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;
    }
    

      

     补充:

    3.$resource的参数:

    $resource(url,{url参数},{自定义方法})

    url: 必填,资源的基础url

    url中带有 ':' 项的是根据第二个参数来进行配置的. 

    url参数: 选填,配置url中的带有 ':' 项的参数

    eg:

    ('/card/user/:userID/:id',{userID:123,id:'@id'}),那么userID会被配置为123.

    另外,在调用$resource()的方法的时候(比如get,query...),可以传入参数覆盖这里对url参数的配置,这在后面说得到它的方法的时候再详解

    而id属性在后面讲第三个参数的时候讲解

    自定义方法: 

    使用$resource获取到的资源,或者通过$resource实例化的资源,资源本身会具有一些方法,比如$save,第三个参数用于给资源添加自定义的方法:详见:http://www.cnblogs.com/liulangmao/p/3907032.html

    4.$resource()的方法:

    $resource()一共有以下5个方法:

    get: 

    {method:'GET'}

    一般用于获取某个资源:

    query:

    {method:'GET',isArray:true}

    一般用于获取一整套的资源,以数组形式返回

    save:

    {method:'POST'}

    一般用于保存某个资源,有可能是新建的资源,也有可能是更新现有的资源

    remove:

    {method:'DELETE'}

    一般用于删除某个资源

    delete:

    {method:'DELETE'}

    一般用于删除某个资源

    resource.save(data) 和 实例.$save()在这里,两者是等价的.但是在有参数的时候,他们接受的参数其实是不同的:

    使用cardResource.save([parameters], postData, [success], [error])方法时,可以接受四个参数:

    [parameters]: 可选.用于配置url参数,比如配置{userID:124},那么请求url就会变成 'card/user/124/3',其中的3,还是从请求体的id属性获取的.

                        同样,如果没有参数需要配置,是不要填空的.不存在顺序一一对应.可以直接把postData作为第一个参数.

    postData: 必填. 发送的请求体. save方法是post请求,必须要带有请求体.

    [success]:选填. 响应成功后的回调函数,参数同get方法成功回调里的参数

    [error]:选填. 响应失败后的回调函数.参数同get方法失败回调里的参数

    使用data.$save([parameters], [success], [error])方法时,可以接受三个参数:

    [parameters]: 可选.注意它不是用于配置url的参数的.它是用来设置url?后面的参数的! 比如设置{name:'code_bunny'},那么请求url就会变成'card/user/123/3?name=code_bunny',

                        通过$save方法来调用save方法,是不能够配置url参数的.它直接就是提交资源自己.

                        同样,如果没有参数需要配置,是不要填空的.不存在顺序一一对应.可以直接把[success]作为第一个参数.

    [success]:选填. 响应成功后的回调函数,参数同get方法成功回调里的参数

    [error]:选填. 响应失败后的回调函数.参数同get方法失败回调里的参数

     
  • 相关阅读:
    day37 多路复用IO模型之select select,poll,epoll 异步IO 数据库基本概念 配置文件管理
    day36 协程介绍/yield实现协程/补充/gevent模块/网络IO模型介绍/阻塞IO模型/非阻塞IO模型
    day35 GIL介绍 cpython解释器的垃圾回收机制 GIL与自定义互斥锁 多进程vs多线程 线程queue 进程池与线程池
    day34 线程介绍/开启线程的两种方式/进程vs线程/线程对象其他相关属性或方法/互斥锁/死锁现象与递归锁/信号量
    day33 守护进程、互斥锁、进程间通信、生产者消费者模型part1、生产者消费者模型part2、生产者消费者模型part3
    day 32 进程理论/开启子进程的两种方式/僵尸进程与孤儿进程/进程间内存空间隔离/join操作/进程对象其他相关属性或方法
    day31 基于udp协议套接字通信 udp协议通信循环原理分析 udp协议没有粘包问题/基于socketserver模块实现并发的套接字(tcp) 基于socketserver模块实现并发的套接字(udp) 进程的简单介绍 操作系统的功能介绍 操作系统的发展史
    day30 模拟ssh远程执行命令/解决粘包执行问题/粘包终极解决方案/tcp的优化算法以及粘包问题分析
    Unity3D游戏开发之MatchTarget实现角色攀爬效果
    javase学习第九天(抽象类与接口)
  • 原文地址:https://www.cnblogs.com/ilinuxer/p/5835865.html
Copyright © 2020-2023  润新知