ExtJS 6.0中如何为REST代理添加路径参数？

问题场景 #

需要调用REST接口https://localhost:44369/Movies/GetCart/123（将用户ID作为路径参数），但当前配置下生成的URL为https://localhost:44369/Movies/GetCart?dc_xxx&id=123，使用extraParams和appendId: false均无法满足需求。

可行解决方案 #

方案1：动态修改代理的Read接口URL #

在加载Store前，直接将用户ID拼接至Read接口的URL中，覆盖原有配置：

// 获取Store实例
var cartStore = Ext.getStore('cartStore');
// 假设用户ID为123，实际可从登录态等地方获取
var userId = 123;
// 更新代理的Read接口URL
cartStore.getProxy().setApi({
    read: `https://localhost:44369/Movies/GetCart/${userId}`
});
// 加载数据
cartStore.load();

如果用户ID在Store初始化时就已知，也可以在Store的构造函数中直接配置动态URL：

constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    // 提前获取用户ID，比如从全局变量或登录信息中
    var userId = 123;
    me.callParent([Ext.apply({
        // ...其他配置
        proxy: {
            type: 'rest',
            enablePaging: true,
            api: {
                create: 'https://localhost:44369/Movies/AddCart',
                read: `https://localhost:44369/Movies/GetCart/${userId}`,
                update: 'https://localhost:44369/Movies/EditCart',
                destroy: 'https://localhost:44369/Movies/DeleteCart'
            },
            // ...reader、writer配置
        }
    }, cfg)]);
}

方案2：重写代理的buildUrl方法 #

通过自定义代理的URL构建逻辑，将extraParams中的ID转换为路径参数，并移除查询参数中的ID：

Ext.define('Movie.store.CartStore', {
    extend: 'Ext.data.Store',
    alias: 'store.cart',
    storeId: 'cartStore',
    requires: [
        'Movie.model.CartModel'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: false, // 改为手动加载，方便传入参数
            autoSync: true,
            model: 'Movie.model.CartModel',
            remoteSort: true,
            proxy: {
                type: 'rest',
                enablePaging: true,
                api: {
                    create: 'https://localhost:44369/Movies/AddCart',
                    read: 'https://localhost:44369/Movies/GetCart',
                    update: 'https://localhost:44369/Movies/EditCart',
                    destroy: 'https://localhost:44369/Movies/DeleteCart'
                },
                reader: {
                    type: 'json',
                    headers: { 'Accept': 'application/json' }
                },
                writer: {
                    type: 'json',
                },
                // 重写URL构建方法
                buildUrl: function(request) {
                    var url = this.callParent(arguments);
                    var id = this.getExtraParams().id;
                    // 仅针对Read操作处理路径参数
                    if (id && request.getAction() === 'read') {
                        // 移除查询参数中的id（包括单独存在或与其他参数共存的情况）
                        url = url.replace(/(\?|&)id=\d+/, '').replace(/^\?/, '');
                        // 将ID拼接到路径末尾
                        url += '/' + id;
                    }
                    return url;
                }
            }
        }, cfg)]);
    }
});

调用时传入extraParams：

Ext.getStore('cartStore').load({
    extraParams: { id: 123 }
});

方案3：使用占位符+URL替换 #

在代理的Read接口URL中设置占位符，然后在加载前替换为实际ID：

// Store配置中Read接口使用占位符
api: {
    read: 'https://localhost:44369/Movies/GetCart/{userId}'
}

// 加载时替换占位符
var cartStore = Ext.getStore('cartStore');
var userId = 123;
var originalUrl = cartStore.getProxy().getApi().read;
var newUrl = originalUrl.replace('{userId}', userId);
cartStore.getProxy().setApi({ read: newUrl });
cartStore.load();

注意事项 #

• 确保后端路由[Route("Movies/GetCart/{id}")]与前端生成的URL格式完全匹配；
• 如果需要支持动态切换用户ID，方案1或方案2更灵活；
• 方案2中需注意处理URL中可能存在的其他查询参数，避免误删。

内容的提问来源于stack exchange，提问作者dota2bryan beltran