听风是风

学或不学,知识都在那里,只增不减。

导航

白话$resource,$resource中的增删改查

前言

 $resource详解,在学习angular的过程中,我们已经知道,$http能十分便捷的为我们实现与后端的数据交互,格式如下:

$http({method:'GET'},url:'XX').then(successFun,errorFcun)

 选好交互方式(method是GET或者POST),填好地址(url是你要交互的后台地址),然后在成功(successFun)以及失败(errorFun)回调函数中分别去处理反馈回来的数据,这个容易理解,直到遇到angular中另一种数据交互方式$resource时,我觉得有必要着重整理记下笔记了。

1.$resource是个啥,$resouce起步

$resource是angularjs提供的另一种数据交互方式,它其实一个$resourced对象集合体,这个集合体中包含了五类常用的交互方式,比如get,remove.....我们可以直接使用它们(后面详细说),与$http相比,它的交互方式其实更为灵活,我们除了可以使用它体现提供的方法API外,它更支持用户自定义交互方法。它不像$http在控制器controller中申明就可以直接使用,angular并未包含$resource服务,所以我们需要额外去引用它。例如,在引用angularjs后还需引用$resouce的js文件(目录根据自己情况来):

引用之后,我们还得在应用申明时去注入它,假设咱们有个app应用,如下:

var app = angular.module("myApp",["ngResource"])

这样,我们就可以在后续的开发中直接使用它而不报错了。

2. $resource对象与它包含的五类方法

2.1 理解$resource对象

假设,我们在网上一家百货店买了一些日用品到货了,由于你不在家,师傅给你丢在你楼下一家超市了,需要自己去自取,那现在最重要的,我们需要知道是楼下2家超市的哪一家(交互的后台url地址),去了超市,老板说你自己去那一堆快递里自己拿吧,我懒得管你,还好,快递在,然后我们取回了一个大箱子(一个$resource对象),箱子里是一些可以分别使用的工具,你只需要分别取使用它们就OK了。那么现在我们来看看$resouce对象的获取方法:

var url = "http://xxx/xxx/xxx"
app.controller("myCtrl",function($scope,$resource){
      var Entry = $resource(url);
)}

其中,url就是咱们数据交互的地址,而Entry就是咱们拿到手的一大箱东西了,知道地方咱们直接去拿,拿回来怎么用那就是后话,问题不大,那现在我们拆箱好好使用箱子里面的这些东西。

2.2 $resource中的方法

2个get类型

1.get(params,successFn,errorFn)

2.query(params,successFn,errorFn)

3个非get类型

3.save(params,payload,successFn,errorFn)

4.remove(params,payload,successFn,errorFn)

5.delete(params,payload,successFn,errorFn)

那括号里面分别代表什么意思呢?

params:跟随请求一起发送的参数,比如,查询条件。

payload:跟随请求一起发送的数据体,比如把要存的数据。

successFn:请求成功函数,在这里咱们可以根据自己需求去处理返回的数据。

errorFn:失败函数,会返回包含status状态码等参数,咱们可以根据这个判断哪里出错了。

2.2.1 get()--查

首先说说get(),我们先看个例子:

//地址这里根据实际的来
var
url = "http://xxx/xxx/xxx/:id";
//控制器中开始使用 app.controller(
"myCtrl",function($scope,$resource){
  //第一次取快递,把$resource对象存在Entry中了
var Entry = $resource(url);
  //第二次取快递,更详细的数据交互
Entry.get({ 'id':3312 },function(resp){
    //处理成功函数
$scope.message
= resp; },function(err){
    //处理失败函数 console.log(err); }) )}

咱们可以把这段代码理解为取两次快递

第一次取快递,咱们把$resouce对象保存在了Entry中

第二次取快递,咱们的又一个快递到了,还是丢在了那家超市,由于第一次咱们去过那家超市了就直接去取吧,不过这次老板就比较负责了,需要你提供下手机号码后四位数,那么我的尾数是3312(id:3312),于是老板就把3312的这个快递(这条数据)给我们了。于是咱们完成了第二次较为详细的http请求。

地址虽然没变,但是却多了一个对手机号码的流程,所以在上述代码url结尾有个":id",这个用处就是用来单一条件查询用的。

咱们之所以能直接使用Entry.get()就能获取到对应地址的数据,是因为Entry在赋值保存时已经包含了地址信息,所以get没必要再次提供地址。

2.2.2query():--查

Entry.query(function(messages) {
// 读取集合中第一条数据
$scope.message= messages[0];
});

query也属于get请求,但与get相比,它更常用语获取大量数据的数组,而get更适合加上ID去获取某一条数据。

2.2.3save()--增

Entry.save({                  
           "id": 10000,
           "age": "25",
            "name": "小钻风",                  
       },function(resp){
            $scope.message = resp;
       },function(err){
            console.log(err);
})

存储一条包含id,age以及name属性的一条数据

save用于像后端存储一条新的数据,需要注意的是,当你想修改某条已经存在的数据时,不要想着找到对应id数据后利用save进行覆盖更新,这是会报错的,因为save本质是新增数据,并不能用于存储覆盖现有数据。

2.2.4delete()与remove()--删

Entry.remove({           
    'id':10000
},function(resp){
    $scope.message = resp;
},function(err){
    console.log(err);
})

找到id为10000的数据,并且删除掉这条数据

这对兄弟功能以及使用完全一样,那为啥要存在2个呢,那是因为delete是JS的保留字,在IE中使用会存在其它报错问题,所以保险起见,还是直接用remove进行删除吧。

3.$resource中的自定义方法

我们在前面说了增删查,那我们要改已经存在库里面的数据咋办,而且也说了,save只能新增,并不能修改,那这时候就得自定义一个修改的方法了。

其实在获取$resource对象时,除了单一提供url参数外,其实还有其他的可选参数,我们看看如何定义一个修改:

 var Entry = $resource(url,{},{
      update:{
           method:'PUT'
      }
 });  
  Entry.update({
    'id':10000
  },{
    "id": 10000,
    "age": "28",
    "name": "小钻风",
  },function(resp){
    $scope.message = resp;
  },function(err){
    console.log(err);
  })
 

上述代码分为两步,第一,获取$resource对象,同时封装了一个update的方法,第二部,使用update找到id为10000的数据,将其覆盖为我们后面提供的数据。

这里我们定义的method为put,简单提下PUT: 把消息本体中的消息发送到一个URL,通常用于向服务器发送请求,如果URI不存在,则要求服务器根据请求创建资源,如果存在,服务器就接受请求内容,并修改URI资源的原始版本。

update是我们自定义的方法名,你想取啥就取啥,当然在使用时你得跟你上面定义的一样,在update中其实还可以定义更多属性,如下:

$resource(url,{},{  
  update:{  
    method:'', //送HTTP请求的方法
    url:'',  //为该方法的具体路由设置的URL
    params:{},  
    isArray:boolean,  //为ture此动作返回数组
    transformRequest:函数或者函数数组  
    transformResponse:函数或者函数数组  
    cache:布尔型或缓存对象  
    timeout:数值或promise对象  
    withCredentials:布尔类型  
    responseType:字符串,用来设置XMLHttpRequestResponseType属性  
  }  
})  

先整理到这吧。

posted on 2018-04-08 16:59  听风是风  阅读(436)  评论(0编辑  收藏  举报