Ming

在開發專案前端的過程中，使用 Swagger 讓我省了不少事，提升跟後端溝通的效率，大大減少了溝通成本，今天，要為各位做個簡單的 Swagger 介紹，以及如何在 .net 5.0 中建立 Swagger 服務。 什麼是 Swagger？簡言之， Swagger 是一套可以幫助開發者與使用者管理 API 的工具。 Swagger 的好處? Swagger 所產生的 API 文件，讓開發者可以知道有哪些 API 可以介接。 可以讓開發者知道，API 需要給那些參數，以及需要使用哪種請求方法（request methods），GET、POST、PUT、DELETE。 隨著專案規模愈大，前後端需要傳遞的資料規格也更複雜，可以幫助前後端一起制定需要傳遞的資料規格。 工程師通常都不喜歡寫文件，可以藉由 Swagger 讓工程師少寫文件。 作為 API 的測試工具，當前端打 API 失敗或是回傳預期外的資料，都可以及時跟後端溝通。 建立 Swagger 從建立一個新專案開始 專案類型 設定專案名稱 與 位置 Framework 設定 .NET 5.0；打開 HTTPS；勾選「啟用 Open ...

在 Angular 中 Directive 分成三種： Component：帶有 templete 的 directive。 Structural Directive：可以改變 DOM 的結構，如：NgIf, NgFor, 以及 NgSwitch Directive：可以改變 DOM ，或 component 呈現的樣式或行為，如NgClass , NgStyle 今天，我要為各位介紹如何使用客製化 directive 來改變一段文字的背景顏色 首先 component 的 templete 1<p>萊納，你坐啊！</p> 建立 directive 指令，跟 component 一樣，只是將 c 改成 d (directive 簡寫)，取名 add-style 1ng g d add-style 來看看新建立的 add-style.directive.ts 123456@Directive({ selector: '[addStyle]'})export class AddStyleDirective { ...

Pipes 是一個簡單的涵式，主要的功能是將我們要顯示的值/數據以另一種型式呈現，內建的 pipes 功能有大/小寫轉換、貨幣轉成本地格式、數字轉百分比、日期格式轉換，或是將值轉換成 JSON 格式，等等…. 這些內建 pipes 最大的特點： 可以直接在 Template 中使用，無須在 Component 內撰寫轉換邏輯。 同樣的 pipe ，可以重複使用在不同的地方。 內建的 pipes，已經可以解決大部分的需求，但專案是多變的，客戶會提出怎樣的需求，我們通常無法左右，若轉換需求內建 Pipes 辦不到，且很多地方會用到，難道只能靠共用函式處理嗎？其實，我們可以使用更優雅的方式解決，以下我就來示範如何客製化 Pipe 元件。 目前有個情境是這樣的：將英哩轉公里。 建立新專案 app.component.html，範本如下： 1234<label>英里(mile)：</label><input (input)="onConvert($event.target.value)" /><p></p>公 ...

開發專案時，在其中的某個環節，想說除了switch之外，是否有更好的寫法，上網一查發現，還有switch(true)這種用法，感覺還蠻新奇的，第一次接觸到的人或許會對expression裡面怎會是true感到疑惑。 首先，我們先來討論以下情境：請依照分數高低，分配SABCD級距。 一般的情況都會這樣寫： 12345678910111213if (score === 100) { level = 'S';} else if (score >= 90 && score < 100) { level = 'A';} else if (score >= 80 && score < 90) { level = 'B';} else if (score >= 70 && score < 80) { level = 'C';} else if (sco ...

複製 SQL Server 資料庫1. 來源資料庫按右鍵 2. 下一步 3. 選取儲存位置，副檔名:bacpac 4. 進階 5. 選取需要的table 6. 確認後，按「完成」 7. 完成後，關閉 8. 會在儲存位置，看到bacpac檔

新手在學習CSS flex時，首要觀念就是要釐清什麼是main axis與cross axis之外，接著就是各種排列屬性，譬如：flex-direction、flex-wrap、justify-content、align-items….等 除非對CSS flex很熟，不然版型很難一次到位，多少都會調整一下，我們一般都會在developer tools(F12)的Styles中修改CSS內容，讓瀏覽器可以即時預覽修改後的結果 但如果是複雜的版型或是新手不熟flex，改哪個屬性還要查來查去的，確實會很不方便。 好加在，Google Chrome推出的90版，提供了「flexbox Editor」，讓開發者可以透過此介面，快速的調整版型。 首先，在有使用flex的元素旁邊，會看到顯示flex的灰色按鈕，點擊後，可以看到flex layout 接著，在Styles，display: flex旁，有個icon，點擊後，會顯示flexbox Editor，此時，有數個flex屬性可以選擇，如第一個是flex-direction： flex-wrap justify-content align-it ...