构建可读性更高的 ASP.NET Core 路由

 一、前言

　　不知你在平时上网时有没有注意到，绝大多数网站的 url 地址都是小写的英文字母，而我们使用 .net/.net core mvc 开发的项目，因为在 c# 中类和方法名采用的是 pascal 命名规范，根据 .net 框架默认的路由规则，项目的 url 地址会呈现出大小写混合的情况。对于强迫症来说，这种情况绝对不能忍，当然，由于整个项目的 url 地址大小写混合显示，也无法更清晰的向用户、浏览器表达出当前页面的功能。那么，这篇文章就来介绍下，如何调整我们的 asp.net core 项目的路由规则，从而使我们项目的 url 地址可读性更高。

　　ps：在构建 url 的过程中，采用大写的地址还是采用小写的地址，每个人都会有自己的想法和这样做的理由，这篇文章不讨论两种方案的优劣，只是提供一种构建小写 url 地址以及让我们的 url 可读性更高的解决方案，请友善观看，切勿互怼。

　　代码仓储：https://github.com/lanesra712/grapefruit-common

 二、step by step

　　在构建项目的路由时，不管是采用大写的 url 路由，还是采用小写的 url 路由，我们首先需要确保的是，我们需要将整个项目的 url 格式进行统一。不能说一个项目一部分的 url 地址用大写的，而另一部分采用的是小写的 url 地址。同时，同一个页面的大写的路径以及小写的路径，虽然最终服务器可能都会将两个地址指向同一个页面，但是对于搜索引擎的收录来说，这无疑是两个页面。

　　试想以下，当别人告诉了我们一个有趣的网站，我们从浏览器的地址栏中输入网址进行访问。当我们输入 url 地址时，不管是中文输入法还是英文输入法，输出的英文字母都是小写的，此时，如果输入的网址中存在大写字母，嗯，我们还需要使用 capslock 键进行大小写切换。

　　另外，我们知道，对于 windows 服务器来说，因为对于路径的大小写不敏感，如果我们弄错了地址的大小写，我们还是可以进行正常的访问的，可是，如果将应用部署到 linux 服务器上的话。。。。

　　至于更好的可读性，这个概念可能会显得有些主观。简单来说，就是当我们面对一个网址时，我们可以很清楚的通过这个网址知道这个网页的主要内容。例如，当我们看见www.youdomain.com/editor/post/new 这个网址时，虽然可能并没有打开这个网页，但我们还是可以大致猜到这个页面可能是新增文章的。可是，如果你收到的网址是 www.youdomain.com/9rg7f2/i?hxi-d+iaj34 这样的，没人能知道这个页面到底是干啥的。

　　因此，为了便捷输入，首先我们需要将我们的 url 地址转换成小写的形式，在 asp.net core 中，微软提供了 routingservicecollectionextensions.addrouting 这个扩展方法可以让我们将 url 地址转换成小写。
　　打开项目的 startup.cs 文件，找到 configureservices 方法，在方法体内添加下面的代码。

services.addrouting(options =>
{
    options.lowercaseurls = true;
});

　　示例项目的顶部链接代码如下所示，运行项目可以看到，通过设置小写路由后，程序根据 controller 和 action 自动生成的 url 地址全部变成了小写。仔细观察可以发现，这里会出现一个问题。在某些特殊的情况下，area/controller/action 可能是由多个英文字母拼接而成的一个混合英文单词，如果把这个混合的单词全部进行小写而不进行拆分的话，整个项目的 url 可读性更低了。

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-controller="home" asp-action="index">sample</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarsupportedcontent"
                    aria-expanded="false" aria-label="toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="home" asp-action="index">home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="home" asp-action="privacy">privacy</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="post" asp-action="draftsetting">draft setting</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

　　在 startup 类中的 configure 方法里，我们定义了针对包含 area 和不包含 area 的两个路由模板，整个项目的 url 都是根据这两个模板进行生成的。那么这里我们是不是可以通过对单个 controller 或是 action 指定特殊的 url 格式呢？

app.usemvc(routes =>
{
    routes.maproute(
        name: "default",
        template: "{controller=home}/{action=index}/{id?}");

    routes.maproute(
        name: "areas",
        template: "{area:exists}/{controller=home}/{action=index}/{id?}");
});

　　答案当然是可以的。在 asp.net core 中，我们可以通过在 controller 或是 action 方法上添加 routeattribute 的方式将用户自定义路由信息添加到项目的路由表中。例如这里我在 draftsetting 这个 action 上使用特性路由的方式手动指定当前 action 生成特殊的 url 格式。 

public class postcontroller : controller
{
    [route("post/draft-setting")]
    public iactionresult draftsetting()
    {
        return view();
    }
}

　　虽然这样可以解决我们的问题，可以一旦项目有新增页面时，就要手动的指定特性路由地址，这样似乎有些麻烦。那么，如何自动的让程序帮我们实现这一功能呢？

　　在 asp.net core 2.2 版本中，微软为我们提供了参数转换器这一概念，我们可以通过实现 ioutboundparametertransformer 这个接口，从而将 url 中路由的值或者是 url 中路由参数的值按照我们的需求进行转换。就像下面的代码中，我通过实现这个接口，从而实现将多个英文单词生成的混合单词以 hyphen(-) 的形式进行分隔。

public class slugifyparametertransformer : ioutboundparametertransformer
{
    public string transformoutbound(object value)
    {
        return value == null
            ? null
            : regex.replace(value.tostring(), "([a-z])([a-z])", "$1-$2").tolower();
    }
}

　　这里我使用 hyphen(-) 作为 url 中各个单词间的连字符，是因为对于搜索引擎来说，它会将 - 视为单词间分隔符，采用这种风格的 url 更有利于搜索引擎收录。

　　当接口功能实现之后，我们就需要对我们的默认全局路由进行修改。首先，我们需要在路由模板上指定需要替换的路由参数，这里我们指定 area、controller、action 是需要进行路由参数转换的变量。

app.usemvc(routes =>
{
    routes.maproute(
        name: "default",
        template: "{controller:slugify=home}/{action:slugify=index}/{id?}");

    routes.maproute(
       name: "areas",
       template: "{area:exists:slugify}/{controller:slugify=home}/{action:slugify=index}/{id?}"
    );
});

　　当定义好参数转换器以及需要转换的 url 路由参数后，我们就可以在 addrouting 方法中通过 constraintmap 进行配置需要转换的参数路由值。至此就可以完成我们进行路由参数转换的结果。

services.addrouting(options => {
    options.constraintmap["slugify"] = typeof(slugifyparametertransformer);
    options.lowercaseurls = true;
});

 

 三、总结

 　　 在本章中，我们主要是调整了 asp.net core 项目中的默认路由，从而使项目的 url 地址具有更好的可读性。通过使用小写路由和 hyphen(-) 路由，只是构建可读性更高的 url 地址的第一步，在构建页面时，我们更应该考虑的是如何使用少数的单词就可以让用户清楚当前页面的功能，更简短，更易读的 url 不仅对于用户，对于搜索引擎也是更友好的。