angularjs - 如何在 URL 中排序过滤器而不将它们放在键值中

Question

我有一个 URL，可以让我过滤类(class)列表。 这是 URL 的格式:

www.xxxxx/#/filter/All-Course/Languages-All-All/All-All/hour(s)/All/All/All/Anyone/1

通过此网址，我想要将 Course 作为 type 、Languages 作为 Category 的类(class)列表，并且他们的持续时间以小时为单位

这是客户端应用程序的 URL(用 Angular.js 编写)。我所做的就是读取 url 中的参数并调用网络服务，该服务将为我提供给定小动物的类(class)列表。

这个 URL 很丑陋，因为它包含很多“All”通配符(客户端不喜欢它)。

我想删除“全部”关键字。我面临的问题是我将不再知道哪个关键字与哪种类型的过滤器相关。第二个问题是这个网址可以发送给另一个人(另一个浏览器)，我应该得到与第一个浏览器相同的结果。

我看到的解决方案(希望这不是唯一的) 将过滤器作为键值，url 将如下所示:

/filter/类型:类(class)/类别:语言...

这对于少量过滤器来说很好，但对于大量过滤器(我有 12 个)来说很长。 理想的解决方案是拥有这样的 URL:

/filter/类(class)/语言...

有什么线索可以实现这一点吗？

Answer 1

您可以实现类似 http://www.springest.co.uk/agriculture-horticulture/animal-care 的目标通过将 url 段与唯一的正则表达式模式匹配来使用过滤。例如，他们使用 daytime 作为日间过滤器，因为它与任何其他过滤器都不匹配，对于职业级别过滤器，他们使用职业级别-[2-4] ...

因此，我们的想法是确定仅与唯一过滤器匹配的模式，然后进行匹配并激活每个过滤器。对于您的情况，如果我们做出以下假设:

• Hours 是唯一具有数值的过滤器
• 类型可以是 course 或 other，并且是保留值，没有过滤器可以匹配它们。
• 语言以语言-开头

我们知道过滤器匹配单个模式，如果段是数字，则为小时，如果以语言开头，则为语言，如果为类(class)或其他，则为类型。那么你的逻辑可以是这样的:

var App = angular.module('App', ['ngRoute']);

var patterns = {
    type: /(course|other)/,
    hours: /([0-9]+)/,
    language: /language-(.*)/,
};

App.config(function ($routeProvider) {
    $routeProvider
        .when('/filter/:filter*',  {templateUrl: 'aa.html', controller: 'FilterCtrl'})
        .otherwise({redirectTo: '/'});
});

App.controller('FilterCtrl', function ($routeParams, $location) {
    var segments = $routeParams.filter.split('/');
    segments.forEach(function (el) {
        for (var filter in patterns) {
            var res = el.match(patterns[filter]);
            if (res !== null) {
                console.log("Activate filter ", filter, " with params", res[1]);
            }
        }
    });
});

这种方法使过滤非常灵活，因此您可以更改过滤器顺序，也可以像网站一样轻松删除或添加新过滤器。

您应该注意将来可能发生的变化，如果业务逻辑或命名约定的修改会破坏过滤器，因此明智地选择模式，希望我有所帮助。