ASP.NET Core 入門教程 1、使用ASP.NET Core 構建第一個Web應用

ASP.NETCore · 發表 2018-09-18 19:42:00

摘要：一、前言 1、本文主要內容 Visual Studio Code 開發環境配置使用 ASP.NET Core 構建Web應用 ASP.NET Core Web 應用啟動類說明 ASP.NET Core Web 專案結構說明 2、本教程環境資訊...

一、前言

1、本文主要內容

Visual Studio Code 開發環境配置
使用 ASP.NET Core 構建Web應用
ASP.NET Core Web 應用啟動類說明
ASP.NET Core Web 專案結構說明

2、本教程環境資訊

軟體/環境	說明
作業系統	Windows 10
SDK	2.1.401
ASP.NET Core	2.1.3
IDE	Visual Studio Code 1.27
瀏覽器	Chrome 69

3、前置知識

你可能需要的前置知識

VS Code + .NET Core快速開始

ofollow,noindex">https://ken.io/serie/dotnet-core-quickstart

C#語法學習

http://www.runoob.com/csharp/csharp-tutorial.html

二、環境安裝與配置

1、SDK 下載與安裝

下載

下載地址： https://www.microsoft.com/net/download

跨平臺，根據自己的需求選擇即可。

這裡我下載的是：SDK 2.1.401，你可以選擇2.1.x的最新版本

安裝

略，一直下一步即可，沒什麼需要特別注意的。

如果你真想了解，可以參考： https://ken.io/note/dotnet-core-qucikstart-helloworld-windows

2、VS Code下載&安裝

VS Code 下載

下載地址： https://code.visualstudio.com/download

反正VS Code跨平臺，根據自己的需要選擇就可以了，

VS Code 安裝

略，一直下一步即可，沒什麼特別注意的。

如果你用的macOS，直接拖動到應用程式目錄即可，更簡單快捷。

3、VS Code配置

基礎擴充套件安裝

擴充套件	說明
C#	包括語法高亮顯示、智慧感知、定義、查詢所有引用等。除錯支援。網路核心(CoreCLR)。
Chinese (Simplified)	簡體中文補丁包

快捷鍵（Ctrl+Shift+X）進入擴充套件管理頁，直接搜尋副檔名安裝即可，或者點選左側工具欄圖示進入擴充套件管理頁

macOS版本快捷鍵是 Shift+Commnad+X

三、VS Code 開發 ASP.NET Core Web專案

1、專案建立

通過命令列建立專案

#建立專案目錄
mkdir projects

#進入專案目錄
cd projects

#建立專案
dotnet new web -n helloweb

2、VS Code開啟專案

選單：檔案->開啟，選擇專案目錄開啟專案

專案開啟後，VS Code會檢測到缺少兩個必須的Package：OmniSharp、.NET Core Debugger

並且會自動幫你安裝

Downloading package 'OmniSharp for Windows (.NET 4.6 / x64)' (31017 KB).................... Done!
Installing package 'OmniSharp for Windows (.NET 4.6 / x64)'

Downloading package '.NET Core Debugger (Windows / x64)' (41984 KB).................... Done!
Installing package '.NET Core Debugger (Windows / x64)'

Finished

安裝完成後VS Code會提示：

Required assets to build and debug are missing from ‘helloweb’. Add them?

選擇Yes即可。

這時候，可以看一下左側資源管理器，我們可以看到.vscode目錄添加了兩個配置檔案：launch.json，tasks.json。

專案的編譯和除錯配置檔案就已經準備好了

3、VS Code啟動專案

我們直接按下F5，或者選單：除錯->啟動除錯啟動專案

ASP.NET Core 預設繫結是5001埠，而且ASP.NET Core 2.1之後預設綁定了HTTPS，專案啟動成功後，VS Code會幫我們開啟預設瀏覽器並訪問： https://localhost:5001

因為我們並沒有配置SSL證書，所以瀏覽器會發出警告:warning:，以Chrome為例：

這時候，我們點選高階，救護出現繼續訪問的入口

我們點選繼續訪問，就會出現 Hello World!

4、修改繫結協議HTTPS為HTTP

接著我們可以修改配置去掉HTTPS協議繫結

開啟Properties/launchSettings.json檔案

{
"iisSettings": {
"windowsAuthentication": false, 
"anonymousAuthentication": true, 
"iisExpress": {
"applicationUrl": "http://localhost:53122",
"sslPort": 44309
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"helloweb": {
"commandName": "Project",
"launchBrowser": true,
"applicationUrl": "https://localhost:5001;http://localhost:5000",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}

iisSettings、profiles.helloweb配置節點都有啟動繫結配置，因為VS Code啟動專案預設是不通過IIS來host的，iisSettings選項我們忽略即可。

"helloweb": {
"commandName": "Project",
"launchBrowser": true,
"applicationUrl": "http://localhost:5001",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}

將applicationUrl修改為 http://localhost:5001
然後重啟專案（Ctrl+Shift+F5）機會看到乾淨純潔的 Hello World!

5、專案啟動簡介

應用程式入口類

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

public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
WebHost.CreateDefaultBuilder(args)
.UseStartup<Startup>();
}

在應用啟動的時候，會執行CreateWebHostBuilder方法，在這個方法中通過類 Startup 建立了默認了HostBuilder

應用啟動類

public class Startup
{

ConfigureServices(IServiceCollection services)
{
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}

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

方法	說明
ConfigureServices	用於配置應用啟動時載入的Service
Configure	用於配置HTTP請求管道

web專案模板預設在專案啟動的時候呼叫IApplicationBuilder.run方法，在當前HTTP上下文(HttpContext)中輸出了Hello World！

context.Response.WriteAsync(“Hello World!”);

四、備註

1、專案結構說明

根目錄/檔案	說明
.vscode目錄	VS Code專案配置目錄，相當於.vs、.idea資料夾
bin目錄	編譯輸出目錄，相當於Java專案的target目錄
obj目錄	編譯配置與中間目錄，用於存放編譯配置與編譯中間結果
Properties目錄	用於存放專案配置
wwwroot目錄	靜態檔案目錄
helloweb.csproj檔案	專案描述檔案
Program.cs檔案	應用程式入口類檔案
Startup.cs檔案	ASP.NET Core Web應用啟動類檔案，用於專案啟動前進行相關配置