ExtJs (6.0.0) 休息服务 PUT 请求

Posted 2023-02-26

【中文标题】ExtJs (6.0.0) 休息服务 PUT 请求

【英文标题】：ExtJs (6.0.0) rest service PUT request

【发布时间】：2018-05-09 16:11:41

【问题描述】：

我正在尝试将一些数据从我的前端 (ExtJs) 放入我的后端 (Java、Spring)。它不起作用，或者我没有得到正确的线索......

我在 Ext.grid.Panel 上，我使用以下存储（很好地）由 this.store.setData(myObject.data.items) 填充和显示 方法：

Ext.define( 'NameOfThisClass', 
  extend: 'Ext.grid.Panel',
  ...

  store: Ext.create( 'Ext.data.Store', 
    data: [],
    autoLoad: false,

    proxy: 
        type: 'rest',
        url: '/somepath/theclass',
        reader: 
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'totalCount'
        ,
        writer: 
            type: 'json'
        ,
    
   ),

  ...
  // setting the data to be visualized
  setValue: function(myObject) 
    this.store.setData( myObject.data.items );
  
  ...

  updateRecord: function(objectId, objectWithUpdateProperties) 
    // do what with the store and/or proxy?
  
  ...
);

我在表格中显示所有条目。条目不会由商店自动加载，而是从外部设置：setValue(myObject)。 还有另一个用于初始加载数据的存储。然后将接收到的数据拆分并转发，以免有多个请求。

我确实得到了一个很好的可视化表格，其条目可以通过 rowediting 插件进行编辑。

好的，背景到此为止。

在编辑表的数据时，我会运行一些验证并通过模式对话框收集更多数据，然后通过调用 updateRecord(objectId, objectWithUpdateProperties)将数据发送到服务器>.

这个发送是我的问题。我不知道如何调用/发送将由服务器读取的休息/放置请求。 （接收不是问题，发送才是）。

我想我有点需要触发我的商店或商店的代理。但是怎么做？ 并不是说我可以简单地告诉我的对象进行保存，因为我确实有更多的数据，而不仅仅是更改后的对象的属性。

谁能帮帮我？

【问题讨论】：

正是您需要的？

【参考方案1】：

我通常使用 Ext.Ajax 来实现，像这样：

updateRecord: function(objectId, objectWithUpdateProperties) 

    Ext.Ajax.request(
       url: 'YourUrl',
        params:        
            some_param: 'some_value',
            object_id: objectId,
            object_with_properties_param1: objectWithUpdateProperties.param1
        ,
        success: function(response, opts)      
            //Horay, Do something with the response
        ,
        failure: function(response, opts) 
            //Oh nooooo            
        
    );

【讨论】：

这对我来说非常有效。谢谢法比奥。由于我的 URL 反映了我调用的实体 id url: 'YourUrl/'+objectId 并且参数被简单地设置为 params: objectWithUpdateProperties

只是一些进一步的信息：我需要一个 PUT 请求，所以我将 method:'PUT' 设置为 url 的下一个属性。

【参考方案2】：

不需要使用 Ajax。 您需要在 RestProxy 上配置 proxy.api CRUD(C:create, R:read, U:Update.D:Delete)，来自客户端。 此外，商店必须有 autoSync:true。

在服务器端，需要为每个 CRUD 配置一个 @RestController（使用 JSON-Java 编码器 用于 Jackson 等参数或等效参数），这将接受 JSON数据。请注意，您只能发送修改后的字段（store.proxy.writer.writeAllFields: false ->>> default ) 或只是完整记录 (.writeAllFields:true) 到服务器。 这是一个示例（在商店的构造函数中）：

constructor: function(cfg) 
        var me = this;
        cfg = cfg || ;
me.callParent([Ext.apply(
                autoLoad: true,
                autoSync: true,
                model: 'Test.model.Country',
                proxy: 
                    type: 'rest',
                    api: 
                        create: 'country/create',
                        read: 'counrtry/list'
                        update: 'counrtry/update',
                        destroy: 'counrtry/destroy'
                    ,
                    writer:
                        writeAllFields : true
                    ,
                    reader:
                        root:'items',
                        totalProperty: 'rowCount'
                    
                
            , cfg)]);

额外说明：要从服务器读取并自动加载存储，只需在服务器端设置 store.autoLoad: true 和相应的 @RestController 方法。考虑 store.reader 参数。

【讨论】：

感谢您的详细解释。对于我的使用，我只需要一个 PUT 请求而不是 CRUD Api。我的模型也不是任何类型的。后端会将信息分发到它们所属的位置。它们肯定不属于前端的单个模型实体。您的解决方案似乎是准确的并且已整理。我会记住这一点，因为它展示了如何处理数据的好方法。