Extjs5 中(RESTful)使用操作数据

最新推荐文章于 2018-06-26 09:25:00 发布

原创最新推荐文章于 2018-06-26 09:25:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

extjs 专栏收录该内容

21 篇文章

订阅专栏

本文深入解析了使用ExtJS进行RESTful请求的相关概念与实践，包括数据模型定义、请求调用（GET、POST、PUT、DELETE）、以及关键方法（load、save、erase）的使用。详细讲解了如何在实际应用中灵活运用这些功能，同时对比了传统API配置方式的优势。

时间 2015-02-04 17:16:35 犸特头

原文 http://blog.mttqq.com/archives/458

主题 REST JavaScript

昨天在QQ群里有朋友问了 erase() 使用方法。在他的代码中设置proxy 中设置

API:{
create : 'create.php',
read   : 'read.php',
update : 'update.php',
destroy: 'destroy.php'
}

在调用过中使用

erase(); url 地址调用不正确。

犸特头给大家做了RESTful例子希望大家多多支持，有什么不对的地方请大家指出。运行内容如下图

1.数据 Model

我们一般使用的到的数据操作中指定 proxy 为 rest 类型，数据提交地址指定一下。

//文件 app/model/User.js
Ext.define('lesson.model.User', {
  extend: 'Ext.data.Model',
  fields: ['id', 'name', 'email'],
  proxy: {
    type: 'rest',
    url : '/users'
  }
});

2.请求调用

在 RESTful 操作中分别通过ＰＵＴ／ＰＯＳＴ／ＧＥＴ／ＤＥＬＥＴＥ对应处理数据，犸特头给大家讲讲 Extjs 中分别 save({id:’12′}), save(),load(),erase() 操作的。犸特头会问 PUT 为什么会对应到 save({id:’12′})？犸特头给大家说说，在这里带上 id 参数 EXTjs 因为你是在调用修改方法默认去调用 PUT 发送到后台处理。其他的大家应该没有问题了吧！调用代码

onLoadButton: function () {
  
  var store = Ext.create('Ext.data.Store', {
    model: 'lesson.model.User'
  });
  store.load({id:'123'});  //GET /users
  Ext.Msg.alert('Confirm', '发送GET请求');
  
  //GET /users
  
  /*
  lesson.model.User.load('123',{
     scope: this,
    failure: function(record, operation) {
      //do something if the load failed
    },
    success: function(record, operation) {
      //do something if the load succeeded
    },
    callback: function(record, operation, success) {
      //do something whether the load succeeded or failed
    }
  });
  */
},


onSaveButton: function () {
  var user = Ext.create('lesson.model.User', {name: 'Ed Spencer', email: 'ed@sencha.com'});
  user.save(); //PUT /users
  Ext.Msg.alert('Confirm', '发送POST请求');	
},
onUpdateButton: function () {
  var user = Ext.create('lesson.model.User', {id:'132',name: 'Ed Spencer', email: 'ed@sencha.com'});
  user.save(); //POST /users
  Ext.Msg.alert('Confirm', '发送PUT请求');		
},
onDeleteButton: function () {
  var user = Ext.create('lesson.model.User', {id:'132'});
  user.erase(); //DELETE  /users
  Ext.Msg.alert('Confirm', '发送DELETE 请求');
}

3.总结

从上面的代码来看，犸特头学会如果使用 RESTful 请求后台数据。犸特头告诉大家在加载数据我们可以使用”lesson.model.User.load()”和”store.load()”发送GET请求的，在实际操作中有大家怎么方便怎么来，减少工作量为先。

4.对比

我们在使用proxy 默认请求后台数据大家都喜欢设置API如下代码，这样方便管理业务操作。对比proxy设置 rest 类型，犸特头觉得比较些。不说多了可以减少js代码提升客户机器加载速度。剩下来的就看大家的了。

API:{
create : 'create.php',
read   : 'read.php',
update : 'update.php',
destroy: 'destroy.php'
}