1. 程式人生 > >ASP.NET 5 入門(1)

ASP.NET 5 入門(1)

ASP.NET入門(1) - 建立和開發ASP.NET 5 專案

建立專案

首先,目前只有VS 2015支援開發最新的ASP.NET 5 程式,所以我們首先需要下載安裝其最新的RC版本.

https://www.visualstudio.com/en-us/downloads/visual-studio-2015-downloads-vs.aspx

安裝完畢以後,開啟並建立新的Web Application專案:

              

然後在後一個介面中選擇ASP.NET 5 Empty模板:

這裡提2個注意點:

  1. 要選擇下面的ASP.NET 5模板,而不是上面的4.6模板.
  2. 選擇Empty模板而不是後面更完整的Web Site模板是希望能夠從無到有,逐步分解這個最新的框架體系.

建立專案完成以後,我們可以看到如下專案結構:

其中global.json記錄瞭解決方案的一些配置,Project_Readme.html則是一個介紹頁面.

比較重要的檔案或者資料夾是以下3個:

l  Startup.cs : 啟動類

l  project.json: 專案配置檔案

l  wwwroot : 整個WebApp的靜態檔案目錄(由於最小模板沒有載入靜態檔案中介軟體,所以該目錄內容暫時無效,這個稍後說明)

啟動類

ASP.NET 5的啟動類只有一個,這裡再也沒有Global.asax,RouteConfig等耳熟能詳的啟動檔案,而只剩下這個Startup.cs是ASP.NET 5的唯一入口。

一般情況下Startup類會包含3個主要函式: 建構函式,ConfigureServices和Configure

在最小模板下,我們僅僅看到後面2個函式,沒有建構函式,雖然不是必須的,但建構函式在讀取初始化引數的環境下也是非常重要的,這個我們以後再介紹.

我們可以這樣來理解這3個函式的作用:

建構函式: 載入各種配置檔案和配置資訊.

ConfigureServices: 載入各種基於依賴注入(Dependency Injection)的服務,這裡提下,在ASP.NET 5中,依賴注入技術得到了充分的使用,大大優化了程式碼的結構.

Configure: 載入各種需要的中介軟體(Middleware),這個概念和Owin中介軟體概念是一致的,和原來IIS中的HttpModule非常的類似.

配置檔案

ASP.NET 5 內建標準的Config檔案只有一個:  project.json. 其他配置檔案都是自定義並自行裝載的。當然,在Solution目錄有一個global.json檔案,但這個和ASP.NET 5主體專案關係不大。另外在project.json之下,還隱藏了一個project.lock.json,其本質內容是記載了大量.NET執行環境(DNX)內建的元件資訊,這個檔案是由VS自行管理的,所以這個檔案我們目前也先略過。

關於.NET執行環境(DNX)是VS 2015以後為適應多平臺執行環境所提出的全新的概念,這個概念對理解ASP.NET編譯和執行環境至關重要,不過此內容不在本文的討論範圍以內,如果要深入理解,請通過我上一篇博文中提供的超鏈來進一步學習.

那麼我們開始進入project.json

"webroot": "wwwroot",

"version": "1.0.0-*",

前者定義了WebApp靜態檔案的根目錄,一般不需要修改;後者定義了整個專案的版本號.

"dependencies": {

    "Microsoft.AspNet.Server.IIS": "1.0.0-beta4",

    "Microsoft.AspNet.Server.WebListener": "1.0.0-beta4"

  },

除了.Net執行環境DNX內建元件外,專案所需載入的外部元件,目前只有2個Server元件: IIS和控制檯,這2個元件可以讓當前的WebApp執行在IIS或者控制檯程式.

這裡稍微提下,可以通過這個配置段落的智慧感知快速的給當前專案加入元件,這個牛逼的特性我們下面詳細介紹.

"commands": {

      "web": "Microsoft.AspNet.Hosting --server Microsoft.AspNet.Server.WebListener --server.urls http://localhost:5000"

  },

這裡定義專案內部內建的各種命令,由於控制檯Server模式必須由一個命令啟動,所以在此定義了一個web命令列.通過啟動這個命令就能啟動控制檯Server模式.一般來說,VS提供了啟動這個命令內在機制,但我們要理解,ASP.NET其實是通過DNX環境的核心命令dnx.exe來執行外部命令的,關於這個命令我感覺目前整合的並不完美,而且這個命令存在於一個非常詭異的地方,關於這部分內容我們再後面的博文在進一步討論.

"frameworks": {

    "dnx451": { },

    "dnxcore50": { }

  },

定義該專案可以執行的.Net Framework版本,默認同時支援4.5.1和5.0 Core版本,去掉任何一個都是可以的,當然要注意5.0還沒有最終Release,還需要注意有些元件可能在5.0 Core版本上會有相容問題,這個時候就必須進行取捨.

"publishExclude" 和 "exclude"主要影響釋出和編譯時的內容選擇.對主功能影響不大.

第一次執行

好,下面我們來執行下看看是什麼效果,選擇web方式(控制檯Server)執行,會彈出一個控制檯程式:

 

然後用瀏覽器訪問http://localhost:5000 (這個URL和project.json中web command的引數配置相吻合),可以看到 一個有“Hello World”的頁面.

為什麼最小模板下會有這個頁面,我們可以看到其實在Startup的Configure函式中有這樣一段程式碼:

       public void Configure(IApplicationBuilder app)
        {
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });
        }


這裡用Lambda表示式實現了一個非常小型的中介軟體,當然這塊程式碼沒有什麼特別意義,可以去除.

元件管理

正如我上一篇文章所有,ASP.NET 5的元件必需通過Nuget進行管理,但實際操作中,卻可以有2種方式。

通過Nuget安裝,這個用過VS2013的同學都應該非常熟悉了,當然VS2015介面略有不同,而且更加準確,功能更完整,大傢俱體看一下就瞭解了.

而我想特別推薦的是第二種方式,在project.json檔案的dependencies小節,直接使用智慧感知進行新增.

 

載入第一個中介軟體 - 靜態檔案StaticFile

當然首先我們要引入StaticFile元件,利用直接修改project.json的方式,可以進行快速的新增:

"dependencies": {

    "Microsoft.AspNet.Server.IIS": "1.0.0-beta4",

    "Microsoft.AspNet.Server.WebListener": "1.0.0-beta4",

    //Static Files

    "Microsoft.AspNet.StaticFiles": "1.0.0-beta4"

  },

修改並儲存之後,VS會自動把這個元件載入到當前專案的所有Framework中:

 

下面我們來載入靜態檔案的中介軟體,我們知道,所有中介軟體是通過Startup的Configure函式來載入的,我們把這個函式原有的程式碼替換為如下程式碼.

     public void Configure(IApplicationBuilder app)
        {
            //載入靜態檔案中介軟體
            app.UseStaticFiles();
        }


根據前面的說明我們知道靜態檔案中介軟體會把根目錄預設設定為wwwroot,下面我們再這個目錄下建立一個index.html,裡面放入任何內容.

 

這時候再次啟動整個專案(web方式)通過http://localhost:5000/index.html 就可以訪問到這個頁面. (反之,如果你沒有新增app.UseStaticFiles();這個頁面是訪問不到的)

下面我們稍微擴充下,如果我們想把index.html設定為我們的預設文件,我們應該如何去做,其實很簡單,在StaticFiles元件中,還提供了另外一箇中間件來實現這個功能,我們回到Configure函式再加入如下程式碼即可:

        public void Configure(IApplicationBuilder app)
        {
            //設定靜態檔案的預設文件
            app.UseDefaultFiles(new DefaultFilesOptions()
            {
                DefaultFileNames = new string[] { "index.html" }
            });
            //載入靜態檔案中介軟體
            app.UseStaticFiles();
        }


這個時候需要引入

using Microsoft.AspNet.StaticFiles;

另外UserDefaultFIles必須在UserStaticFiles之前執行.

然後重新啟動專案,會發現直接訪問 http://localhost:5000 就能看到index.html頁面.

當然StaticFiles中介軟體僅僅是一個起步,一個真正有意義的Web Application還需要更多的內容,下面我會依次介紹在ASP.NET 5專案中如何加入MVC 6, WebApi 2, Entity Framework 7, MS Identity 3的實現方法. 敬請期待.