ASP.NET Core 8 Minimal API 搭配 Vue
前言
本篇文章是基於建立一個本地端的應用程式的情境,
用 Minimal API 搭配 Vue 可以輕鬆建構類單機應用,
透過設定把靜態檔案嵌入並發佈單一檔案,
就可以讓前端工程師專注在畫面的設計,
算是個不錯的解決方案。
大约 9 分鐘
本篇文章是基於建立一個本地端的應用程式的情境,
用 Minimal API 搭配 Vue 可以輕鬆建構類單機應用,
透過設定把靜態檔案嵌入並發佈單一檔案,
就可以讓前端工程師專注在畫面的設計,
算是個不錯的解決方案。
當開發同類型的專案一段時間都會有一些固定的設計模式,
或是一些常開發的功能:身分驗證、資料修改、郵件發送、報表產出。
然而每次開發專案都要從舊專案複製過來刪改,
或是另開新的專案範本重新建立資料夾和各類程式片段,
無形之中浪費許多人的時間,
對於多人協作專案沒有可依循的規範容易造成許多歧見。
本次目標為建立一個 Web API 專案範本,然後丟到 Nuget 上。
一份好的 API 文件應該要有明確充足的說明,
不過在台灣一條龍開發的文化行之有年,要完善文件說明相對不容易。
工程師討厭的事情:「討厭別人不寫文件,討厭自己要寫文件」。
所以透過好用的工具配合程式註解產出文件可以有效降低大家的痛苦。
本文說明如何設定 API 的網址大小寫,
雖說網址大小寫對 SEO 基本沒影響,只要格式一致均可。
不過如果有不喜歡大駝峰的命名規則有兩種做法
本文將透過更改選項的方式來設定路由規則。
基於 ASP.NET Core 6 開發的 Web API
讀取 appsettings.json 實作 跨來源資源共用
// 讀取允許列表
string[] corsOrigins = appsettings.GetSection("CORS:AllowOrigins").Get<string[]>();
// 加入具有預設原則的 CORS 和中介軟體
builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(
policy =>
{
if (corsOrigins.Contains("localhost"))
{
policy.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost");
}
else
{
policy.WithOrigins(corsOrigins);
}
policy.AllowAnyHeader();
policy.AllowAnyMethod();
policy.AllowCredentials();
});
});
[[install_ubuntu_22.04]]
盡量照順序做
sudo apt update
sudo apt install nginx
sudo apt-get update
sudo apt-get install -y dotnet-sdk-6.0