構建可讀性更高的 ASP.NET Core 路由

 1、前言

　　不知你在平時上網時有沒有注意到，絕大多數網站的 URL 地址都是小寫的英文字母，而咱們使用 .NET/.NET Core MVC 開發的項目，由於在 C# 中類和方法名採用的是 Pascal 命名規範，根據 .NET 框架默認的路由規則，項目的 URL 地址會呈現出大小寫混合的狀況。對於強迫症來講，這種狀況絕對不能忍，固然，因爲整個項目的 URL 地址大小寫混合顯示，也沒法更清晰的向用戶、瀏覽器表達出當前頁面的功能。那麼，這篇文章就來介紹下，如何調整咱們的 ASP.NET Core 項目的路由規則，從而使咱們項目的 URL 地址可讀性更高。

　　PS：在構建 URL 的過程當中，採用大寫的地址仍是採用小寫的地址，每一個人都會有本身的想法和這樣作的理由，這篇文章不討論兩種方案的優劣，只是提供一種構建小寫 URL 地址以及讓咱們的 URL 可讀性更高的解決方案，請友善觀看，切勿互懟。

　　代碼倉儲：https://github.com/Lanesra712/grapefruit-common

 2、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;
});

 

 3、總結

 　　 在本章中，咱們主要是調整了 ASP.NET Core 項目中的默認路由，從而使項目的 URL 地址具備更好的可讀性。經過使用小寫路由和 hyphen(-) 路由，只是構建可讀性更高的 URL 地址的第一步，在構建頁面時，咱們更應該考慮的是如何使用少數的單詞就可讓用戶清楚當前頁面的功能，更簡短，更易讀的 URL 不只對於用戶，對於搜索引擎也是更友好的。