.NET Core 3.0 使用Nswag生成Api文檔和客戶端代碼

摘要

在前後端分離、Restful API盛行的年代,完美的接口文檔,成了交流的紐帶。在項目中引入Swagger (也稱為OpenAPI),是種不錯的選擇,它可以讓接口數據可視化。下文將會演示

  • 利用Nswag如何生成Api文檔

  • 利用NSwagStudio如何生成客戶端代碼,並且進行測試

什麼是 Swagger/OpenAPI?

Swagger 是一個與語言無關的規範,用於描述 REST API。Swagger 項目已捐贈給 OpenAPI 計劃,現在它被稱為開放 API。這兩個名稱可互換使用,但 OpenAPI 是首選。它允許計算機和人員了解服務的功能,而無需直接訪問實現(源代碼、網絡訪問、文檔)。其中一個目標是盡量減少連接取消關聯的服務所需的工作量。另一個目標是減少準確記錄服務所需的時間。

Nswag VS Swashbuckle?

.NET Swagger 實現類庫有兩個比較流行:

  • Swashbuckle.AspNetCore 是一個開源項目,用於生成 ASP.NET Core Web API 的 Swagger 文檔。

  • NSwag 是另一個用於生成 Swagger 文檔並將 Swagger UI 或 ReDoc 集成到 ASP.NET Core Web API 中的開源項目。此外,NSwag 還提供了為 API 生成 C# 和 TypeScript 客戶端代碼的方法。

 

為什麼我在.NET core3.0中選擇NSwag呢,NSwag比較活躍,一直在更新,功能也很強大,可以完美的代替Swashbuckle.AspNetCore具體可以參考:https://github.com/aspnet/AspNetCore.Docs/issues/4258

一、利用Nswag生成Api文檔

步驟
  1. 創建Asp.NET Core Api項目,並且集成NSwag

  2. 配置項目

  3. 運行項目

創建Asp.NET Core Api項目,並且集成NSwag

我們將簡單的創建一個ASP.NET core API項目。將其命名為“WebAPIwithSwg”。基於.NETcore3.0

安裝nuget包NSwag.AspNetCore

接下來,在Startup.cs文件中配置Nswag服務和中間件。

在ConfigureServices方法中添加服務

  public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();
            services.AddSwaggerDocument(); //註冊Swagger 服務
        }
在Configure方法中添加Nswag中間件
 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseRouting();
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
            app.UseOpenApi(); //添加swagger生成api文檔(默認路由文檔 /swagger/v1/swagger.json)
            app.UseSwaggerUi3();//添加Swagger UI到請求管道中(默認路由: /swagger).
        }
配置項目

運行項目

右鍵項目在瀏覽器中查看,查看swagger UI需要在url後面添加“/swagger”。本示例http://localhost:54117/swagger

二、利用NSwagStudio如何生成客戶端代碼,並且進行測試
提供GUI界面是NSwag的一大特點,只需要下載安裝NSwagStudio,即可生成客戶端代碼。
步驟
  1. 現在安裝NSwagStudio

  2. NSwagStudio配置,生成客戶端代碼

  3. 創建測試客戶端項目

下載安裝NSwagStudio

下載NSwag Studio http://rsuter.com/Projects/NSwagStudio/installer.php 安裝之後打開 NSwag Studio 如圖

NSwagStudio配置,生成客戶端代碼

選擇runtime,我選擇的是NETCore30,切換OpenAPI/Swagger Specification ,在Specification URL 輸入你的Swagger.json路徑,本示例:http://localhost:54117/swagger/v1/swagger.json輸入路徑之後,點擊 create local copy 按鈕獲取json。

接下配置來生成客戶端代碼。我們首先選擇“csharp client”複選框,然後勾選掉 “Inject Http Client via Constructor (life cycle is managed by caller)” ,最後設置下輸出路徑 點擊生成文件(Generate Files)。步驟如下

到此客戶端代碼已經自動生成。

查看生成的部分代碼


public async System.Threading.Tasks.Task<System.Collections.Generic.ICollection<WeatherForecast>> GetAsync(System.Threading.CancellationToken cancellationToken)
        {
            var urlBuilder_ = new System.Text.StringBuilder();
            urlBuilder_.Append(BaseUrl != null ? BaseUrl.TrimEnd('/') : "").Append("/WeatherForecast");
    
            var client_ = new System.Net.Http.HttpClient();
            try
            {
                using (var request_ = new System.Net.Http.HttpRequestMessage())
                {
                    request_.Method = new System.Net.Http.HttpMethod("GET");
                    request_.Headers.Accept.Add(System.Net.Http.Headers.MediaTypeWithQualityHeaderValue.Parse("application/json"));
    
                    PrepareRequest(client_, request_, urlBuilder_);
                    var url_ = urlBuilder_.ToString();
                    request_.RequestUri = new System.Uri(url_, System.UriKind.RelativeOrAbsolute);
                    PrepareRequest(client_, request_, url_);
    
                    var response_ = await client_.SendAsync(request_, System.Net.Http.HttpCompletionOption.ResponseHeadersRead, cancellationToken).ConfigureAwait(false);
                    try
                    {
                        var headers_ = System.Linq.Enumerable.ToDictionary(response_.Headers, h_ => h_.Key, h_ => h_.Value);
                        if (response_.Content != null && response_.Content.Headers != null)
                        {
                            foreach (var item_ in response_.Content.Headers)
                                headers_[item_.Key] = item_.Value;
                        }
    
                        ProcessResponse(client_, response_);
    
                        var status_ = ((int)response_.StatusCode).ToString();
                        if (status_ == "200") 
                        {
                            var objectResponse_ = await ReadObjectResponseAsync<System.Collections.Generic.ICollection<WeatherForecast>>(response_, headers_).ConfigureAwait(false);
                            return objectResponse_.Object;
                        }
                        else
                        if (status_ != "200" && status_ != "204")
                        {
                            var responseData_ = response_.Content == null ? null : await response_.Content.ReadAsStringAsync().ConfigureAwait(false); 
                            throw new ApiException("The HTTP status code of the response was not expected (" + (int)response_.StatusCode + ").", (int)response_.StatusCode, responseData_, headers_, null);
                        }
            
                        return default(System.Collections.Generic.ICollection<WeatherForecast>);
                    }
                    finally
                    {
                        if (response_ != null)
                            response_.Dispose();
                    }
                }
            }
            finally
            {
                if (client_ != null)
                    client_.Dispose();
            }
        }
創建測試客戶端項目

創建一個控製程序項目,命名“WebApiClient”。

把自動生成的類“WeatherForecastClient”添加到客戶端項目中,然後安裝Newtonsoft

最後在Main函數中添加測試代碼,開始使用Api。

 static async System.Threading.Tasks.Task Main(string[] args)
        {

            var weatherForecastClient = new WeatherForecastClient();
            //gets all values from the API
            var allValues = await weatherForecastClient.GetAsync();
            Console.WriteLine("Hello World!");
        }

運行客戶端應用程序,進行調用api

當然如果需要調試api項目內部代碼,可以設置斷點,進入一步一步的調試

小結:NSwag 功能遠不止這些,本篇文章演示了如何生成api文檔和自動生成的api客戶端代碼方便我們調試,也可以作為對應的sdk。

參考:微軟官方文檔—https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/getting-started-with-nswag?view=aspnetcore-2.2&tabs=visual-studio

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※公開收購3c價格,不怕被賤賣!

※想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

※不管是台北網頁設計公司、台中網頁設計公司,全省皆有專員為您服務

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※帶您來看台北網站建置,台北網頁設計,各種案例分享

雅虎日本在其餐廳徵收“油炸食品稅”

  為了推廣健康生活方式,減少僱員中間的肥胖率,雅虎日本在其總部餐廳開始徵收“油炸食品稅”。從 10 月 8 日開始,炸豬排之類的油炸食品價格上漲,而水煮魚或烤魚之類的魚類食品則價格下降。

  它在 2017 年的體檢显示,45% 的僱員 LDL 膽固醇含量較高。它的自助餐廳每天有 1000 名僱員吃飯,油炸食品要比水煮魚或烤魚受歡迎得多。除了炸豬排漲價外,炸雞排也漲了 100 日元至 691 日元。如今到了午餐點,魚類食品一售而空,官員表示效果顯著。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※公開收購3c價格,不怕被賤賣!

※想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

※不管是台北網頁設計公司、台中網頁設計公司,全省皆有專員為您服務

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※帶您來看台北網站建置,台北網頁設計,各種案例分享

傳谷歌母公司欲收購Fitbit 擬推自有品牌可穿戴設備

  原標題:Google is reportedly trying to buy Fitbit

  網易科技訊,10 月 29 日消息,據外媒報道,據知情人士透露,谷歌母公司 Alphabet 正在就收購美國可穿戴設備公司 Fitbit 與後者進行談判。不過,目前兩家公司還沒有確認這筆交易,也不清楚 Alphabet 的報價。上個月,有報道稱 Fitbit 正在探索出售的可能。

  多年來,谷歌憑藉其 Wear OS 操作系統在可穿戴市場上佔據了重要地位,但它始終難以與 Apple Watch 競爭,儘管其得到了包括 LG、Fossil 和 TicWatch 在內的眾多公司支持。就連主要的安卓製造商三星也未使用 Wear OS,而是使用自己的 Tizen 操作系統。

  今年 1 月,谷歌斥資 4000 萬美元從 Fossil 手中收購了某種智能手錶技術,但目前尚不清楚該技術到底是什麼,Fossil 高管將其描述為“尚未投放市場的新產品創新”,不過迄今仍然沒有上市。

  多年來,始終有傳言稱谷歌希望推出自家品牌的 Pixel 智能手錶。在 2016 年的某個時候,這些計劃幾乎促使谷歌品牌的智能手錶上市,但該公司最終擱置了計劃,因為其擔心這些手錶可能“傷及谷歌硬件品牌的聲譽”。這些 LG 製造的智能手錶後來在 2017 年以 LG Watch Sports 和 LG Watch Style 的形式發布,評價一般。

  從那時起,谷歌打造自家硬件野心開始膨脹。2017 年,谷歌收購了 HTC 智能手機工程團隊以開發 Pixel 手機,而 Fitbit 的收購可能會幫助其在可穿戴設備領域取得類似的進展。

  與此同時,蘋果在 Apple Watch 上的經驗表明,健康正迅速成為智能手錶的殺手級應用,這也是 Fitbit 自身健身追蹤器越來越關注的一個領域。然而,儘管 Fitbit 在 2016 年收購了智能手錶製造商 Pebble,但其在智能手錶方面的表現卻不盡如人意。例如,今年早些時候發布的健身跟蹤器 Fitbit Versa 2,其實本質上就是一款普通的智能手錶。

  谷歌和 Fitbit 拒絕就上述報道置評。(小小)

  

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※公開收購3c價格,不怕被賤賣!

※想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

※不管是台北網頁設計公司、台中網頁設計公司,全省皆有專員為您服務

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※帶您來看台北網站建置,台北網頁設計,各種案例分享

Jetpack 提供免費 Asset CDN 為你的 WordPress 核心檔案分流加速

如果有經常閱讀免費資源網路社群的架站相關教學,應該知道我相當重視速度,而提升網站載入速度方法很多,最基本的是使用更快、更好的網站空間,例如 Cloudways 協助使用者部屬最佳化 WordPress 環境,除此之外,選用 Cloudflare 這類 CDN 服務不但能強化網站安全,更重要的是利用各區域節點達到加速、節省流量等效果,對於架站的基礎建設來說是非常值得投入的選項。

如果你本身使用 WordPress 架站,特別推薦官方提供的 Photon CDN 免費功能(這是包含在 Jetpack 外掛程式的其中一個模組),可針對圖片分流加速,雖然會犧牲圖片品質,但能大幅降低流量耗費,如果搭配延遲載入(Lazy Load)等功能將有非常棒的效果,不過也不是毫無缺點,例如圖片會因壓縮而稍微降低畫質,除此之外,快取(Cache)期限永久不失效,若是圖片編輯更新,只能重新命名圖片才能獲取新的圖片檔案。

以往 Photon CDN 只能針對 PNG、JPG 或 GIF 圖片格式進行處理,最近在 Jetpack 6.6 更新後確定加入一項全新「Asset CDN」模組,簡單來說,這是對 WordPress 核心和 Jetpack 相關檔案進行分流加速的新功能,可以透過 WordPress 官方的 CDN 伺服器處理 CSS、JS 檔案,不過僅止於 WordPress 核心及 Jetpack 檔案,像是 jQuery、Genericons、Dashicons 和一些在 Jetpack 外掛模組中會用到的檔案。

雖然 Asset CDN 不支援佈景主題或第三方檔案,但站長們會發現 WordPress 網站開啟時會載入不少核心檔案,如果又有使用 Jetpack 外掛的話那麼檔案會更多,開啟 Asset CDN 將能夠直接取代鏈結並改由 WordPress CDN 提供檔案,降低主機負載,獲取檔案也有加速及壓縮效果。

目前這個模組還在測試階段,必須透過特殊方式才能將它啟用,或許也還不夠完善,有興趣的話可以照著本文教學將它啟用,即可在網站中測試這個全新的加速功能。

外掛名稱:Jetpack by WordPress
外掛鏈結:https://zh-tw.jetpack.com/

使用教學

STEP 1

開啟 WordPress 控制台,從「外掛」的「安裝外掛」中找到 Jetpack by WordPress.com 功能,接著點選「立即安裝」即可將它下載、安裝到你的網站中。

如果沒有外掛選項,有可能你使用的是 WordPress.com,WordPress.com 和 WordPress 不同,可以參考「當 WordPress 遇上 WordPress.com:它們是相同的嗎?」瞭解兩者的差異。

STEP 2

啟用後會先出現 Jetpack 設定畫面,點選「設定 Jetpack」開始進行,這個外掛比較特別的是必須連結使用者的 WordPress.com 帳號,如此一來才能使用相關模組。

WordPress.com 免費註冊、申請帳號過程並不算太困難,連結後會跳出是否允許以某個身分連結 WordPress 網站的提示訊息,核准後會跳到方案規格,目前免費版在頁面下方,點選「免費開始使用」就能跳過付費並免費使用 Jetpack 相關功能。

STEP 3

設定完 Jetpack 並在網站中開始運作後,點選 WordPress 控制台左側選單的 Jetpack 並找到「設定」選項,接著將網頁拉到最下方,點選「偵錯」鏈結(灰色文字不是很明顯請自己找一下)。

稍待片刻,Jetpack 會測試網站是否可以正常連接,這部分結果無論為何並不影響到接下來的使用,有些伺服器可能會有防火牆或一些阻擋規則,但只要能將網站和 WordPress 帳號連接就沒問題。

將頁面往下拖曳,點選「存取您網站上可用的 Jetpack 完整模組清單」鏈結。

STEP 4

從模組列表中找到「Asset CDN」並點選「啟用」後就能開啟此功能,因為這個模組還在測試階段,必須使用此方法才能找到開啟,未來如果加入 Jetpack 成為正式版就不用這麼做,直接於控制台將它啟用即可。

開啟 Asset CDN 後,返回 WordPress 前台檢視原始碼,就能看到原有 WordPress 核心檔案及 Jetpack 相關檔案路徑改為從 https://c0.wp.com/ 獲取檔案,看起來會像這樣:

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選

想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

帶您來看台北網站建置、套版網頁設計、台北網站改版設計、台北RWD響應式網頁設計,各種案例分享

廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益

CommentBox.io 沒有廣告、不追蹤用戶隱私的網站留言系統

通常做了一個網站後,開發者會加入互動功能,最常見的包括社交網站按鈕和留言討論區,如果你是使用 WordPress 架站,預設情況下就已經內建迴響機制,若你覺得功能太陽春還可以透過 Jetpack Comments 模組強化,讓留言者使用自己的社交網站帳號登入,不用重新註冊帳號,當然也有不少提供留言框的服務,例如老牌的 Disqus,後來被收購後已經不太推薦使用。

其實最簡單、快速的方法是使用 Facebook Comments 留言外掛程式,但我知道有些人堅持不用臉書,而且沒有 Facebook 帳號又無法匿名回覆,因此臉書留言框可能不適合所有網站類型使用。如果你想找一個更穩定、可靠的第三方留言功能,可以研究一下這個新服務。

本文要推薦的「CommentBox.io」是一款第三方留言外掛,功能淺顯易懂,就是讓使用者可以在頁面下方留言或進行討論,設計風格簡約,適用於各種網站樣式,更重要的是 CommentBox.io 沒有廣告、不收集使用者 Email,任何人都可以透過和第三方服務帳戶連結,快速登入進行留言。也支援匿名留言功能。

如果你未來想轉換到其他留言平台,CommentBox.io 亦能將留言備份匯出,不會將使用者綁在平台上進退兩難,這些都可以在控制台內自行操作完成。

CommentBox.io 本身提供免費和付費方案(每月 $10 美元),兩者差別在於免費方案有每個月最多一百篇留言的限制,不過對於小網站或單一頁面來說其實沒什麼影響,如果需要更強大的留言審核功能,還可考慮付費升級 Moderation Plus,一般來說預設的留言管理工具就已經很夠用。

網站名稱:CommentBox.io
網站鏈結:https://commentbox.io/

使用教學

STEP 1

首先開啟 CommentBox.io 網站,點選右上角的 Dashboard 或找到 Sign Up 註冊帳號按鈕,有四種註冊方式,包括使用第三方 Facebook、Twitter 或 Google 帳戶登入或是以 Email 註冊,無論使用那一種方式仍必須回到信箱點選信中的確認鏈結。

STEP 2

註冊登入 CommentBox.io 控制台,第一次使用必須先建立一個專案,填入你的網站名稱和網域名稱,先設定一下 Email 通知功能,看看有沒有需要在自動核准留言、有留言等待審核或有留言被標記為垃圾訊息時收取郵件提醒。

預設情況下所有留言都會自動核准、出現在留言系統中,如果你希望可以手動審核每一則留言,可調整成「Manual」,在沒有審核通過前不會顯示出來,不過缺點就是會比較耗費時間,留言也無法即時,另有折衷方案「Granular」只在內容包括鏈結、留言者被其他網站封鎖或匿名留言等情況下才會需要手動審核。

STEP 3

建立專案後 CommentBox 會給出一個「Project ID」,每個使用者每個網站的 ID 都是獨一無二,稍候在將留言框加入網站時會用到。

STEP 4

點選「Embed Instructions」查看網站提供的內嵌說明,裡頭會有各種在網站放入留言框的方式,簡單來說,只要塞入一個 .js 文件,以 HTML 方式放入一個特定 div 標籤即可在該位置載入 CommentBox.io 留言框。

想測試留言框也可以在 CommentBox.io 網站首頁下方找到這項功能。

 

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選

想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

帶您來看台北網站建置、套版網頁設計、台北網站改版設計、台北RWD響應式網頁設計,各種案例分享

廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益