ASP.NET Core 2.0 : 三. 項目結構

本章我們一起來對比着ASP.NET Framework版本看一下ASP.NET Core 2.0的項目結構.(此后的文章也盡量這樣對比着, 方便學習理解.)

關注差異, 也為項目遷移做准備.

ASP.NET Core 系列目錄

新建項目, 選擇類型

新建項目, 選擇.NET Core 有如下幾種類型可選, 分別是Console, ASP.NET Core 的空項目, Web API

我們選擇ASP.NET Core Web App(MVC), 沒有標注MVC的是采用Razor pages 的項目.

 

項目結構圖

新建的項目結構如下圖所示, 大體上和ASP.NET 的Framework版本差不多, 現在按照圖上的數字標記逐一做一下介紹(Controller、Model就不介紹了, View中單獨介紹一下幾個特殊View).

按照標注的數字逐個做一下簡單介紹, 先了解大概是干什么用的, 后面的文章會做詳細的研究.

介紹的時候我會對比大家熟悉的ASP.NET Framework版本, 方便理解.

① Dependencies 依賴項

這里主要分兩部分, NuGet和SDK, 目前這兩部分下面都只有一項.

Nuget:

包含Microsoft.AspNetCore.All, 展開它看一下, 里面MVC、Razor、EF以及SQLLite都要,

官方這樣說: 它包含了

• ASP.NET Core 團隊支持的所有包。
• Entity Framework Core 支持的所有包。
• ASP.NET Core 和 Entity Framework Core 使用的內部和第三方依賴關系。 

猛地一看, 這是一非常大而全的包了, 和之前說的模塊化有點不一致, 而且無緣無故的讓自己的項目引用了一些根本用不到的程序集, 非常不爽.

其實這些程序集不會隨着項目發布一起出現在部署包中, 不止沒引用的, 包括引用的也不會. 這些已經存在於部署環境中了, 所以發布包不會變大反而會變小, 不必擔心.

SDK:

SDk中包含了一項: Microsoft.NETCore.App, 它是.NET Core 的部分庫。 也就是 .NETCoreApp 框架。 它依賴於更小的 NETStandard.Library。

相對於上面的Microsoft.AspNetCore.All, 它同樣是包含了一些程序集.但它似乎更"基礎"一些.

二者異同

Microsoft.AspNetCore.All中大部分都是Microsoft.開頭的一些程序集, 而Microsoft.NETCore.App中出現的大多數是我們熟悉的system.XXX的.

二者的關系就像ASP.NET相對於.NET, 此處是Asp.NetCore相對於.Net Core. 

SDK同樣是一個大而全的集和, 在部署的時候, SDK中的引用依然不會出現在部署包中, 如下圖, 是不是很精簡

 

② launchSettings.json

顧名思義, 這是一個啟動配置文件, json格式的. 通過上面的項目結構圖可以發現, 常見的web.config或app.config等xml格式的config文件找不到了,

都是json. 打開這個json看一下. 一項項的不好解釋, 后來發現windows 中的 vs2017有個圖形化的配置界面(右鍵當前項目->屬性->調試),

一個個介紹太麻煩了, 直接上圖感受一下.

圖下部分的Web服務器配置是我們熟悉的URL、身份認證以及SSL等配置.

圖的上部分對應json中的profiles中定義的兩種配置,分別以IIS Express和以當前項目名HelloCore命名.

切換該選項下面的配置項也會隨之改變, 相當於是兩個頁, 每頁中的配置對應json中相應的節點. 

 

③ _Layout.cshtml

布局模板, 簡單的說就是所有采用此模板的頁面擁有大體一致的布局, 

舉個例子, 我們的頁面經常是這樣的結構:

Header、Footer和Navigation基本上是不變的, 打開_Layout.cshtml, 我們可以看到一個@RenderBody()標識, 它其實就是來定義Content部分的, 

繼承此模板的頁面只需要提供這部分內容即可.

當然, 常見的還有類似@RenderSection("Scripts", required: false)這樣的標識, 引用此模板的頁面可以將該頁的特定JS的引用放在對應的Section中.

引用此模板, 只需在頁首如下配置即可.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

每個頁都配置比較麻煩? ⑥ _ViewStart.cshtml 會幫忙.

④ _ValidationScriptsPartial.cshtml

<environment include="Development">
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</environment>

打開此頁面, 可以看到一些這樣的引用, validation 顧名思義是用來做驗證的, 我們經常看到這樣的頁面

當輸入的格式不正確的時候, 給出提示, 最早我們經常是在輸入后或者提交前用js將輸入的內容正則驗證一下, 

這個不用那么麻煩了, 我們通過如下代碼引用_ValidationScriptsPartial.cshtml, 也就是采用jquery-validation來做驗證

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}

注意: 默認的_Layout模板是未引用的, 因為不是所有頁面都需要有輸入操作.

Model中設置驗證方式

        [Required(ErrorMessage ="用戶名不能為空!")]
        [Display(Name = "用戶名")]
        public string UserName { get; set; }

        [EmailAddress(ErrorMessage ="Email格式不正確!")]
        [Required]
        [Display(Name = "EMail")]
        public string EMail { get; set; }

在頁面添加驗證即可:

<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
    <label asp-for="Email"></label>
    <input asp-for="Email" class="form-control" />
    <span asp-validation-for="Email" class="text-danger"></span>
</div>

validation細化起來內容還很多, 此處只是大概介紹一下, 后文會專題研究.

⑤ _ViewImports.cshtml

先不說這個, 再說一個消失了的Web.config. 就是Framework版本的MVC項目中的View目錄下的那個.

在View中引用Model等的時候, 為了避免寫using .... , 我們可以在這個config中添加這些引用

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
        <add namespace="FrameworkMVCTest" />
        <add namespace="FrameworkMVCTest.Model" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

現在打開_ViewImports.cshtml,

@using HelloCore
@using HelloCore.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

這里其實就是實現了上面的功能.

有一個比較特別的地方就是比原版MVC多了個@addTagHelper

在上文的validation中我們看到過這樣的代碼

    <label asp-for="Email"></label>
    <input asp-for="Email" class="form-control" />
    <span asp-validation-for="Email" class="text-danger"></span>

原來我們是這樣寫的

@Html.LabelFor(m => m.EMail)
@Html.EditorFor(m => m.EMail)
@Html.ValidationMessageFor(m=>m.EMail)

初步看來這個 TagHelper 和 HtmlHelper 有點像, 具體先了解這么多, 后文細化.

⑥ _ViewStart.cshtml

這個打開就一句話,

@{
    Layout = "_Layout";
}

這個頁面中的內容會在所有View執行前執行, 現在這句話就是給所有的View一個默認的Layout模板.

所以在View中這樣寫

@{
    Layout = null;
}

和這樣寫

@{

}

是不一樣的, 第一種是告訴這個View不采用任何模板.

第二種寫法是什么都不干, 所以它會采用_ViewStart.cshtml中指定的模板.

 

當然, 這個_ViewStart.cshtml的作用不只是寫這么一句話, 我們還可以在這寫一些其他需要"通用"執行的內容.

⑦ wwwroot

看這名字好像是IIS的默認網站根目錄, 它包含了所有的"前端"的靜態文件,  css、image、JS以及一個名為lib的文件夾.

lib中默認內容是bootstrap和jquery.

在Startup中, 會調用一個無參數的UseStaticFiles()方法, 將此目錄標記到網站根目錄.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    //.....        
    app.UseStaticFiles();
    //.....

}

具體靜態文件的路徑及相關自定義配置, 授權等后文詳細研究.

⑧ appsettings.json和appsettings.Development.json

這就是原來的framework版本的MVC的Web.config文件了.

不過這個算是夠精簡的了, 默認情況沒幾句話,只有對於log日志的相關配置,

當然正常項目中我們要配置的肯定不止這一點, 舉個例子, 數據庫連接

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=ContosoUniversity1;Trusted_Connection=True;MultipleActiveResultSets=true"
  },
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  }
}

 

⑨ bundleconfig.json

默認文件內容如下:

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

 

這里主要涉及兩個概念:

1.Bunding

     可以理解為綁定或者合並, 也就是把幾個文件合並成一個大文件, 減少請求次數.

     上文的代碼可以看到, inputFiles 是一個數組, 而outputFileName 是一個單獨的文件名, 

　　以css為例, inputFiles里面已經有一個文件 wwwroot/css/site.css, 假如現在頁面還需要一個wwwroot/css/skin.css,

　　如果不做合並, 頁面打開的時候就需要分別請求這兩個文件, 做了合並之后, 即將這個skin.css文件也寫入數組中, 只要請求

　　/css/site.min.css這一個文件即可. 

2.Minification

　　翻譯為縮減, 即將代碼中注釋和多余空格等刪除, 甚至將變量名改為一個字符來縮減文件的大小.

      例如下面的JS代碼

AddAltToImg = function (imageTagAndImageID, imageContext) {
    ///<signature>
    ///<summary> Adds an alt tab to the image
    // </summary>
    //<param name="imgElement" type="String">The image selector.</param>
    //<param name="ContextForImage" type="String">The image context.</param>
    ///</signature>
    var imageElement = $(imageTagAndImageID, imageContext);
    imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

      縮減后的代碼:

AddAltToImg=function(n,t){var i=$(n,t);i.attr("alt",i.attr("id").replace(/ID/,""))};

      一下就減少了好多.

通過以上兩種方式組合不但減少了請求次數,還減小了請求的靜態文件的總大小, 從而提高加載時間和性能.

 

在上文查看_layout模板文件的時候我們就見過這樣的代碼:

 

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>

詳細的配置說明暫時不說, 大概的意思就是在Development模式下加載未綁定和縮減的文件, 方便閱讀和調試.

和非Development情況下,加載處理過的文件來提高性能.

⑩ Program.cs

    public class Program
    {
        public static void Main(string[] args)
        {
            BuildWebHost(args).Run();
        }

        public static IWebHost BuildWebHost(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup<Startup>()
                .Build();
    }

這里有一個非常熟悉的Main方法, 也就是應用的起點, 啟動后通過UseStartup<Startup>()指定下文的Startup啟動文件進行啟動.

⑪ Startup.cs

這是Mvc Core非常重要的地方, 包括加載配置, 通過依賴注入加載組件, 注冊路由等都在此處進行.

默認的代碼中:

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())   //指定錯誤頁
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles(); //指定靜態文件

            //設置路由
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });
        }

如上圖所示, 默認情況下設置了兩種不同狀態下的錯誤頁, 指定靜態文件並且設置了路由.

在這里, 我們可以向管道中通過中間件的方式插入我們需要的工作內容.

比如我們還可以用app.UseAuthentication()來做身份驗證.

 

我們使用 Use、Run 和 Map 來配置 HTTP 管道。 

Use 方法可使管道短路（即不調用 next 請求委托）。 

Run 是一種約定，並且某些中間件組件可公開在管道末尾運行的 Run[Middleware] 方法。

Map* 擴展用作約定來創建管道分支。

 

此處涉及內容非常多, 比如管道機制、路由注冊、身份認證等都需要專題研究.

⑫ .bowerrc和bower.json 

bower是一款優秀的前端包及依賴管理工具,.bowerrc指定了文件位置, bower.json則進行了詳細的配置,如下面的bootstrap和jquery

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.7",
    "jquery": "2.2.0",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.6"
  }
}

 詳細的使用方法就不在這里介紹了.

 

小結:

剛新建的項目的結構大體就是這樣,  主要功能介紹完了就是一個個詳細研究了.

 

ASP.NET Core 系列目錄